从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
});

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

Three js - Cloning a shader and changing uniform values：小提琴类似所以问题:小提琴

编辑:在Tapio answer的帮助下更新小提琴。它现在可以工作了！

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
});