I really cannot find a good example or explanation to how to get animations working

Questions
,
1

Is there anybody that would like to help me with this?

I cannot find a full expample, tutorial or explanation on how to get animations working.
I have tried some stuff and I will try to put a .zip of my project here. I think I have a missing link between the clock and the animations.

How to proceed?

thanks so much in advance!

2

100 ppl world.zip (452.0 KB)

This is my project

3

Try it with this updated app.js code:

var camera, scene, renderer, clock, mixer;

init();
animate();

function init() {

	/* Scene */
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x999999 );

	/* Clock */

	clock = new THREE.Clock();

	/* Light */
	var light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0.5, 1.0, 0.5 ).normalize();
	scene.add( light );

	/* Camera */
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 500 );
	camera.position.x = 10;
	camera.position.y = 6;
	camera.position.z = 17;
	scene.add( camera );

	// /* Grid */
	// var grid = new THREE.GridHelper( 20, 20, 0xffffff, 0x555555 );
	// scene.add( grid );

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

	/* Loader */
	var loader = new THREE.GLTFLoader();
	loader.load( 'models/stonehenge.glb', function ( gltf ) {

		gltf.scene.position.y = 0;
		scene.add( gltf.scene );

	} );

	/* Second Loader */
	const loader1 = new THREE.GLTFLoader();
	loader1.load( 'models/falling_block_animation.glb', function ( gltf ) {

		const model = gltf.scene;
		scene.add( model );

		mixer = new THREE.AnimationMixer( model );
		gltf.animations.forEach( ( clip ) => {

			mixer.clipAction( clip ).play();

		} );

	} );

	/* Controls */
	var controls = new THREE.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 );

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

	render();

}

function render() {

	renderer.render( scene, camera );

}

You definitely need an animation loop when having animated objects in the scene. I removed the previously implemented on-demand rendering to make things work.

BTW: The official animation example should contain everything what you need. Besides, the documentation about the animation system is actually quite extensive.

https://threejs.org/examples/?q=animation
https://threejs.org/docs/index.html#manual/en/introduction/Animation-system

1 Like
4

This works awesome!

I might just be lost in all the documentation from staring at my screen for to long. Im going to try to learn as much as possible from you example and find some more bits and pieces in the documentation so that I know what im doing in the future!

Thanks for your time!

UPDATE: I Also just found out that you can view the source code of the example animations :sweat_smile:

1 Like