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

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

的标准方法效果很好：

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

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

etc

结果： Result with standard lambert 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);

这一个结果： Result for cloning lambert shader and changing map uniforms

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

我很新，所以我可能会做一些根本性的错误，如果有人能指出我在正确的方向在这里，那将是伟大的。

我也可以把演示链接，如果这将有所帮助？

感谢，威尔

编辑：

下面是一些演示链接。

演示与着色材料：http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

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

来源

2012-08-23 WillDonohoe

是的，演示链接确实会有帮助。 – mrdoob

嗨mrdoob，为快速回复欢呼。我添加了该帖子的演示链接。如果你可以摆脱这种情况，那将是惊人的 – WillDonohoe

我注意到了特定于三种的webgl渲染器中的一些功能。MeshLambertMaterial不会与THREE.ShaderMaterial发生。特别是清爽的制服。 https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L4858 这只是一个在黑暗中刺伤，但是这是可能导致问题的东西？ – WillDonohoe

这不工作的原因是默认three.js所朗贝尔着色器使用预处理宏指令#ifdef，以确定是否使用地图，env地图，光照贴图等。

Three.js WebGLRenderer根据资源上是否存在某些属性来设置相应的预处理器指令（#define）以启用这些着色器片段目的。

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

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

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

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

来源

2012-09-17 00:28:49 fuzic

谢谢@fuzic！ – WillDonohoe

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

回答

相关问题