threejs 笔记 vue ---- 帧动画

1.创建物体

let geometry = new THREE.ConeBufferGeometry(0.01,0.05,16);// 圆锥几何体
geometry.rotateX(Math.PI / -2);// 旋转几何体
let material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
let cone = new THREE.Mesh(geometry, material);

2.创建对象 把物体添加到对象去

因为播放混合器参数要求的是播放动画所属的对象  

AnimationMixer( rootObject : Object3D )

rootObject - 混合器播放的动画所属的对象

let group = new THREE.Group();
group.add(cone);
this.scene.add(group);

3.编辑帧动画

cone.name = 'Cone';// 先给物体设置一个name值
let times = [0,50,51,101];//关键帧时间数组，离散的时间点序列
let values = [-800,0,100.8, 800,0,100.8, 800,0,106.8, -800,0,106.8];//与时间点对应的值组成的位置数组
let track = new THREE.KeyframeTrack('Cone.position',times,values);
let duration = 101;//duration决定了默认的播放时间，一般取所有帧动画的最大时间  duration偏小，帧动画数据无法播放完，偏大，播放完帧动画会继续空播放
let clip = new THREE.AnimationClip('default',duration,[track]);// 创建一个剪辑clip对象，命名"default"

4.播放帧动画

this.mixer = new THREE.AnimationMixer(group);
let animation = _this.mixer.clipAction(clip);
animation.timeScale =3;//默认1，可以调节播放速度
animation.play();// 开始播放
let clock = new THREE.Clock();//创建一个时钟对象Clock
function run(){
    requestAnimationFrame(run);
    mixer && mixer.update(this.clock.getDelta());// // 更新混合器相关的时间
}

这样这个圆锥物体就会移动了，如果想要其旋转，则把关键帧轨道(KeyframeTrack)的name换成'Cone.rotation[y]',再设置移动值，简单实现完成，动画可以运动起来了，但是会发现无法改变朝向，使用up属性也无效，又或者我使用的方法不对，有知道怎么搞的麻烦告知下，谢谢