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.

Solution

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

Comments

[Mostafa Mekawy]

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]

Can you update your question with the newest complete code?

[Mostafa Mekawy]

other than the render function i changed the load path

[Mostafa Mekawy]

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

[Andy Ray]

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