Threejs OBJLoader parse not rendering

Questions
1

trying threejs first time, So i am trying to load .obj files dynamically using input file type but i am seeing a black canvas every time i load the file via Loader.parse function. Although if i load file with Loader.load function by passing the url its working fine.

i am not sure i am missing anything


function init() {

    var objPreview = document.querySelector("#objPreview");
    scene = new THREE.Scene();



    camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
    camera.position.z = 250;
    // scene
    scene = new THREE.Scene();
    var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
    scene.add( ambientLight );
    // 
    var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
    camera.add( pointLight );
    scene.add( camera );


    var loader = new THREE.OBJLoader();
    var reader = new FileReader();
    var file = input.files[0];
    reader.readAsText(file);
    reader.addEventListener('load', function(event) {
            var contents = event.target.result;
            var object = loader.parse(contents);

        });
    // loader.load()
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(width, height);
    objPreview.appendChild(renderer.domElement);
    }

complete code can be found here

2

I’ve ported your code to a live example right here: https://jsfiddle.net/7q1582zx/3/

The problem was that your performed the rendering at the wrong time. As you can see in the fiddle, the code now calls render() only when the model was added to the scene. I have the following result with this OBJ asset from the official repository.

image

3

aah, thanks so much.