从 THREE.ShaderLib 构建 phong 着色器答案

【问题标题】：Build phong shader from THREE.ShaderLib从 THREE.ShaderLib 构建 phong 着色器
【发布时间】：2013-05-09 13:29:08
【问题描述】：

我正在尝试从 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 问题：Three js - Cloning a shader and changing uniform values

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

【问题讨论】：

试试THREE.ShaderLib['phong'];
@gaitat - 在不同的符号（更长且可能效率更低）中，这只是同一件事。

标签： three.js webgl

【解决方案1】：

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

【讨论】：

啊！谢谢！当然！我不敢相信我错过了。我更新了小提琴，它现在可以工作了。

【解决方案2】：

添加灯光和雾：

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

【讨论】：