需要 Threejs AnimationClip 示例

Question

在 ThreeJS 中：我有一个 object3D，想用它做简单的关键帧动画：移动、旋转、缩放。

这里有一个简单的例子：https://thirdjs.org/examples/#misc_animation_keys但是它不再起作用了，因为动画已经完全改变了动画旋转在ThreeJS中切换到四元数。

我正在寻找一个像这样的非常简单的例子，但是使用新的动画系统，我已经用谷歌搜索了它，但什么也没找到。 ThreeJS 页面上没有文档。

使用 Blender 或 Collada 创建动画不是一种选择，因为我已经从步骤文件导入了模型，而这两者都不支持。

编辑我已经用示例解决了问题，但我仍然有问题，因为我想为嵌套的Object3d设置动画，但只为根Object3d设置动画，所以我仅为根对象而不是整个层次结构指定了键。但它会引发错误，因为动画键层次结构与根 Object3d 层次结构的结构不同。但这是另一个问题，需要另一个问题

Answer 1

该示例的问题是，动画关键点中的旋转现在指定为四元数，而不是像示例中那样指定为欧拉旋转。因此，向旋转参数添加第四个值 (1) 使其起作用。

Answer 2

终于找到了一个在关键帧中设置所需值的好例子：

其他动画键

可以通过检查该页面找到完整的源代码。

这里粘贴了重要部分：

// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
// Note: the keyframe track type should correspond to the type of the property being animated

// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );

// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );

// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );

var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );

// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );

// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

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

动画有 3 个关键帧 [0,1,2] = [初始,最终,初始]

位置数组 [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] 表示 (0,0,0) -> (30,0,0) -> (0,0,0)

Answer 3

我只找到这个：

https://github.com/mrdoob/ Three.js/blob/master/examples/webgl_animation_scene.html

另外，我自己也写了一个：

//Let's create a mesh
this.mesh = new THREE.Mesh( geometry, material );
    
this.clock = new THREE.Clock();
    
//Save this mixer somewhere
this.mixer = new THREE.AnimationMixer( this.mesh );
let animation = THREE.AnimationClipCreator.CreateRotationAnimation(100, "y");
this.mixer.clipAction(animation ).play();
    
//In the animation block of your scene:
var delta = 0.75 * clock.getDelta();
this.mixer.update( delta );

这将围绕 y 轴旋转给定的网格。