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

【问题标题】：How to load .obj 3D model in Three.js?如何在 Three.js 中加载 .obj 3D 模型？
【发布时间】：2017-01-28 19:31:04
【问题描述】：

这是根据您的建议更新的代码

var 场景 = 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 文件并将其添加到场景的正确方法是什么。

【问题讨论】：

stackoverflow.com/a/35422599/1980846

标签： javascript three.js .obj

【解决方案1】：

在您的代码中，您只需在加载模型之前渲染一次场景。如果不重新渲染，向场景中添加东西不会有任何可见的效果。

通常 WebGL 渲染是在 requestAnimationFrame 驱动循环中完成的，因此它会不断运行以获得不断更新的视觉场景。

function render() {

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

}

render();

或者，如果您真的只想在加载对象后再渲染一帧，只需在您的 onLoad 回调中调用 render：

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

【讨论】：

我按照您的建议修改了代码，删除了 renderer.render 并将其替换为 render 函数，然后调用它，但没有任何改变
你能用最新的完整代码更新你的问题吗？
除了渲染功能我改变了加载路径
我想也许 3D 模型在那里，但它不在视口中
您的相机可能只是在对象内部。尝试移动相机位置

【解决方案2】：

如果您确定您的 obj 有材质并且您按照 @Andy Ray 告诉您的操作（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 );

【讨论】：