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

person 少陵野老    watch_later 2024-10-13 14:07:30
visibility 43    class VectorKeyframeTrack    bookmark 专栏

简介

在 Three.js 中，VectorKeyframeTrack 是动画系统中的一个重要类，专门用于处理三维向量类型的关键帧动画。它通常用于控制物体的位置、缩放和其他三维向量属性。本文将详细介绍 VectorKeyframeTrack 的使用方法，包括其属性、方法，以及如何与其他组件结合使用，提供多个示例来展示其强大功能。

基础概念

什么是 VectorKeyframeTrack

VectorKeyframeTrack 允许在特定时间点上定义三维向量属性的值，并在动画播放时进行平滑插值。与其他动画轨道不同，VectorKeyframeTrack 处理的是由三个浮点数（x, y, z）组成的向量，这使得它在三维动画中十分重要。

创建 VectorKeyframeTrack

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

  • name：属性的名称，通常是对象中向量属性的路径（例如 .position）。
  • times：一个数组，表示每个关键帧的时间（以秒为单位）。
  • values：一个数组，表示每个关键帧对应的三维向量值（x, y, z）。
const track = new THREE.VectorKeyframeTrack(name, times, values);

VectorKeyframeTrack 的属性与方法

属性

  • name：关键帧轨道名称。
  • times：关键帧时间数组。
  • values：关键帧值数组，表示向量的 x、y、z 组件。
  • valueSize：每个关键帧值的大小，三维向量为 3。

方法

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

使用示例

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

示例 1：简单的位置动画

在这个示例中，我们将创建一个简单的场景，并使用 VectorKeyframeTrack 来动态改变一个立方体的位置。

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,    // 第一帧：位置 (0, 0, 0)
    2, 0, 0,    // 第二帧：位置 (2, 0, 0)
    2, 2, 0,    // 第三帧：位置 (2, 2, 0)
    0, 2, 0     // 第四帧：位置 (0, 2, 0)
]; 

const positionTrack = new THREE.VectorKeyframeTrack('.position', times, values);

// 创建动画剪辑
const clip = new THREE.AnimationClip('CubeAnimation', 3, [positionTrack]);
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：结合旋转动画

在这个示例中，我们将结合 VectorKeyframeTrack 和 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: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建位置关键帧轨道
const positionTimes = [0, 1, 2, 3]; 
const positionValues = [
    0, 0, 0,  
    2, 0, 0,  
    2, 2, 0,  
    0, 2, 0   
]; 
const positionTrack = new THREE.VectorKeyframeTrack('.position', positionTimes, positionValues);

// 创建旋转关键帧轨道
const rotationTimes = [0, 1, 2, 3]; 
const rotationValues = [
    0, 0, 0, 1,  // 第一帧：没有旋转
    0, 0, 1, 0,  // 第二帧：90度绕Z轴旋转
    0, 1, 0, 0,  // 第三帧：90度绕Y轴旋转
    1, 0, 0, 0   // 第四帧：90度绕X轴旋转
];
const rotationTrack = new THREE.QuaternionKeyframeTrack('.quaternion', rotationTimes, rotationValues);

// 创建动画剪辑
const clip = new THREE.AnimationClip('CubeAnimation', 3, [positionTrack, 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：使用 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: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建关键帧轨道
const times = [0, 1, 2, 3]; 
const values = [
    0, 0, 0,  
    2, 0, 0,  
    2, 0, 0,  // 重复位置
    0, 2, 0   
]; 
const positionTrack = new THREE.VectorKeyframeTrack('.position', times, values);
positionTrack.optimize(); // 优化关键帧

// 创建动画剪辑
const clip = new THREE.AnimationClip('OptimizedCubeAnimation', 3, [positionTrack]);
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：结合材质变化

在这个示例中，我们将使用 VectorKeyframeTrack 来动态改变物体的位置，同时结合材质的透明度变化。

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, transparent: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建位置关键帧轨道
const positionTimes = [0, 1, 2, 3]; 
const positionValues = [
    0, 0, 0,  
    2, 0, 0,  
    2, 2,

 0,  
    0, 2, 0   
]; 
const positionTrack = new THREE.VectorKeyframeTrack('.position', positionTimes, positionValues);

// 创建透明度关键帧轨道
const opacityTimes = [0, 1, 2, 3]; 
const opacityValues = [0, 1, 0, 0]; // 从透明到不透明，再到透明
const opacityTrack = new THREE.NumberKeyframeTrack('.material.opacity', opacityTimes, opacityValues);

// 创建动画剪辑
const clip = new THREE.AnimationClip('CubeAnimationWithOpacity', 3, [positionTrack, opacityTrack]);
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();

小结

本文详细介绍了 VectorKeyframeTrack 在 Three.js 中的使用方法，包括其基本属性和方法，并通过多个示例展示了如何在动画中结合位置、旋转和其他属性。VectorKeyframeTrack 是创建动态三维场景中不可或缺的工具，掌握它将使您能够制作出更生动和丰富的动画效果。

希望这篇博客能帮助您深入理解 VectorKeyframeTrack 的使用，如有问题或想法，请在评论区分享！

评论区
评论列表
作者信息

会当凌绝顶，一览众山小。

热门专栏

移动零

LeetCode 热题 100 - 两数之和

盛最多水的容器

三数之和

最长连续序列

在网页中使用 Materialize 实现中文日期选择器

MaterializeCSS轮播组件：构建动态网页内容的利器

在网页中使用 Materialize 实现日期选择器

使用 Materialize 实现图文列表布局

使用 Materialize 实现响应式布局

menu