using three.js JSONLoader

问题:

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

回答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.

回答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.

回答3:

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