在三个 JS 中使用 KeyFrame Tracks 同时动画立方体答案

【问题标题】：Simultaneously animated cubes using KeyFrameTracks in ThreeJS在三个 JS 中使用 KeyFrame Tracks 同时动画立方体
【发布时间】：2019-05-13 16:30:10
【问题描述】：

我想通过 KeyFrameTracks 显示两个不同的立方体。以下示例 KeyFrame Three.js 代码已被采用。如何集成通过 KeyFrameTracks 移动的第二个动画立方体？谢谢

// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be    calculated from the times of the passed tracks array

var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );

// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );

// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
clipAction.play();

【问题讨论】：

标签： animation three.js

【解决方案1】：

这个想法是使用AnimationObjectGroup。此类的一个实例表示一组接收共享动画状态的对象。创建组后，将相应的网格添加到其中。在下一步中，将此组作为其根对象传递给动画混合器。

const animationGroup = new THREE.AnimationObjectGroup();

animationGroup.add( mesh1 );
animationGroup.add( mesh2 );

const mixer = new THREE.AnimationMixer( animationGroup );

https://threejs.org/examples/misc_animation_groups

three.js R104

【讨论】：

谢谢，是否也可以使用 KeyFrameTracks（即包含时间数据的数组和包含位置数据的数组）对两个或多个立方体进行不同的动画处理？例如。从同一时间点开始，一个立方体在 2 秒内向左移动，另一个立方体在 3 秒内向右移动。谢谢
是的，这是可能的。但是，如果您从头开始创建此类（简单）动画，请考虑使用tween.js 或类似的库。它也用于各种three.js 示例，例如threejs.org/examples/css3d_periodictable