How to use the QuaternionKeyframeTrack function from three
Find comprehensive JavaScript three.QuaternionKeyframeTrack code examples handpicked from public code repositorys.
three.QuaternionKeyframeTrack is a class in the Three.js library that represents a keyframe track for animating the rotation of an object using quaternions.
2582 2583 2584 2585 2586 2587 2588 2589 2590 2591case PATH_PROPERTIES.weights: TypedKeyframeTrack = THREE.NumberKeyframeTrack; break; case PATH_PROPERTIES.rotation: TypedKeyframeTrack = THREE.QuaternionKeyframeTrack; break; case PATH_PROPERTIES.position: case PATH_PROPERTIES.scale:
3
7
8+ 14 other calls in file
2212 2213 2214 2215 2216 2217 2218 2219 2220 2221switch (PATH_PROPERTIES[target.path]) { case PATH_PROPERTIES.weights: TypedKeyframeTrack = three.NumberKeyframeTrack; break; case PATH_PROPERTIES.rotation: TypedKeyframeTrack = three.QuaternionKeyframeTrack; break; case PATH_PROPERTIES.translation: case PATH_PROPERTIES.scale: default:
270How does three.QuaternionKeyframeTrack work?
Sure! three.QuaternionKeyframeTrack is a class in the Three.js library that represents a keyframe track for animating the rotation of an object using quaternions. To use three.QuaternionKeyframeTrack, you first create an instance of the class by passing in the name of the object property to animate (e.g. "rotation"), an array of keyframe times (in seconds), and an array of quaternion values. Each quaternion value represents the rotation of the object at a particular keyframe time. You can then create a three.AnimationClip object using the keyframe track, which can be played back using a three.AnimationMixer object. The AnimationMixer applies the keyframe track to the object over time, smoothly interpolating between keyframe values to produce a smooth animation. In addition to rotation, three.QuaternionKeyframeTrack can be used to animate other properties that can be represented as quaternions, such as the orientation of a camera or the orientation of a physics object. One advantage of using quaternions for rotation is that they avoid the problem of gimbal lock, which can occur when using Euler angles to represent rotation. Gimbal lock occurs when two axes of rotation become aligned, resulting in a loss of one degree of freedom and unpredictable rotation behavior. Quaternions avoid this problem by representing rotation as a single entity rather than a sequence of rotations around different axes. three.QuaternionKeyframeTrack is just one of several types of keyframe tracks available in Three.js. Other keyframe track classes include three.VectorKeyframeTrack, three.NumberKeyframeTrack, and three.ColorKeyframeTrack.
GitHub: VeinKowal/veins
2513 2514 2515 2516 2517 2518 2519 2520 2521 2522case PATH_PROPERTIES.weights: TypedKeyframeTrack = _three.NumberKeyframeTrack; break; case PATH_PROPERTIES.rotation: TypedKeyframeTrack = _three.QuaternionKeyframeTrack; break; case PATH_PROPERTIES.position: case PATH_PROPERTIES.scale:
010
2456 2457 2458 2459 2460 2461 2462 2463 2464 2465quaternion.toArray( quaternionValues, ( i / 3 ) * 4 ); } return new THREE.QuaternionKeyframeTrack( modelName + '.quaternion', times, quaternionValues ); } function getKeyframeTrackValues( times, curves, initialValue ) {
001+ 88 other calls in file
Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); const times = [0, 1, 2]; const quaternions = [ new THREE.Quaternion(), new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0)), new THREE.Quaternion().setFromEuler( new THREE.Euler(Math.PI / 2, Math.PI / 2, 0) ), ]; const rotationTrack = new THREE.QuaternionKeyframeTrack( ".quaternion", // Object property to animate times, // Array of keyframe times (in seconds) quaternions // Array of quaternion values ); const clip = new THREE.AnimationClip("Rotation", -1, [rotationTrack]); const mixer = new THREE.AnimationMixer(mesh); const action = mixer.clipAction(clip); action.play();
In this example, we first create a Mesh object and add it to the scene. We define an array times containing three keyframe times (0, 1, and 2 seconds), and an array quaternions containing three quaternion values representing the rotation of the Mesh object at each keyframe time. We then create a QuaternionKeyframeTrack object by passing in the name of the object property to animate (.quaternion), the array of keyframe times, and the array of quaternion values. We use these to create an instance of a three.AnimationClip, which is a collection of keyframe tracks that define an animation. We create a three.AnimationMixer object and associate it with the Mesh object. We then call mixer.clipAction() to create an AnimationAction object for the animation clip, and call action.play() to start playing the animation. This code animates the rotation of the Mesh object over time, smoothly interpolating between the three quaternion values to produce a smooth rotation.
2496 2497 2498 2499 2500 2501 2502 2503 2504 2505if (postRotation !== undefined) quaternion.multiply(postRotation); quaternion.toArray(quaternionValues, (i / 3) * 4); } return new THREE.QuaternionKeyframeTrack( modelName + '.quaternion', times, quaternionValues, );
000
three.Vector3 is the most popular function in three (22341 examples)