如何在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文件并将其添加到场景的正确方法是什么？

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); 
});

我修改了代码，就像你建议通过删除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);

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

相关推荐