如何在Three.js中加載.obj 3D模型？

下面是根據您的建議更新的代碼如何在Three.js中加載.obj 3D模型？

 
var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75,  window.innerWidth/window.innerHeight, 0.1, 1000); 
    var element = document.getElementById("container"); 

var renderer = new THREE.WebGLRenderer({ alpha: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
element.appendChild(renderer.domElement); 

var loader = new THREE.OBJLoader(); 
loader.load(

'3D Model/Tiend3D.obj', 

function (object) { 
    scene.add(object); 
}); 

function render() { 

    window.requestAnimationFrame(render); 
    renderer.render(scene, camera); 

} 

render();

這是我使用導入的3D模型的代碼，但它不是在所有的工作，我做了肯定的3D模型可以通過改變其中一個例子中3D模型的路徑來加載，這個模型的路徑是我的，並且加載得很好，我查看了那個例子的代碼，但是有很多我不熟悉的東西，所以我的問題加載.obj文件並將其添加到場景的正確方法是什麼？

來源

2016-09-20 Mostafa Mekawy

http://stackoverflow.com/a/35422599/1980846 – gaitat

在您的代碼中，只有在模型加載之前渲染場景一次。無需重新渲染，將事物添加到場景中將不會有任何可見的效果。

通常WebGL渲染是在requestAnimationFrame驅動循環中完成的，所以它會不斷運行以獲得不斷更新的視覺場景。

function render() { 

    window.requestAnimationFrame(render); 
    renderer.render(scene, camera); 

} 

render();

或者，如果你真的只想渲染對象加載後，多了一個框架，只是叫呈現在你的onLoad回調：

function (object) { 
    scene.add(object); 
    renderer.render(scene, camera); 
});

來源

2016-09-20 19:19:11

我修改了代碼，就像你建議通過刪除renderer.render並用渲染函數替換它，然後調用它，但沒有任何更改 –

你可以更新你的問題與最新的完整代碼？ –

除了渲染功能我改變了加載路徑 –

如果您確定您的OBJ有材料，你做了什麼@Andy雷告訴你（window.requestAnimationFrame(render)功能），那麼你可能需要燈光來實際看到的場景，把這個renderer聲明之後

var ambient = new THREE.AmbientLight(0x444444); 
scene.add(ambient); 

var directionalLight = new THREE.DirectionalLight(0xffeedd); 
directionalLight.position.set(0, 0, 1).normalize(); 
scene.add(directionalLight);

來源

2018-01-16 21:12:20 LuisEgan

如何在Three.js中加載.obj 3D模型？

回答

相關問題