模型使用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更改為MeshBasicMaterial ，即使照明似乎是MeshPhongMaterial ，我看到的只是一個黑屏。 我怎樣才能解決這個問題？

Answer 1

閱讀您的源.obj文件。 您的模型沒有頂點法線。 MeshPhongMaterial需要法線。

您可以讓three.js計算一些內容。 在您的加載程序回調函數中，添加：

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

注意：因為在這種情況下加載程序返回BufferGeometry ，所以此解決方法是正確的。 如果加載程序返回了Geometry ，那么如果它們都不存在，則可能必須首先調用geometry.computeFaceNormals() 。

three.js r.73