javascript - How to load .obj 3D model in Three.js? - Stack Overflow

admin管理员组

文章数量:1289529

Here's the updated code based on your suggestion

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

This is the code I am using to import the 3D model but it isn't working at all and I've made sure that the 3D model is loadable by changing the path for the 3D model in one of the examples by the path for mine and it was loaded fine and I looked at the code for that example but there a lot of things I am not familiar with so my question is what is the proper way to load the .obj file and add it to scene.

Here's the updated code based on your suggestion

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

This is the code I am using to import the 3D model but it isn't working at all and I've made sure that the 3D model is loadable by changing the path for the 3D model in one of the examples by the path for mine and it was loaded fine and I looked at the code for that example but there a lot of things I am not familiar with so my question is what is the proper way to load the .obj file and add it to scene.

• javascript
• three.js
• .obj

Share Improve this question Follow edited Sep 20, 2016 at 20:49 Mostafa Mekawy asked Sep 20, 2016 at 18:39 Mostafa MekawyMostafa Mekawy 8511 gold badge11 silver badge44 bronze badges 1

• stackoverflow./a/35422599/1980846 – gaitat Commented Sep 20, 2016 at 19:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

In your code you only render your scene once, before the model is loaded. Adding things to a scene won't have any visible effect without re-rendering.

Normally WebGL rendering is done in a requestAnimationFrame driven loop, so it runs constantly to get a constantly updating visual scene.

function render() {

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

}

render();

Alternately, if you really only want to render one more frame after the object is loaded, just call render in your onLoad callback:

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

If you are sure your obj has materials and you did what @Andy Ray told you (the window.requestAnimationFrame( render ) function) then you might need lights to actually see the scene, put this after the renderer declaration

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

本文标签： javascriptHow to load obj 3D model in ThreejsStack Overflow