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

Question

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

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

Answer 1

在您的代码中，您只渲染场景一次，即在加载模型之前。如果不重新渲染，将事物添加到场景不会有任何可见的效果。

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

function render() {

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

}

render();

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

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