three.js/examples/misc_animation_keys.html at r159 · mrdoob/three.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - animation - basic</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - basic use
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from 'three/addons/libs/stats.module.js';

			let stats, clock;
			let scene, camera, renderer, mixer;

			init();
			animate();

			function init() {

				scene = new THREE.Scene();

				//

				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 25, 25, 50 );
				camera.lookAt( scene.position );

				//

				const axesHelper = new THREE.AxesHelper( 10 );
				scene.add( axesHelper );

				//

				const geometry = new THREE.BoxGeometry( 5, 5, 5 );
				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
				const mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );

				// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
				// Note: the keyframe track type should correspond to the type of the property being animated

				// POSITION
				const positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );

				// SCALE
				const scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );

				// ROTATION
				// Rotation should be performed using quaternions, using a THREE.QuaternionKeyframeTrack
				// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

				// set up rotation about x axis
				const xAxis = new THREE.Vector3( 1, 0, 0 );

				const qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
				const qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
				const 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 ] );

				// COLOR
				const colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );

				// OPACITY
				const opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

				// create an animation sequence with the tracks
				// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
				const clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );

				// setup the THREE.AnimationMixer
				mixer = new THREE.AnimationMixer( mesh );

				// create a ClipAction and set it to play
				const clipAction = mixer.clipAction( clip );
				clipAction.play();

				//

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

				//

				stats = new Stats();
				document.body.appendChild( stats.dom );

				//

				clock = new THREE.Clock();

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

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

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

			}

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {

				const delta = clock.getDelta();

				if ( mixer ) {

					mixer.update( delta );

				}

				renderer.render( scene, camera );

				stats.update();

			}

		</script>

	</body>
</html>