three.js - 从 THREE.ShaderLib 构建 phong 着色器

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/ 类似的 SO 问题：三个 js - 克隆着色器并更改统一值

编辑：在 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
});