本文介绍了为什么立方体并不总是用three.js制作动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的代码中，立方体有时随着动画移动，有时没有.我该如何解决?
另外，我应该如何设置旋转速度?
new Vue({el: '#app',数据 () {返回 {相机:空，场景:空，渲染器:空，立方体:空，角度:空}},方法: {初始化:函数(){this.camera = new THREE.PerspectiveCamera(1, 1);this.camera.position.z = 200;//有意义this.scene = new THREE.Scene();this.clock = new THREE.Clock();//this.renderer = new THREE.WebGLRenderer({抗锯齿:真实，阿尔法:真实});let container = document.getElementById('container')this.renderer.setSize(container.offsetWidth, container.offsetHeight);container.appendChild(this.renderer.domElement);让cube2 = this.createCube()cube2.name = "cube2"//cube2.position = new THREE.Vector3(1, 0)this.scene.add(cube2);},createCube: 函数 () {//几何学//1. 从空几何开始让几何 = new THREE.Geometry();//2. 给几何体添加顶点geometry.vertices.push(//顶点 [0-3] 在 +z 中新三.Vector3(-1, 1, 1),新三.Vector3(-1, -1, 1),新三.Vector3(1, -1, 1),新三.Vector3(1, 1, 1),//在 -z 中翻转 [4-7]新三.Vector3(-1, 1, -1),new THREE.Vector3(-1, -1, -1),new THREE.Vector3(1, -1, -1),新三.Vector3(1, 1, -1),);//3. 按所需顺序连接顶点以制作面让 b = 0x1db0ec让 y = 0xffef3a让 r = 0xea353d让 w = 0xffffff//设置半面geometry.faces.push(new THREE.Face3(0, 1, 2));//蓝色geometry.faces.push(new THREE.Face3(0, 2, 3));//黄色geometry.faces.push(new THREE.Face3(5, 4, 6));//白色的geometry.faces.push(new THREE.Face3(6, 4, 7));//红色的//设置全脸geometry.faces.push(new THREE.Face3(1, 0, 5));//蓝色geometry.faces.push(new THREE.Face3(5, 0, 4));geometry.faces.push(new THREE.Face3(1, 5, 2));//白色的geometry.faces.push(new THREE.Face3(5, 6, 2));geometry.faces.push(new THREE.Face3(2, 6, 3));//红色的geometry.faces.push(new THREE.Face3(3, 6, 7));geometry.faces.push(new THREE.Face3(0, 3, 4));//黄色geometry.faces.push(new THREE.Face3(3, 7, 4));//设置人脸颜色geometry.faces[0].color.setHex(b);//半脸geometry.faces[1].color.setHex(y);geometry.faces[2].color.setHex(w);geometry.faces[3].color.setHex(r);geometry.faces[4].color.setHex(b);//整张脸geometry.faces[5].color.setHex(b);geometry.faces[6].color.setHex(w);geometry.faces[7].color.setHex(w);geometry.faces[8].color.setHex(r);geometry.faces[9].color.setHex(r);geometry.faces[10].color.setHex(y);geometry.faces[11].color.setHex(y);//材料//制作材质让材料 = 新的 THREE.MeshBasicMaterial({//颜色:0x00FF00，顶点颜色:THREE.FaceColors，线框:假，});//网let cube = new THREE.Mesh(geometry, material);返回立方体},旋转到:功能(面){如果(脸=='黄色')this.angle = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI/2, Math.PI/2));否则如果(脸=='红色')this.angle = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI/2, 0, Math.PI/2));否则如果(脸=='蓝色')this.angle = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI/2, 0, - Math.PI/2));否则如果(脸=='白')this.angle = new THREE.Quaternion().setFromEuler(new THREE.Euler(- Math.PI/2, Math.PI/2, 0));否则如果(脸=='yb')this.angle = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));否则如果(脸=='rw')this.angle = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI, 0, 0));this.animate()},动画:函数(){让 id = requestAnimationFrame(this.animate);让 delta = this.clock.getDelta();this.scene.children[0].quaternion.rotateTowards(this.angle, Math.PI * delta);this.renderer.render(this.scene, this.camera);如果 (this.scene.children[0].quaternion.equals(this.angle)) {取消动画帧(id)}}},挂载(){this.init();this.renderer.render(this.scene, this.camera);}})#container {背景色:#aaa;宽度:20em；高度:20em；}<script src="https://unpkg.com/vue"></script><script src="https://threejs.org/build/three.min.js"></script><div id="应用程序"><div><button v-on:click="rotateTo('yellow')">黄色</button><button v-on:click="rotateTo('red')">red</button><button v-on:click="rotateTo('blue')">blue</button><button v-on:click="rotateTo('white')">white</button><button v-on:click="rotateTo('yb')">黄色/蓝色</button><button v-on:click="rotateTo('rw')">红/白</button><div id="容器"></div>