Only part of gltf scene displayed

I have been trying to add this ( object with little luck. I must be doing something wrong but I cant figure out what. Any help would be appreciated.

When I use this code I can view a small amount, but just a small piece.

import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
//import OrbitControls from 'three/examples/jsm/controls/OrbitControls.js'
import { Color } from 'three';

var camera, scene, renderer;


function init() {

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

scene = new THREE.Scene();

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

// Load a glTF resource
loader.loadAsync( 'styles/baseball/Baseball.gltf', function ( gltf ) {
    scene.add( gltf.scene );
} );

scene.background = new Color('blue')

var light = new THREE.AmbientLight(0x404040);

const light2 = new THREE.PointLight( 0xff0000, 1, 100 );
light2.position.set( 50, 50, 50 );
scene.add( light2 );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.addEventListener( 'keydown', onKeyDown, false );


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


function onKeyDown(){
  switch( event.keyCode ) {
     case 83: // up
     camera.position.z += 5;
     case 87: // down
     camera.position.z -= 5;
     case 40: // down
     camera.position.y -= 5;
     case 38: // down
     camera.position.y += 5;

Can you please share a codepen / jsfiddle / screenshot that shows what you mean by a “small piece” ?

The code looks correct - and seems to be, if the model is actually loading - the problem may be with the camera. Position (0, 10, 20) is quite far away from the centre of the scene - if the object has a size of around 1 x 1 x 1, it will be barely visible.

Try placing the camera closer to the centre of the scene and use camera.lookAt(gltf.scene) to point it towards the model.

Ok so this is kind of weird. Yesterday I was able to see a little bit of the object. However, when I tried this morning it has disappeared and is throwing an error in console “THREE.Object3D.add: object not an instance of THREE.Object3D. undefined”.

I’ve answered your question at stackoverflow:



And regarding:

You’re probably adding the model before it is loaded or have a typo somewhere (ie. you’re trying to do scene.add(undefined).) Make sure your model (or gltf.scene) is defined before you add it.

That is what I was thinking I did too, but when I zoomed out like @Mugen87 had suggested, all problems were fixed. Thank you for your help. I appreciate it.