using three.js JSONLoader

Question

Just can't see models imported into three.js scene. The geometry looks fine but the model isn't displaying no matter what material I apply to it.

I'm new to WebGL so it's hard for me to diagnose, but my guess is that something is going wrong during the JSONLoader callback.

Thanks for all help.

var camera, scene, renderer, mesh, loader;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();

    loader = new THREE.JSONLoader();

    loader.load( "scripts/model.js", function( geometry ) {
        mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
        mesh.scale.set( 10, 10, 10 );
        mesh.position.y = 150;
        mesh.position.x = 0;
    } );

    scene.add( mesh );

    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);

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

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.05;

    renderer.render( scene, camera );
}

Answer 1

You are adding the mesh to the scene before the model finishes loading.

Move the line

scene.add( mesh );

into the loader callback function.

Answer 2

thought this might help anyone who searches for a more accurate answer :

loader.onLoadComplete=function(){scene.add( mesh )} 

also for complete Loader refrence , please refer to here :

https://threejs.org/docs/index.html#api/loaders/Loader

hope this helps.

Answer 3

animate() should also be in the callback function, to remove console errors.