11

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

我的出发点是克隆 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);

这个结果： 克隆 Lambert 着色器和更改地图制服的结果

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

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

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

谢谢，威尔

编辑：

这里有一些演示链接。

带有着色器材质的演示：http: //dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

带有工作兰伯特材料的演示：http: //dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

4

1 回答 1

8

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

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

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

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

所以尝试设置material.map = true;你的着色器材质。

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

于 2012-09-17T00:28:49.843 回答