CODEWITHSUNDEEP
three.js
ΓΓIICK
ΓΓIICK

Reputation: 195

ThreeJS - GLTF loaded but not appearing

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?

Upvotes: 1

Views: 3482

Answers (1)

Andy Ray
Andy Ray

Reputation: 32046

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.

Upvotes: 1

Related Questions