Gbl animation doesn't work

Questions
,
1

I’m developing a Project and I’m having trouble executing an animation, in case I don’t want to execute all the animations of the model, only one with the name ‘A’, could help me

in https://gltf-viewer.donmccurdy.com/ finds normally

image
image771×547 81.1 KB

My GLB https://drive.google.com/drive/folders/1Gr7-RorVw-N__jTwXQt-exAgA_a5kbcR?usp=sharing

My Code

function init() {
		let camera, scene, renderer;
	camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,20000);
	  camera.position.z = 27; 
	  camera.position.x = 0;
	  camera.position.y = 10;

	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xffffff);
	const loader = new THREE.TextureLoader();
	//loader.load('stars.jpg' , function(texture)
	//			{
	//			 scene.background = texture;  
	//			});
	
	const loadingManager = new THREE.LoadingManager( () => {
	
		const loadingScreen = document.getElementById( 'loading-screen' );
		loadingScreen.classList.add( 'fade-out' );
		
		// optional: remove loader from DOM via event listener
		loadingScreen.addEventListener( 'transitionend', onTransitionEnd );
		
	} );

	// gltf
		var loader, keyMixer, capMixer, keyRotation, keyRise, capRise;var loader, keyMixer, capMixer, animacao, keyRise, capRise;
		const gltfLoader = new THREE.GLTFLoader(loadingManager);
  		gltfLoader.load('bone10t.glb', function (glb)  {

		//var cap = glb.scene.getObjectByName("couvercle");
		var key  = glb.scene.getObjectByName("Ani");

		  var animations = glb.animations;

		  var keyRotationClip  = THREE.AnimationClip.findByName( animations, 'A' )

		//capMixer = new THREE.AnimationMixer(cap);
		keyMixer = new THREE.AnimationMixer(key);

		keyRotation = keyMixer.clipAction(keyRotationClip);
		
		
			var group = new THREE.Group();
			group.add( boneca);
			scene.add(group);
			group.position.z += 0.8;


		var mixer = new THREE.AnimationMixer( gltf.scene );
		var clip = gltf.animations[ 0 ];
		var action = mixer.clipAction( clip );

		action.clampWhenFinished = true;
		action.loop = THREE.LoopOnce;
		//keyRise.loop = THREE.LoopOnce;
		keyRise.play();
		action.play();




					 gltf.scene.scale.set( 1, 0.4, 2 );            

    gltf.scene.position.x = 0;                  //Position (x = right+ left-) 
    gltf.scene.position.y = -5;                 //Position (y = up+, down-)
    gltf.scene.position.Z = 5;                  //Position (z = front +, back-)
    gltf.scene.rotation.y = 90;    

					
  });

  // Galaxy
let galaxyGeometry = new THREE.SphereGeometry(1000,32,32);
let galaxyMaterial = new THREE.MeshBasicMaterial({
  side: THREE.BackSide
});
let galaxy = new THREE.Mesh(galaxyGeometry, galaxyMaterial);

// Load Galaxy Textures
loader.crossOrigin = true;
loader.load(
  'stars.jpg',
  function(texture) {
    galaxyMaterial.map = texture;
    scene.add(galaxy);
  }
);

  let hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
  hemiLight.position.set(0, 50, 0);
  // Add hemisphere light to scene
  scene.add(hemiLight);
  
  let d = 8.25;
  let dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
  dirLight.position.set(-8, 12, 8);
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  dirLight.shadow.camera.near = 0.1;
  dirLight.shadow.camera.far = 1500;
  dirLight.shadow.camera.left = d * -1;
  dirLight.shadow.camera.right = d;
  dirLight.shadow.camera.top = d;
  dirLight.shadow.camera.bottom = d * -1;
  // Add directional Light to scene
  scene.add(dirLight);

	//

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


	
		var clock = new THREE.Clock();
		clock.start();
		var mixer;
	//

	const controls = new THREE.OrbitControls( camera, renderer.domElement );
	
	controls.update();

	//

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}



function render() {

	
	renderer.render( scene, camera );

}

function onTransitionEnd( event ) {

	event.target.remove();
	
}

	function loop() {
		requestAnimationFrame(loop);

		stats.update();

		if (keyMixer && clock) {
			var t = clock.getDelta();
			keyMixer.update(t);
		};
		loop();
init();
2

I’ve cleaned up your code a bit and made the animation work:

import * as THREE from '../build/three.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

let camera, scene, renderer;

var mixer, clock;

function init() {

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
	camera.position.z = - 30;

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xffffff );

	const gltfLoader = new GLTFLoader();
	gltfLoader.load( './models/gltf/bone10t.glb', function ( gltf ) {

		scene.add( gltf.scene );

		var animations = gltf.animations;
		var keyRotationClip = THREE.AnimationClip.findByName( animations, 'A' );

		mixer = new THREE.AnimationMixer( gltf.scene );
		var action = mixer.clipAction( keyRotationClip );

		action.clampWhenFinished = true;
		action.loop = THREE.LoopOnce;
		action.play();

		// center model

		const object = gltf.scene;

		const box = new THREE.Box3().setFromObject( object );
		const center = box.getCenter( new THREE.Vector3() );

		object.position.x += ( object.position.x - center.x );
		object.position.y += ( object.position.y - center.y );
		object.position.z += ( object.position.z - center.z );

		// disable view frustum culling

		object.traverse( function ( child ) {

			child.frustumCulled = false;

		} );

	} );

	let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.61 );
	hemiLight.position.set( 0, 50, 0 );
	scene.add( hemiLight );

	let d = 8.25;
	let dirLight = new THREE.DirectionalLight( 0xffffff, 0.54 );
	dirLight.position.set( - 8, 12, 8 );
	dirLight.shadow.mapSize = new THREE.Vector2( 1024, 1024 );
	dirLight.shadow.camera.near = 0.1;
	dirLight.shadow.camera.far = 1500;
	dirLight.shadow.camera.left = d * - 1;
	dirLight.shadow.camera.right = d;
	dirLight.shadow.camera.top = d;
	dirLight.shadow.camera.bottom = d * - 1;
	scene.add( dirLight );

	//

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

	clock = new THREE.Clock();

	//

	const controls = new OrbitControls( camera, renderer.domElement );

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	requestAnimationFrame( animate );

	if ( mixer ) {

		var delta = clock.getDelta();
		mixer.update( delta );

	}

	renderer.render( scene, camera );

}

init();
animate();

Notice how the model is centered in the onLoad() callback so it’s easier to view it with the camera. Besides, I’ve disabled view frustum culling for your model since bounding volumes are not properly computed for skinned meshes yet. If you don’t disable view frustum culling, certain parts of your model will disappear when zooming in.

1 Like
3

Mugen87
Thank you very much, you got it right

4

Mugen87
could you help me with another question please

https://discourse.threejs.org/t/distortion-when-playing-animations-in-a-row/17029