GLTF loading but not appearing

gltf-format
gltf-loader

#1

I’m new to threeJS, and I’m trying to import a GLTF file using the boilerplate from the three.js website. The console says GLTFLoader: 37.4208984375ms, but I’m not seeing anything. Code below. What’s going wrong here?

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.z = 1;

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

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

}

function animate() {

renderer.render( scene, camera );

}

I wish there was a simple example of a GLFT import somewhere. Does anyone know of one?


#2

Can you test your file here?

https://gltf-viewer.donmccurdy.com/

Also, these lines are not needed:

gltf.animations; // Array<THREE.AnimationClip>
gltf.scene;      // THREE.Scene
gltf.scenes;     // Array<THREE.Scene>
gltf.cameras;    // Array<THREE.Camera>

Can you share the model here if you still can’t get it to work?


#3

This is file I’m using now, it’s a stock model: https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/AnimatedTriangle/glTF-Embedded/AnimatedTriangle.gltf

I downloaded it and tested it in that viewer, and it looks fine there. Do I maybe need to move the camera position? Is there a conflict between the camera position and the model position?


#4

Is there a conflict between the camera position and the model position?

Well ‘conflict’ is not the right word, but yes, the most likely scenario here, if you are not getting any console messages, is that the camera is just not pointing at the object, or the camera.far is too close.


#5

Hi philjms,

You can try it with this Example

 <!DOCTYPE html>
 <html>
    <head>		
        <title>____________glTF2_Loader_________</title>
        <style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% }
      </style>
  </head>
    <body>
        <script src="three/build/three.js"></script>
	<script src="three/js/controls/OrbitControls.js"></script>
	<script src="three/js/loaders/GLTF2Loader.js"></script>
	
<script>		

 // Load 3D Scene
var scene = new THREE.Scene(); 

 // Load Camera Perspektive
var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 1, 1, 20 );
	
 // Load a Renderer
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setClearColor( 0xC5C5C3 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
	
 // Load the Orbitcontroller
var controls = new THREE.OrbitControls( camera, renderer.domElement ); 
			
 // Load Light
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );
			
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );				

 // glTf 2.0 Loader
var loader = new THREE.GLTF2Loader();				
	loader.load( './three/models/Test/Box.gltf', function ( gltf ) {              <<--------- Model Path
	var object = gltf.scene;				
	gltf.scene.scale.set( 2, 2, 2 );			   
	gltf.scene.position.x = 0;				    //Position (x = right+ left-) 
        gltf.scene.position.y = 0;				    //Position (y = up+, down-)
	gltf.scene.position.z = 0;				    //Position (z = front +, back-)
	
	scene.add( gltf.scene );
	});	 

function animate() {
	render();
	requestAnimationFrame( animate );
	}

function render() {
	renderer.render( scene, camera );
	}

render();
animate();

</script>	
</body>
</html>

#6

Thanks Tom! The model shows up great. Now how can I run its animation? I tried gltf.animations[0].play() but I got any error message saying that there is no such play method on that object.


#7

You are welcome, you’ll need an animated one. In your Cube is no animation inclouded.


#8

I replaced the cube with an animated triangle. Do you know the easiest way to start the animation?


#9

This can be very different, depending on what you use. Consider this for an overview:
https://threejs.org/docs/#manual/introduction/Animation-system


#10

GLTFLoader uses the default three.js animation system (COLLADA, notably, does not). So with glTF 2.0, you can play your animations like this:

let mixer;
const loader = new THREE.GLTFLoader();
loader.load( 'model.gltf', ( gltf ) => {

  const model = gltf.scene;
  mixer = new THREE.AnimationMixer( model );
  gltf.animations.forEach(( clip ) => {
    mixer.clipAction(clip).play();
  });

});

Finally, call mixer.update(deltaTimeInSeconds) before each frame.


#11

I’m having the same issue here

i’m pretty sure it’s not related to the positioning issue, my far is 10000, my minPolarAngle is 0 and my maxPolarAngle is Math.PI so I’m able to look all around the scene.

Of-course the link isn’t minified and you have a console.log for:
start loading Gltf . .
and
Gltf loaded successfully . . .

Can anyone help me understand what’s causing this issue?

Thank you.


#12

Of-course the link isn’t minified and you have a console.log …

@ranbuch your code is obfuscated by Webpack, can you post it somewhere we can read it? Easier for others to help you debug that way. If you’re just trying to load a model and rotate it with the mouse, see the example here.


#13

Thank you for your answer.

I’ve used this repository to start my three-js project with ES6 so it’s obfuscated.

Any way I’ve given up on trying to combine TypeScript and ES-NEXT with three-js for now.

You example works great for me.

Thank you again.