Assigning loaded gltf geometry to a variable for animation

Questions
,
1

Hi guys,

I am a total noob with threejs, and I’m trying to animate a model that I’ve loaded using the gltf loader, but the animations have to happen with math so that they are not constantly looping. So I can’t use keyframes.

Here’s the snippet:

//Letter P

		var letterp = new THREE.Object3D;
		
		loader.load( 'models/shop_title/p.glb', function ( gltf ) 
		{
			var model = gltf.scene;
			model.position.set( 0, 0, 0 );
			model.scale.set( 1, 1, 1 );
			model.traverse( function ( child ) 
			{

				if ( child.isMesh ) child.material.envMap = envMap;
								
				

			} );

			gltf.scene.traverse( function( object ) {

			if ( object.isMesh) objects.push( object );

			} );
			
			scene.add( model );
			
			letterp = gltf.scene.children[0];

		}, undefined, function ( e ) 
			{

			console.error( e );

			});

Basically what I’m trying to achieve is to “select” the geometry that is loaded, and assign that to a variable that I can use to animate the letters in the update function, something like letterp.rotation.y += 1; It’s just slight rotations needed here, nothing real fancy. The code doesn’t give me any errors, but it also doesn’t work. I’ve attached the html file with all the code and I’m totally lost here, any help would be greatly appreciated. Thanks :slight_smile:

home_linking.html (9.4 KB)

2

Can you please share p.glb, too?

BTW: Why do you traverse through gltf.scene two times? You can do both operations (applying an envMap and pushing a mesh to objects) in one go.

3

Honestly, I didn’t know that you could push the mesh to objects and apply the environment map in one go :sweat_smile: Thanks for the tip :slight_smile: I have attached p.glb. The actual model is a word that reads “shop”, but I have separated it into separate model files because I thought it would be easier to manipulate each individual letter if they are separate files. The models were created using 3DS Max, and exported using the Babylon exporter plugin. Thank you for your help, I sincerely appreciate itp.glb (3.2 MB)

4

Actually it’s better to put everything in a single file. Just ensure in 3DS Max that each letter is a separate object. I’m not sure if the Babylon exporter plugin supports it but the idea is to assign a unique name to each letter in 3DS Max. When exporting, the names should be respected in the glTF asset. You can then use Object3D.getObjectByName() to select the individual meshes from gltf.scene.

Anyway when loading p.glb, you only have to ensure that the model variable is declared in module or global scope. It should be at least accessible for your animation loop. You can then use the following approach to animate the letter:

function animate() {

    requestAnimationFrame( animate );

    if ( model ) model.rotation.y += 0.01;

    renderer.render( scene, camera );

}
5

Fixed. :slight_smile: You’re a genius bro. Thank you very very much for you help!

1 Like