三个JS - 克隆着色器和不断变化的均匀值(Three js - Cloning a shader

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

我的出发点是克隆兰伯特着色器，并使用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所朗贝尔着色器使用预处理宏指令#ifdef确定是否使用地图，envmaps，光照贴图，等等等等。

所述three.js所WebGLRenderer设置适当的预处理指令（ #define ），以使这些块基于材料对象上是否存在某些性质的着色器。

如果你正在服用克隆和修改默认着色器的方式设置，你将不得不设置在材料上相关的属性。 对于纹理贴图的three.js所WebGLRenderer.js有这样一行：

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

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

当然，如果你知道你将要编写自己的着色器，你不需要各种着色片段的动态包含，你可以只写着色器明确，你将不必担心这一点。

文章来源: Three js - Cloning a shader and changing uniform values