我正在尝试使用本教程中的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 推荐的。灯光越少,渲染速度越快。