使用 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()（如果它们也不存在）。

three.js r.73