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

Question

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

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

标准方法效果很好：

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

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

etc

结果：

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

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);

这个的结果：

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

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

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

谢谢， 将

编辑：

以下是一些演示链接。

使用着色器材质进行演示：http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

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

Answer 1

这不起作用的原因是默认的Three.js lambert着色器使用预处理器宏指令#ifdef来确定是否使用地图，envmaps，光照贴图等等。

Three.js WebGLRenderer设置适当的预处理程序指令（#define），以根据材质对象上是否存在某些属性来启用这些着色器。

如果你已经开始采取克隆的方式和修改默认着色器，您必须在材质上设置相关属性。对于纹理贴图，Three.js WebGLRenderer.js具有以下行：

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

因此，请尝试为着色器材料设置material.map = true;。

当然，如果您知道自己将要编写自己的着色器并且不需要动态包含各种着色器片段，那么您可以明确地编写着色器并且您不必担心这个问题。