Question

我正在尝试使用本教程中的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正在运作。为什么呢？

Answer 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

Answer 2

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

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

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

Answer 4

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

THREE.meshphongmaterial不工作 - 给黑色

4 个答案: