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.

Answer 1

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

Answer 2

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