OBJ file not appearing in Browser WebGL Three.js

Question

I have an obj file that I would like to try and load using Three.js. I've been trying to get as much information on how to achieve this as possible from the web and my research has led me to utilizing the following script but all I am seeing is a black screen with no error messages in the console.

In fact the only output in the console is from the LoaderManager and it seems to be saying that the objects where successfully loaded. (See below:)

LoadingManager output:

THREE.WebGLRenderer 68 three.min.js:520
Loading: skin.jpg 1 2  app.html:42
Loading: ucd.obj 2 2   app.html:42

This is my app.html file:

            //Variables
            var container, stats;
            var camera, scene, renderer;
            var mouseX = 0, mouseY = 0;
            var windowHalfX = window.innerWidth/2;
            var windowHalfY = window.innerHeight/2;
            init();
            animate();

            //Initialisation
            function init(){
                container = document.createElement('div');
                document.body.appendChild(container);
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
                camera.position.z = 100;

                //scene
                scene = new THREE.Scene();

                //Light
                var ambient = new THREE.AmbientLight(0x101030);
                scene.add(ambient);

                var directionalLight = new THREE.DirectionalLight(0xffeedd);
                directionalLight.position.set(0,0,1);
                scene.add(directionalLight);

                //Texture
                var manager = new THREE.LoadingManager();
                manager.onProgress = function ( item, loaded, total ) {
                    console.log("Loading: " + item, loaded, total );
                };

                var texture = new THREE.Texture();
                var loader = new THREE.ImageLoader(manager);
                loader.load('skin.jpg', function(image){
                    texture.image = image;
                    texture.needsUpdate = true;
                });

                //Model
                var loader = new THREE.OBJLoader(manager);
                loader.load('ucd.obj', function(object){

                    object.traverse(function(child){
                            if(child instanceof THREE.Mesh){
                                child.material.map = texture;
                            }
                    }); 

                    object.position.y = -80;
                    scene.add(object);

                });

                //Renderer
                renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);


                //Event Listeners
                document.addEventListener('mousemove', onDocumentMouseMove, false);
                window.addEventListener('resize', onWindowResize, false);
            }

            function onWindowResize(){
                windowHalfX = window.innerWidth/2;
                windowHalfY = window.innerHeight/2;
                camera.aspect = window.innerWidth/window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }

            function onDocumentMouseMove(event){
                mouseX = (event.clientX - windowHalfX)/2;
                mouseY = (event.clientY - windowHalfY)/2;
            }

            //Animation
            function animate(){
                requestAnimationFrame(animate);
                render();
            }

            function render(){
                camera.position.x += (mouseX - camera.position.x) * .05;
                camera.position.y += (mouseY - camera.position.y) * .05;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
            }

Basically my problem is why isn't the above script outputting even the outline of my obj file to the window. I'd appreciate any help.

Answer 1

If your screen is black and you do not see your loaded model, there are several things you can try:

1. Move the position of the light. Sometimes the light ends up inside the model. Can use *LightHelper() to see where your light is.
2. Remove any texture assignments. Sometimes this is what is failing if texture is not loading properly.
3. If you have textures make sure the model has texture (UV) coordinates.
4. Scale the model down. It might be too big and the camera is inside it.
5. Move the camera. Usually it suffices to do so in one axis only (pick the z-axis).
6. Compute the bounding box of the loaded model (geometry.computeBoundingBox() or THREE.BoundingBoxHelper()) and try to figure out if it is off the screen (usually when its center is not at 0,0,0)

Answer 2

How big is your .obj model? If the file size is too large, it will not load in the browser. You can try using meshlab (http://meshlab.sourceforge.net/) to reduce your model's file size. There is a good tutorial on how to do this at shapeway's website (http://www.shapeways.com/tutorials/polygon_reduction_with_meshlab).