Examples: Added basic example for AnimationObjectGroup

Mugen87 · Nov 10, 2017 · 38fbd98 · 38fbd98
1 parent ae497bf
commit 38fbd98
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 0 deletions.
diff --git a/examples/files.js b/examples/files.js
@@ -315,6 +315,7 @@ var files = {
 	],
 	"misc": [
 		"misc_animation_authoring",
+		"misc_animation_groups",
 		"misc_animation_keys",
 		"misc_controls_deviceorientation",
 		"misc_controls_fly",

diff --git a/examples/misc_animation_groups.html b/examples/misc_animation_groups.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - animation - groups</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				color: #fff;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+				color: #f00;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - groups
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var stats, clock;
+			var scene, camera, renderer, mixer;
+
+			init();
+			animate();
+
+			function init() {
+
+				scene = new THREE.Scene();
+
+				var container = document.getElementById( 'container' );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 50, 50, 100 );
+				camera.lookAt( scene.position );
+
+				// all objects of this animation group share a common animation state
+
+				var animationGroup = new THREE.AnimationObjectGroup();
+
+				//
+
+				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
+				var material = new THREE.MeshBasicMaterial( { transparent: true } );
+
+				//
+
+				for ( var i = 0; i < 5; i ++ ) {
+
+					for ( var j = 0; j < 5; j ++ ) {
+
+						var mesh = new THREE.Mesh( geometry, material );
+
+						mesh.position.x = 32 - ( 16 * i );
+						mesh.position.y = 0;
+						mesh.position.z = 32 - ( 16 * j );
+
+						scene.add( mesh );
+						animationGroup.add( mesh );
+
+					}
+
+				}
+
+				// create some keyframe tracks
+
+				var xAxis = new THREE.Vector3( 1, 0, 0 );
+				var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
+				var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
+				var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
+
+				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
+				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+
+				// create clip
+
+				var clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
+
+				// apply the animation group to the mixer as the root object
+
+				mixer = new THREE.AnimationMixer( animationGroup );
+
+				var clipAction = mixer.clipAction( clip );
+				clipAction.play();
+
+				//
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				//
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				//
+
+				clock = new THREE.Clock();
+
+				//
+
+				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 );
+
+				render();
+
+			}
+
+			function render() {
+
+				var delta = clock.getDelta();
+
+				if ( mixer ) {
+
+					mixer.update( delta );
+
+				}
+
+				renderer.render( scene, camera );
+
+				stats.update();
+
+			}
+
+		</script>
+
+	</body>
+</html>