Question

我正在尝试从THREE.ShaderLib构建phong着色器。这就是我得到的：

var phongShader = THREE.ShaderLib.phong;
var uniforms = THREE.UniformsUtils.clone(phongShader.uniforms);

material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: phongShader.vertexShader,
  fragmentShader: phongShader.fragmentShader
});

它似乎不起作用。我做错了什么？

小提琴：http://jsfiddle.net/Jvf9k/2/ 类似的问题：Three js - Cloning a shader and changing uniform values

编辑：在Tapio答案的帮助下更新了小提琴。它现在有效！

Answer 1

您的JSFiddle正在使用THREE.CanvasRenderer，它不支持（也不支持）着色器材质（但可以支持内置材质）。将其更改为THREE.WebGLRenderer。此外，使用没有灯光的phong材料是没有意义的，因为结果将全黑。带线框的Phong听起来也不是很有用。

Answer 2

添加灯光和雾：

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

从THREE.ShaderLib构建phong着色器

2 个答案: