为什么立方体不总是使用three.js设置动画

在下面的代码中，立方体有时随动画移动，有时不随动画移动。我怎样才能修好它

另外，我应该如何设置旋转速度

新Vue{ el:“应用程序”， 资料{ 返回{ 摄像机：空， 场景：空， 渲染器：null， 多维数据集：null， 角度：空 } }, 方法：{ init：函数{ this.camera=新的3.perspectivecamera 1，1； 这个.camera.position.z=200； //大吵大闹 this.scene=新的三个场景； this.clock=新的3.clock； // this.renderer=new THREE.WebGLRenderer{ 反别名：是的， 阿尔法：是的 }; let container=document.getElementById'container' this.renderer.setSizecontainer.offsetWidth，container.offsetHeight； container.appendChildthis.renderer.doElement； 让cube2=this.createCube cube2.name=cube2 //cube2.position=新的3.Vector31,0 this.scene.addcube2； }, createCube：函数{ //几何学 //1.从空几何体开始 让几何=新的三个。几何； //2.向几何体添加顶点 geometry.vertices.push //顶点[0-3]位于+z中 新的3.3-1，1，1， 新的三矢量3-1，-1,1， 新的三矢量31，-1，1， 新的3.31，1，1， //垂直于-z方向[4-7] 新的3，向量3-1，1，-1， 新的三矢量3-1，-1，-1， 新的三矢量31，-1，-1， 新的3.31，1，-1， ; //3.按所需顺序连接顶点以生成面 设b=0x1db0ec 设y=0xffef3a 设r=0xea353d 设w=0xffffff //设置半边脸 geometry.faces.pushnew THREE.Face30,1,2；//蓝色 geometry.faces.pushnew THREE.Face30,2,3；//黄色 geometry.faces.pushnew三个面35,4,6；//白色 geometry.faces.pushnew三个面36,4,7；//红色 //整张脸 geometry.faces.pushnew三个面31,0,5；//蓝色 geometry.faces.pushnew三个面35,0,4； geometry.faces.pushnew三个面31,5,2；//白色 geometry.faces.pushnew三个面35、6、2； geometry.faces.pushnew THREE.Face32,6,3；//红色 geometry.faces.pushnew三个面33、6、7； geometry.faces.pushnew THREE.Face30,3,4；//黄色 geometry.faces.pushnew三个面33、7、4； //设置面颜色 geometry.faces[0].color.setHexb；//半个面 geometry.faces[1].color.setHexy； geometry.faces[2].color.setHexw； geometry.faces[3].color.setHexr； geometry.faces[4].color.setHexb；//整个面 geometry.faces[5].color.setHexb； geometry.faces[6].color.setHexw； geometry.faces[7].color.setHexw； geometry.faces[8].color.setHexr； geometry.faces[9].color.setHexr； geometry.faces[10].color.setHexy； geometry.faces[11].color.setHexy； //材料 //制作材料 let material=新的三网格基本材质{ //颜色：0x00FF00， 顶点颜色：三种颜色， 线框：假， }; //网孔 让立方体=新的三个。网格几何体，材质； 返回立方体 }, 旋转到：功能面{ 如果面==“黄色” this.angle=new THREE.Quaternion.setfrom eulernew THREE.Euler0，Math.PI/2，Math.PI/2； 如果面==‘红色’ this.angle=new THREE.Quaternion.setfrom eulernew THREE.EulerMath.PI/2，0，Math.PI/2； 如果面==‘蓝色’ this.angle=new THREE.Quaternion.setfrom eulernew THREE.EulerMath.PI/2，0，-Math.PI/2； 否则，如果面==‘白色’ this.angle=new THREE.Quaternion.setfrom eulernew THREE.Euler-Math.PI/2，Math.PI/2，0； 如果面=='yb' this.angle=new THREE.Quaternion.setfrom eulernew THREE.Euler0,0,0； 如果面=='rw' this.angle=new THREE.Quaternion.setfrom eulernew THREE.EulerMath.PI，0,0； 这是动画 }, 动画：函数{ 让id=requestAnimationFramethis.animate； 让delta=this.clock.getDelta； this.scene.children[0].quaternion.rotatetowardstthis.angle，Math.PI*delta； this.renderer.renderthis.scene，this.camera； 如果此.scene.children[0].quaternion.equalThis.angle{ 取消动画帧ID } } }, 安装{ this.init； this.renderer.renderthis.scene，this.camera； } } 容器{ 背景色：aaa； 宽度：20em； 高度：20em； } 黄的 红色 蓝色 白色 黄色/蓝色 红/白

---

动画不播放的原因是，当取消AnimationFrame时，时钟仍在运行，因此下次调用rotateTo时，增量非常高，动画将立即结束

通过使用cancelAnimationFrame停止时钟，并在调用rotateTo时再次启动时钟，可以避免这种情况，如下所示：

函数旋转面{ 开始计时 ... } F 功能动画{ ... 如果场景.children[0].四元数.equalsangle{ 取消动画帧ID； 停止 } } 至于旋转速度，旋转方向的第二个arg是step，它决定了它到达那里的速度。因此，如果向其添加修改器var，则可以控制速度

设RotspeedMotimier=0.2//越高速度越快 scene.children[0].四元数.rotateTowardsangle，Math.PI*delta*rotspeedier；

---

动画不播放的原因是，当取消AnimationFrame时，时钟仍在运行，因此下次调用rotateTo时，增量非常高，动画将立即结束

通过使用cancelAnimationFrame停止时钟，并在调用rotateTo时再次启动时钟，可以避免这种情况，如下所示：

函数旋转面{ 开始计时 ... } 函数动画{ ... 如果场景.children[0].四元数.equalsangle{ 取消动画帧ID； 停止 } } 至于旋转速度，旋转方向的第二个arg是step，它决定了它到达那里的速度。因此，如果向其添加修改器var，则可以控制速度

设RotspeedMotimier=0.2//越高速度越快 scene.children[0].四元数.rotateTowardsangle，Math.PI*delta*rotspeedier；

---

您能将代码仅隔离到threejs部分吗？似乎有很多与vue相关的内容。@pailhead我刚刚更新了代码，在第二个代码段中删除了所有与vue相关的内容。您能将代码仅隔离到threejs部分吗？似乎有很多与vue相关的东西。@pailhead我刚刚更新了代码，在第二个代码片段中删除了所有与vue相关的东西。