Threejs AnimationClip 需要示例

Question

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

这里有一个简单的例子：https:// Threejs.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 轴旋转给定的网格。