# Threejs OBJLoader parse not rendering

**URL:** <https://discourse.threejs.org/t/threejs-objloader-parse-not-rendering/6692>\
**Category:** Questions\
**Tags:** obj-loader\
**Created:** [March 22, 2019, 3:04pm UTC](https://discourse.threejs.org/t/threejs-objloader-parse-not-rendering/6692 "2019-03-22T15:04:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![iamaamir](https://avatars.discourse-cdn.com/v4/letter/i/4491bb/32.png) [@iamaamir](https://discourse.threejs.org/u/iamaamir)\
**Post date:** [March 22, 2019, 3:04pm UTC](https://discourse.threejs.org/t/threejs-objloader-parse-not-rendering/6692/1 "2019-03-22T15:04:33Z")

</div>

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

```javascript

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](https://pastebin.com/0pirpJr1)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 22, 2019, 3:59pm UTC](https://discourse.threejs.org/t/threejs-objloader-parse-not-rendering/6692/2 "2019-03-22T15:59:37Z")

</div>

I’ve ported your code to a live example right here: [https://jsfiddle.net/7q1582zx/3/](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](https://github.com/mrdoob/three.js/blob/dev/examples/models/obj/tree.obj) from the official repository.

![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/dd72bff1df69c4bb9628a4b403d7cff465764b48.png)

---

<div class="post-metadata">

**Author:** ![iamaamir](https://avatars.discourse-cdn.com/v4/letter/i/4491bb/32.png) [@iamaamir](https://discourse.threejs.org/u/iamaamir)\
**Post date:** [March 22, 2019, 6:24pm UTC](https://discourse.threejs.org/t/threejs-objloader-parse-not-rendering/6692/3 "2019-03-22T18:24:44Z")

</div>

aah, thanks so much.