How to load .obj 3D model in Three.js?

Question

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.

stackoverflow.com/a/35422599/1980846

gaitat
– gaitat

2016-09-20 19:17:09 +00:00
Commented Sep 20, 2016 at 19:17 — gaitat
– gaitat, Commented Sep 20, 2016 at 19:17

Andy Ray · Accepted Answer · 2016-09-20 19:19:11Z

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

answered Sep 20, 2016 at 19:19

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mostafa Mekawy Over a year ago

i modified the code like you suggested by removing the renderer.render and replacing it with the render function and then calling it but nothing changed

Andy Ray Over a year ago

Can you update your question with the newest complete code?

Mostafa Mekawy Over a year ago

other than the render function i changed the load path

Mostafa Mekawy Over a year ago

i think maybe the 3D model is there but it is not in the viewport

Andy Ray Over a year ago

your camera might just be inside the object. try moving the camera position

LuisEgan · Accepted Answer · 2018-01-16 21:12:20Z

1

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

answered Jan 16, 2018 at 21:12

LuisEgan

1,0542 gold badges14 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to load .obj 3D model in Three.js?

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related