Question

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

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

我正在寻找一个非常简单的例子，但是使用新的动画系统，我已经用Google搜索了它并且什么都没发现。 threeJS页面上没有文档。

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

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

Answer 1

示例的问题是，动画关键点中的旋转现在被指定为四元数，而不是像示例中那样的欧拉旋转。因此，向旋转参数添加第四个值（1）使其有效。

Answer 2

我只找到这一个：

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轴旋转给定网格。

Answer 3

最后找到一个很好的例子，可以在关键帧中设置所需的值：

Misc animation keys

通过查看该页面可以找到完整的源。

此处粘贴了必不可少的部分：

            // 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] = [initial，final，initial]

位置数组[0，0，0，30，0，0，0，0，0]表示（0,0,0）->（30,0,0）->（0,0,0）

threejs AnimationClip需要示例

3 个答案: