clone - 三个 js - 克隆着色器并更改统一值

Question

我正在创建一个着色器来生成带有阴影的地形。

我的出发点是克隆 Lambert 着色器并使用 ShaderMaterial 最终使用我自己的脚本对其进行自定义。

标准方法效果很好:

var material = new MeshLambertMaterial({map:THREE.ImageUtils.loadTexture('images/texture.jpg')});

var mesh = new THREE.Mesh(geometry, material);

etc

结果:


但是我想使用朗伯 Material 作为基础并在其上工作，所以我尝试了这个:

var lambertShader = THREE.ShaderLib['lambert'];
var uniforms = THREE.UniformsUtils.clone(lambertShader.uniforms);

var texture = THREE.ImageUtils.loadTexture('images/texture.jpg');
uniforms['map'].texture = texture;

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: lambertShader.vertexShader,
    fragmentShader: lambertShader.fragmentShader,
    lights:true,
    fog: true
});

var mesh = new THREE.Mesh(geometry, material);

这个结果:


看起来着色器没有考虑我添加的新纹理，但是在我记录制服时查看检查器， map 对象具有正确的值。

我对三个还很陌生，所以我可能在做一些根本错误的事情，如果有人能在这里指出我正确的方向，那就太好了。

如果有帮助，我也可以提供演示链接？

谢谢，
将要

编辑:

这里有一些演示链接。

使用着色器 Material 的演示: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

使用工作朗伯 Material 演示: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

Answer 1

这不起作用的原因是默认 Three.js 兰伯特着色器使用预处理器宏指令 #ifdef确定是否使用贴图、环境贴图、光照贴图等。

Three.js WebGLRenderer 设置适当的预处理器指令 ( #define ) 以根据 Material 对象上是否存在某些属性来启用这些着色器。

如果您打算采用克隆和修改默认着色器的方法，则必须在 Material 上设置相关属性。对于纹理贴图，Three.js WebGLRenderer.js 有这样一行:

parameters.map ? "#define USE_MAP" : ""

所以尝试设置 material.map = true;为您的着色器 Material 。

当然，如果您知道自己将要编写自己的着色器，并且不需要动态包含各种着色器片段，则可以直接编写着色器，而无需担心这一点。