javascript - 模型使用 MeshBasicMaterial 但不使用 MeshPhongMaterial 进行渲染

Question

我正在使用 Three.js 制作一个页面。我已经编写了这段代码，它可以工作:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 7;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 20;
pointLight.position.y = 20;
pointLight.position.z = 20;

scene.add(pointLight);
var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );

var thebox, loader = new THREE.OBJLoader();
loader.load("https://dl.dropbox.com/s/kasjdw78lx3bkk0/weirdshape.obj?dl=0", function (obj) {
  obj.material = material;
  obj.traverse(function(child) { child.material = material; });
  scene.add(obj);
  thebox = obj;
  render();
});

function render() {
  thebox.rotation.y += 0.01;
  thebox.rotation.x += 0.01;
  thebox.rotation.z += 0.01;
  requestAnimationFrame( render );
    renderer.render( scene, camera );
}

这段代码确实有效，但是当我尝试将 MeshBasicMaterial 更改为 MeshPhongMaterial 时，我看到的只是黑屏，即使我的灯光似乎处于命令。我该如何解决这个问题？

Answer 1

读取源.obj 文件。您的模型没有顶点法线。 MeshPhongMaterial 需要法线。

你可以让 Three.js 计算一些。在加载器回调函数中，添加:

if ( child.geometry ) child.geometry.computeVertexNormals();

注意:由于本例中的加载程序返回 BufferGeometry，因此此解决方法是正确的。如果您的加载程序返回 Geometry，那么您可能必须首先调用 geometry.computeFaceNormals()(如果它们也不存在)。

三.js r.73