首页 文章

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

提问于
浏览 次
1

这是基于您的建议的更新代码

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

javascript three.js .obj

2 回答

  • 0

    在您的代码中，您只能在加载模型之前渲染场景一次 . 如果不重新渲染，向场景添加内容将不会产生任何可见效果 .

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

    function render() {

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

}

render();

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

    function ( object ) {
    scene.add( object );
    renderer.render( scene, camera );
});
    回复于
  • 1

    如果你确定你的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 );
    回复于

相关问题