动画与轨道能做什么

BooleanKeyframeTrack 控制动画中布尔属性
ColorKeyframeTrack 控制动画中的颜色属性
NumberKeyframeTrack 控制动画中的数字属性
QuaternionKeyframeTrack 控制动画中的旋转立体属性
StringKeyframeTrack 控制动画中的字符串属性
VectorKeyframeTrack 控制动画中的位置缩放属性

简单的演示



// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
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 = [true, false, true, false];  // 布尔值与时间点对应
const booleanTrack = new THREE.BooleanKeyframeTrack('.visible', times, values);

// 创建动画剪辑
const clip = new THREE.AnimationClip('visibilityClip', 4, [booleanTrack]);

// 创建 AnimationMixer 并播放动画
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 设置相机位置
camera.position.z = 5;

const clock = new THREE.Clock();

// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 更新动画
    const delta = clock.getDelta();
    mixer.update(delta);

    renderer.render(scene, camera);
}
animate();

每个任务的时间点与值对应的值有一点区别

three.js 中 Track 动画与轨道

动画与轨道能做什么