Javascript 需要threejs动画剪辑示例

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

这里有一个简单的例子：但它不再工作了，因为动画已经完全改变了，动画旋转在一段时间前切换到了3JS中的四元数

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

使用Blender或Collada创建动画不是一个选项，因为我从step文件导入了模型，这两个文件都不支持

---

编辑我已经解决了示例中的问题，但仍然存在问题，因为我希望为嵌套的Object3d设置动画，但仅为根Object3d设置动画，因此我仅为根对象而不是整个层次指定了关键帧。但它会抛出一个错误，因为动画关键帧层次结构与根Object3d层次结构的结构不同。但这是另一个问题，需要另一个问题。示例的问题是，动画关键点中的旋转现在指定为四元数，而不是像示例中那样指定为Euler旋转。因此，将第四个值（1）添加到旋转参数使其工作。

我发现只有这一个：

而且，我自己也能写一篇：

//让我们创建一个网格
this.mesh=新的三个.mesh（几何体、材质）；
this.clock=新的3.clock（）；
//把这个调音台保存在某个地方
this.mixer=new THREE.AnimationMixer（this.mesh）；
设animation=3.AnimationClipCreator.CreateRotationAnimation（100，“y”）；
this.mixer.clipAction（animation.play（）；
//在场景的动画块中：
var delta=0.75*clock.getDelta（）；
这个.mixer.update（delta）；

---

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

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

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

以下是粘贴的基本部分：

            // 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）