模型使用MeshBasicMaterial呈現，但不是MeshPhongMaterial

我正在用three.js製作一個頁面。我有此代碼，它的工作原理：模型使用MeshBasicMaterial呈現，但不是MeshPhongMaterial

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，我看到的是一個黑色的屏幕，即使我的燈光似乎是爲了。我怎樣才能解決這個問題？

來源

2015-11-28 Ethan McTague

根據[此相關的問題（http://stackoverflow.com/questions/26937966/three-meshphongmaterial-not-working-giving-black-color）它應該工作只要有光 - 你有。 Javascript控制檯（F12）中是否有錯誤？ – Kenney

控制檯中沒有錯誤。（http://codepen.io/htmlguy/pen/RWzMYN） –

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

你可以讓three.js計算一些。在您的裝載機回調函數，添加：

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

注：因爲在這種情況下，裝載機返回BufferGeometry，這個解決辦法是正確的。如果您的裝載程序返回了Geometry，那麼您可能必須先撥打geometry.computeFaceNormals()，否則它們也不存在。

three.js所r.73

來源

2015-11-28 17:26:35 WestLangley

我剛剛發佈這個答案。這是一個可用的[codepen]（http://codepen.io/anon/pen/NGQqgJ）。 – Kenney

模型使用MeshBasicMaterial呈現，但不是MeshPhongMaterial

回答

相關問題