GLTF loading but not appearing

Questions
,
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?

1 Like
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?

1 Like
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?

1 Like
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.

1 Like
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>
3 Likes
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.

3 Likes
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.

1 Like
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.

14

Thank you so much. I have been trying all day to get my first three.js model to display from a loader. And your code worked first time!

How can I animate the x & y rotation of the model?

15

thank YOU, man

16

I am having this problem and I have tried almost all the suggestions given. My code works for only one model which shows the model in my output. For all the other models it doesn’t show the model in the output. Looks a bit wiered but I will appreciate any help. Tried many values for the camera position.

<script src="js/three.js"></script>
<script type="module">
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-2, 2, 5);
scene.add(light);
}
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x00ffff);
document.body.appendChild( renderer.domElement );

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

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

});

camera.position.set( 0, 0,100 );


 function animate() {
	requestAnimationFrame( animate );
	//cube.rotation.y += 0.02;
	//controls.update();
	renderer.render( scene, camera );
}
animate();`Preformatted text`
17

Hi!

Where is the line scene.add(model); or scene.add(gltf.scene);?

18

Hi, you need to add the loaded model to the scene!

scene.add(model)