- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有办法替换通过 Three.js 库中的 Collada 加载器导入的简单 3D 模型中的所有纹理?
我想要完成的是通过 ShaderMaterial 将颜色、高光和法线贴图应用于模型,方法是指向具有模型 Material 名称但添加了“-color”、“-normal”和“-spec”的新文件措辞:
"brochureFrontCover"-> "brochureFrontCover-color.jpg", "brochureFrontCover-normal.jpg", "brochureFrontCover-spec.jpg"
如果哪位好心人能告诉我这样的函数应该是什么样子,我将不胜感激。
脚本: http://dev.printhouse.co.uk/uv-simulator/j/Brochure.js
科拉达模型: http://dev.printhouse.co.uk/uv-simulator/m/Brochure.dae
最佳答案
我觉得应该是这样的:
THREE.SceneUtils.traverseHierarchy( dae, function ( child ) {
if ( child.material ) {
var shader = THREE.ShaderUtils.lib[ "normal" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-color.jpg" );
uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-normal.jpg" );
uniforms[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-spec.jpg" );
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
child.geometry.computeTangents();
child.material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
lights: true
} );
}
} );
This example如果您需要调整制服,应该是一个很好的引用。
关于javascript - 如何在 Three.js 中用 ShaderMaterial 替换 Collada 导入的纹理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10782398/
我正在试验 Three.js ShaderMaterial 并尝试实现照明。 我有 r70 的工作代码,但相同的代码(稍作更改 - MAX_POINT_LIGHTS 常量已重命名为 NUM_POINT
我在 THREE.ShaderMaterial 中启用场景雾时遇到问题.目前,雾仅影响其他几何体,但使用 THREE.ShaderMaterial 创建的天穹不受雾的影响。 似乎有一个 bool 值
我正在编写自定义 ShaderMaterial 并决定包含灯光和雾。到目前为止一切顺利,我得到了与 three.js 集成的着色器构建它的雾、环境光和点光(它符合我的目的)。 但是,我得到的阴影是平滑
我使用 InstancedBufferGeometry 创建了很多框,然后使用 Perlin 噪声更新位置。但是网格已经转换并收到了错误的阴影。如何计算右阴影? 顶点着色器 attribute vec
使用 three.js r71。我不明白为什么我的纹理没有被 ShaderMaterial 读取。飞机是黑色的。我需要一双新鲜的眼睛来帮助我找出问题所在。 非常感谢! 这是 HTML:
我正在尝试使用 ShaderMaterial 来调整一个对象(VR 视频的球体)的亮度和对比度 这是我实现 ShaderMaterial 的方法 var geometry = new THREE.Sp
我正在尝试创建一个着色器,该着色器考虑到我在场景中定义的剪裁平面。这些剪切平面适用于我正在使用的所有“ Vanilla ” Material :THREE.MeshLambertMaterial ,
因为我需要为每个面单独设置透明度,所以我从 MeshBasicMaterial 切换到 ShaderMaterial。 我画了两次几何:首先我的填充三角形然后是一个线框来获取每个三角形的边框。 有没有
我无法将纹理加载到我的着色器 Material ,我看到的只是黑点。这是我的 shader.js THREE.ShaderLib['cloud'] = { uniforms: {
我正在创建一个包含各种对象的场景,并受到这个 CodePen ( https://codepen.io/gnauhca/pen/VzJXGG) 的启发。在示例中,在 ShaderMaterial 上禁
我正在绘制两个相邻的几何体并让它们旋转。问题是第一个绘制的阻碍了第二个,透明度应该生效。这两个对象应该具有相同的透明度,无论谁先被绘制。这就是混合打开而深度测试关闭的原因。以下是图片: 两个几何体都是
我目前正在使用 THREE.ShaderMaterial 自定义基础 phong Material ,并使用三个 js 的大部分基础 block 和自定义片段着色器 block 重建 Material
我尝试在球体上绘制纹理,如下所示: script(type='x-shader/x-vertex')#Vertex varying vec2 vUv; void main() { vUv
我正在尝试为 Threejs 开发自己的自定义 glsl 着色器,但我叠加了 HDR 图像的光泽反射。它适用于 LDR 图像,但不适用于 HDR。 我首先使用 this example为了生成 mip
在我的项目中,我使用 ShaderMaterial 来渲染地形。根据高度图纹理在顶点着色器中修改顶点位置: vec4 mvPosition = modelViewMatrix * vec4( posi
我为 3d 飞机跟踪器添加了发光效果: 效果由 THREE.ShaderMaterial 驱动。该效果仅适用于某些 PC。在其他 PC 上,效果不可见,但没有显示任何错误,其他一切正常。我试过多台 P
我注意到 THREE.js 在内部使用着色器来创建核心 Material “例如 MeshLambertMaterial”,因此我决定将 Lambert 着色器从 Three.js 代码复制到一个新的
我对 Three.js 还很陌生,所以请耐心等待。因此,我被分配了一个项目,其中涉及使用 WebGL 创建车身并在鼠标按下时将其压凹。我正在尝试将凹痕的颜色从车身颜色更改为黄色。知道该怎么做吗?注意:
我想使用 THREE.ShaderMaterial 而不是 THREE.PointMaterial。 并且在调整颗粒大小或绘制颗粒方面存在问题。 如果我使用THREE.PointMaterial,则粒
我正在尝试获取版本 58 的 THREE.js 示例以在当前版本的 THREE.js 上运行 - 这里是 the original example . 有一些错误我可以通过注释掉一些东西来消除,但一个
我是一名优秀的程序员,十分优秀!