THREE.meshhongmaterial 不工作 - 给黑色答案

【问题标题】：THREE.meshphongmaterial Not Working - Giving Black ColorTHREE.meshhongmaterial 不工作 - 给黑色
【发布时间】：2015-01-12 07:33:54
【问题描述】：

我正在尝试使用本教程中的THREE.meshphongmaterial：http://solutiondesign.com/webgl-and-three-js-texture-mapping/

但它不起作用并给出黑色。这是它的 jsfiddle：http://jsfiddle.net/8hrk7mu6/12/

问题在第 32 行：

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

为什么它不起作用？如果我使用THREE.MeshNormalMaterial，那么它可以工作。

var material = new THREE.MeshNormalMaterial();

稍后，我想在我的代码中使用图像中的纹理。那也行不通。只有THREE.MeshNormalMaterial 正在工作。为什么？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

事实证明有必要添加光。没有光，meshphongmaterial 会呈现黑色。

所以我不得不添加这样的东西：

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);

从这个链接得到它：https://github.com/mrdoob/three.js/issues/2766

【讨论】：

如果您从 2012 年开始使用 O'Reilly WebGL，这将修复他们的示例。代替THREE.Light(0xffffff, 1.5)，使用THREE.DirectionalLight( 0xffffff )

【解决方案2】：

为场景中的所有事物添加一些环境光是最简单的解决方案：

scene.add(new THREE.AmbientLight(0x404040))

【讨论】：

【解决方案3】：

您需要添加一些环境光或点光，因为， MeshPhongMaterial 对光有反应，因此只有在有光的情况下才可见，为了获得最佳效果/可见性，请使用以下代码：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;

scene.add(ambientLight, pointLight);

【讨论】：

【解决方案4】：

Terg 的 Three.js 学习快速入门建议设置发射值。灯光越少，渲染速度就越快。

【讨论】：