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需要法线。

你可以有三个.js计算一些。在加载程序回调函数中，添加：

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

注意：因为在这种情况下加载器返回BufferGeometry，所以这种解决方法是正确的。如果您的加载程序返回Geometry，那么如果它们不存在，您可能必须先调用geometry.computeFaceNormals()。

three.js r.73

模型渲染使用MeshBasicMaterial但不使用MeshPhongMaterial

1 个答案: