only part of gltf model appearing using three.js

I have been trying to add this gltf model ( https://poly.google.com/view/28RBIWE8jzc ) using threeJS’. The code below is the only way that I have been able to see anything and I only see a small part of the object. If anyone knows what needs to be changed I would appreciate some help.

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;

init();
animate();

function init() {

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

scene = new THREE.Scene();

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

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

scene.background = new Color('blue')

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

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 );
document.body.addEventListener( 'keydown', onKeyDown, false );

}

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

}

function onKeyDown(){
  console.log("press")
  switch( event.keyCode ) {
     case 83: // w
     camera.position.z += 5;
     break;
     case 87: // s
     camera.position.z -= 5;
     break;
     case 40: // down
     camera.position.y -= 5;
     break;
     case 38: // up
     camera.position.y += 5;
     break;
  }
}

Answer

The baseball asset is quite large so I suggest you change your camera configuration. Try it with:

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 150, 350 );

Alternatively, you could also consider to scale down the baseball after the loading process. Try it with:

gltf.scene.scale.setScalar( 0.01 );

Advertisement

Answer