三、网状材料不起作用 - 给黑色

THREE.meshphongmaterial Not Working - Giving Black Color

本文关键字：黑色 不起作用 材料      更新时间：2023-09-26

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

事实证明有必要添加光。没有光，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

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

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

您将需要添加一些环境光或点光，因为，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);

设置自发光值是由 Terg 的 Three.js Learning QuickStart 推荐的。灯光越少，渲染速度越快。

相关文章：