ThreeJS - GLTF loaded but not appearing

Question

I loaded a GLTF in ThreeJS, and I see in the console GLTFLoader: 37.4208984375ms, but it's not showing up in the scene, and I don't understand why. Also, I used some boilerplate from the ThreeJS website. Here's what the code looks like:

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.set(20,0,20);

scene = new THREE.Scene();

// Instantiate a loader
var loader = new THREE.GLTFLoader();

// Load a glTF resource
loader.load( 'Box.gltf', function ( gltf ) {
    scene.add( gltf.scene );
    gltf.animations; // Array<THREE.AnimationClip>
    gltf.scene;      // THREE.Scene
    gltf.scenes;     // Array<THREE.Scene>
    gltf.cameras;    // Array<THREE.Camera>
} );

var light = new THREE.AmbientLight(0xffffff);
scene.add(light);

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

}

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );

}

So what am I doing wrong here? Am I missing something?

you probably need a light source. or how big is the model? you are setting the camera far clipping plane to 10. or do you know that the model is centered around (0,0,0)? — gaitat
@gaitat I added a light (see above), but that didn't help. I fiddled with the clipping plane value, and that didn't help either. I console logged gtlf.scene and the coordinates are 0,0,0 and visible is set to true. Very confusing. — ΓΓIICK
yeah, since you're 20 units to the right on the X axis chances are you're not looking at your model. Try setting your camera in the positive Z axis with X and Y set at 0 - you should be starting directly at your model. It's also very useful to throw in OrbitControls or Pointerlock controls for debugging purposes, even if you're not planning on using them in the final scene. — AquaVitae

Andy Ray Andy Ray · Accepted Answer · 2017-09-26T01:45:26

Two problems:

Your camera is inside your model. Move it farther away.

You call render() only once, long before your model is added to the scene. Call render in a requestAnimationFrame, which is in every Three.js example.

ThreeJS - GLTF loaded but not appearing

1 Answers