Matarialize中文社区-three.js专栏

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

PropertyMixer

简介

PropertyMixer 是 Three.js 动画系统中的一个重要组件，主要用于处理对象属性的动画混合。它能够将多个动画组合在一起，以便于实现复杂的动画效果。在本博客中，我们将深入探讨 PropertyMixer 的使用，包括其属性、方法，以及如何与其他组件结合使用，通过多个示例展示其强大功能。

基础概念

什么是 PropertyMixer

PropertyMixer 是 Three.js 动画系统中的一个类，负责管理某个特定属性的动画。它允许开发者在多个动画之间进行混合，使得同一个属性可以同时受到多个动画的影响。

创建 PropertyMixer

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

value：需要混合的值。
typeName：值的类型（如 Vector3、Color、Number 等）。
valueSize：每个值的大小。

const propertyMixer = new THREE.PropertyMixer(value, typeName, valueSize);

PropertyMixer 的属性与方法

属性

value：当前值。
typeName：值的类型名称。
valueSize：值的大小。
binding：当前绑定的动画混合器。

方法

addAction(action, weight)：添加动画动作及其权重。
removeAction(action)：移除指定的动画动作。
update(deltaTime)：更新当前混合值。
getValue()：获取当前混合后的值。

使用示例

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

示例 1：简单的混合动画

在此示例中，我们将创建一个简单的立方体，并使用 PropertyMixer 混合它的颜色和位置。

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);

// 创建 PropertyMixer
const positionMixer = new THREE.PropertyMixer(cube.position, 'Vector3', 3);
const colorMixer = new THREE.PropertyMixer(cube.material.color, 'Color', 3);

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
  
    // 更新位置和颜色
    positionMixer.addAction({ value: new THREE.Vector3(Math.sin(Date.now() * 0.001), 0, 0), weight: 1 });
    colorMixer.addAction({ value: new THREE.Color(Math.abs(Math.sin(Date.now() * 0.001))), weight: 1 });
  
    positionMixer.update(delta);
    colorMixer.update(delta);
  
    // 更新值
    cube.position.copy(positionMixer.getValue());
    cube.material.color.copy(colorMixer.getValue());
  
    renderer.render(scene, camera);
}
animate();

示例 2：结合 AnimationMixer 和 PropertyMixer

在这个示例中，我们将结合 AnimationMixer 和 PropertyMixer 创建更复杂的动画。

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);

// 创建 AnimationMixer
const mixer = new THREE.AnimationMixer(cube);
const positionAction = mixer.clipAction(new THREE.AnimationClip('positionAnimation', -1, []));
const colorAction = mixer.clipAction(new THREE.AnimationClip('colorAnimation', -1, []));

// 创建 PropertyMixer
const positionMixer = new THREE.PropertyMixer(cube.position, 'Vector3', 3);
const colorMixer = new THREE.PropertyMixer(cube.material.color, 'Color', 3);

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
  
    // 更新位置和颜色
    positionMixer.addAction({ value: new THREE.Vector3(Math.sin(Date.now() * 0.001), 0, 0), weight: 1 });
    colorMixer.addAction({ value: new THREE.Color(Math.abs(Math.sin(Date.now() * 0.001))), weight: 1 });
  
    positionMixer.update(delta);
    colorMixer.update(delta);
  
    // 更新值
    cube.position.copy(positionMixer.getValue());
    cube.material.color.copy(colorMixer.getValue());
  
    mixer.update(delta);
    renderer.render(scene, camera);
}
animate();

示例 3：复杂的动画混合

在这个示例中，我们将创建多个 PropertyMixer 实例，分别用于处理立方体的不同属性。

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);

// 创建多个 PropertyMixer
const positionMixer = new THREE.PropertyMixer(cube.position, 'Vector3', 3);
const rotationMixer = new THREE.PropertyMixer(cube.rotation, 'Vector3', 3);
const scaleMixer = new THREE.PropertyMixer(cube.scale, 'Vector3', 3);
const colorMixer = new THREE.PropertyMixer(cube.material.color, 'Color', 3);

// 动画循环
let clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
  
    // 更新位置、旋转、缩放和颜色
    positionMixer.addAction({ value: new THREE.Vector3(Math.sin(Date.now() * 0.001), 0, 0), weight: 1 });
    rotationMixer.addAction({ value: new THREE.Vector3(0, Math.sin(Date.now() * 0.001), 0), weight: 1 });
    scaleMixer.addAction({ value: new THREE.Vector3(1 + Math.sin(Date.now() * 0.001), 1 + Math.sin(Date.now() * 0.001), 1), weight: 1 });
    colorMixer.addAction({ value: new THREE.Color(Math.abs(Math.sin(Date.now() * 0.001))), weight: 1 });
  
    positionMixer.update(delta);
    rotationMixer.update(delta);
    scaleMixer.update(delta);
    colorMixer.update(delta);
  
    // 更新值
    cube.position.copy(positionMixer.getValue());
    cube.rotation.copy(rotationMixer.getValue());
    cube.scale.copy(scaleMixer.getValue());
    cube.material.color.copy(colorMixer.getValue());
  
    renderer.render(scene, camera);
}
animate();

示例 4：动态添加和移除动画

在这个示例中，我们将展示如何动态地添加和移除动画动作。

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);

// 创建 PropertyMixer
const positionMixer = new THREE.PropertyMixer(cube.position, 'Vector3', 3);
const colorMixer = new THREE.PropertyMixer(cube.material.color, 'Color', 3);

// 动画循环
let clock = new THREE.Clock();
let actionCount = 0;

function animate() {
    requestAnimationFrame(animate);
  
    const delta = clock.getDelta();
  
    // 每 2 秒动态添加动作
    if (actionCount < 5 && Date.now() % 2000 < 50) {
        positionMixer.addAction({ value: new THREE.Vector3(Math.sin(Date.now() * 0.001 + actionCount), 0, 0), weight: 1 });
        colorMixer.addAction({ value: new THREE.Color(Math.abs(Math.sin(Date.now() * 0.001 + actionCount))), weight: 1 });
        action

Count++;
    }
  
    positionMixer.update(delta);
    colorMixer.update(delta);
  
    // 更新值
    cube.position.copy(positionMixer.getValue());
    cube.material.color.copy(colorMixer.getValue());
  
    renderer.render(scene, camera);
}
animate();

总结

PropertyMixer 是 Three.js 动画系统中非常强大的工具，通过它我们可以轻松管理对象属性的动画混合。在本博客中，我们详细探讨了 PropertyMixer 的使用，包括其属性、方法和多个示例。掌握 PropertyMixer 将使您在 Three.js 中实现复杂而灵活的动画效果。

希望这篇博客能够帮助您深入理解 PropertyMixer 的使用，并激发您创造出更多有趣的 Three.js 动画项目！

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}