Matarialize中文社区-Three.js 框架中的 QuaternionKeyframeTrack 使用详解

Three.js 框架中的 QuaternionKeyframeTrack 使用详解

少陵野老 2024-10-13 14:03:47

32 QuaternionKeyframeTrack 专栏

简介

QuaternionKeyframeTrack 是 Three.js 动画系统中的一个重要类，用于处理四元数类型的关键帧动画。四元数在三维图形中用于表示旋转，相比欧拉角，它避免了万向锁的问题，并提供了更平滑的旋转过渡。本文将详细讲解 QuaternionKeyframeTrack 的使用方法，包括其属性、方法以及如何与其他组件结合使用，通过多个示例展示其强大功能。

基础概念

什么是 QuaternionKeyframeTrack

QuaternionKeyframeTrack 用于创建与物体旋转相关的关键帧动画。它允许我们在特定时间点上定义物体的旋转状态，并在动画播放时进行平滑插值。

创建 QuaternionKeyframeTrack

要创建一个 QuaternionKeyframeTrack 实例，需要传入以下参数：

name：属性的名称，通常是对象中四元数属性的路径。
times：一个数组，表示每个关键帧的时间（以秒为单位）。
values：一个数组，表示每个关键帧对应的旋转值，以四元数形式存储。

const track = new THREE.QuaternionKeyframeTrack(name, times, values);

QuaternionKeyframeTrack 的属性与方法

属性

name：关键帧轨道名称。
times：关键帧时间数组。
values：关键帧值数组，四元数表示（x, y, z, w）。
valueSize：每个关键帧值的大小，四元数为 4。

方法

getValue()：获取当前关键帧值。
optimize()：优化关键帧，删除冗余数据。
toJSON()：将关键帧轨道转换为 JSON 格式，方便存储和传输。

使用示例

接下来，我们将通过多个示例来演示 QuaternionKeyframeTrack 的具体使用方法。

示例 1：简单的旋转动画

在这个示例中，我们将创建一个简单的立方体，并使用 QuaternionKeyframeTrack 来实现它的旋转动画。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建关键帧轨道
const times = [0, 1, 2]; // 关键帧时间
const values = [
    0, 0, 0, 1,  // 第一帧：四元数(0, 0, 0, 1) - 无旋转
    0, 1, 0, 0,  // 第二帧：四元数(0, 1, 0, 0) - 90度绕Y轴旋转
    0, 0, 1, 0   // 第三帧：四元数(0, 0, 1, 0) - 180度绕Y轴旋转
];

const rotationTrack = new THREE.QuaternionKeyframeTrack('.quaternion', times, values);

// 创建动画剪辑
const clip = new THREE.AnimationClip('RotationClip', 2, [rotationTrack]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
    mixer.update(delta);
  
    renderer.render(scene, camera);
}
animate();

示例 2：使用多个关键帧实现复杂旋转

在这个示例中，我们将创建多个关键帧，以实现更加复杂的旋转效果。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建关键帧轨道
const times = [0, 1, 2, 3]; // 关键帧时间
const values = [
    0, 0, 0, 1,  // 第一帧：无旋转
    0, 1, 0, 0,  // 第二帧：90度绕Y轴旋转
    0, 0, 1, 0,  // 第三帧：180度绕Y轴旋转
    1, 0, 0, 0   // 第四帧：绕X轴旋转
];

const rotationTrack = new THREE.QuaternionKeyframeTrack('.quaternion', times, values);

// 创建动画剪辑
const clip = new THREE.AnimationClip('ComplexRotationClip', 3, [rotationTrack]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
    mixer.update(delta);
  
    renderer.render(scene, camera);
}
animate();

示例 3：结合其他轨道实现组合动画

在这个示例中，我们将结合多个 QuaternionKeyframeTrack 和 NumberKeyframeTrack 来实现组合动画效果。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建关键帧轨道
const times = [0, 1, 2, 3]; // 关键帧时间
const rotationValues = [
    0, 0, 0, 1,  // 第一帧：无旋转
    0, 1, 0, 0,  // 第二帧：90度绕Y轴旋转
    0, 0, 1, 0,  // 第三帧：180度绕Y轴旋转
    1, 0, 0, 0   // 第四帧：绕X轴旋转
];

const scaleValues = [1, 1.5, 1, 0.5]; // 缩放值

const rotationTrack = new THREE.QuaternionKeyframeTrack('.quaternion', times, rotationValues);
const scaleTrack = new THREE.NumberKeyframeTrack('.scale.x', times, scaleValues);

// 创建动画剪辑
const clip = new THREE.AnimationClip('CombinedClip', 3, [rotationTrack, scaleTrack]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
    mixer.update(delta);
  
    renderer.render(scene, camera);
}
animate();

示例 4：使用 optimize() 方法优化关键帧

在这个示例中，我们将演示如何使用 optimize() 方法来优化关键帧轨道，去除冗余数据。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffa500 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建关键帧轨道
const times = [0, 0.5, 1, 1.5, 2]; // 关键帧时间
const values = [
    0, 0, 0, 1,  // 第一帧：无旋转
    0, 

1, 0, 0,  // 第二帧：90度绕Y轴旋转
    0, 0, 1, 0,  // 第三帧：180度绕Y轴旋转
    0, 1, 0, 0,  // 第四帧：90度绕Y轴旋转（重复）
    1, 0, 0, 0   // 第五帧：绕X轴旋转
];

const rotationTrack = new THREE.QuaternionKeyframeTrack('.quaternion', times, values);
rotationTrack.optimize(); // 优化关键帧

// 创建动画剪辑
const clip = new THREE.AnimationClip('OptimizedRotationClip', 2, [rotationTrack]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
    mixer.update(delta);
  
    renderer.render(scene, camera);
}
animate();

总结

QuaternionKeyframeTrack 是 Three.js 动画系统中处理物体旋转的重要工具。通过本博客，我们详细探讨了 QuaternionKeyframeTrack 的使用，包括其属性、方法及多个示例。掌握 QuaternionKeyframeTrack 将使您能够在 Three.js 中实现复杂而流畅的旋转动画。

希望这篇博客能够帮助您深入理解 QuaternionKeyframeTrack 的使用，并激发您创造出更多有趣的 Three.js 动画项目！如果您有任何问题或想法，欢迎在评论区分享。

评论区