ThreeJS旋转动画

我在ThreeJS中有一个立方体，我想每按一次按钮顺时针旋转它90度。我认为我有它的基本要点：创建一个Three.Animation实例，将其绑定到多维数据集，然后每次按下正确的按钮时都会开始动画。但是，我很难理解ThreeJS的API，因为它似乎没有包含任何方法的例子。ThreeJS旋转动画

这是THREE.js的Animation构造函数:(根，数据，interpolationType，JITCompile）我不明白进入字段的内容。我猜根源是我放置立方体的地方，但其余的呢？

我也可以只是打电话animation.play()导致动画，只要我想要？那么animationHandler是如何工作的？

来源

2012-02-01 Kevin Hwang

我认为对于旋转对象90度顺时针，使用TWEEN类将做。我认为，动画类是非常方便的较重的东西（如骨头/皮肤摇身一变/等）

要使用Tween类有3个基本步骤：

在文件中包含的类（<script src="js/Tween.js"></script>）
添加吐温的事件，你需要（new TWEEN.Tween(cube.rotation).to({ y:Math.random()}, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();）
更新吐温在渲染循环（TWEEN.update();）

你可以有一个有看看cubes tween example的开始。

我修改了默认立方体例如有吐温在：

three.js cube tween

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>three.js canvas - geometry - cube</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       background-color: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="../build/Three.js"></script> 
     <script src="js/Tween.js"></script> 
     <script src="js/RequestAnimationFrame.js"></script> 
     <script src="js/Stats.js"></script> 

     <script> 

      var container, stats; 

      var camera, scene, renderer; 

      var cube, plane; 

      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      var rad90 = Math.PI * .5; 

      init(); 
      animate(); 

      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       var info = document.createElement('div'); 
       info.style.position = 'absolute'; 
       info.style.top = '10px'; 
       info.style.width = '100%'; 
       info.style.textAlign = 'center'; 
       info.innerHTML = 'click to tween'; 
       container.appendChild(info); 

       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.y = 150; 
       camera.position.z = 500; 

       scene = new THREE.Scene(); 

       // Cube 

       var materials = []; 

       for (var i = 0; i < 6; i ++) { 

        materials.push([ new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }) ]); 

       } 

       cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial()); 
       cube.position.y = 150; 
       cube.overdraw = true; 
       scene.add(cube); 

       // Plane 

       plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({ color: 0xe0e0e0 })); 
       plane.rotation.x = - 90 * (Math.PI/180); 
       plane.overdraw = true; 
       scene.add(plane); 

       renderer = new THREE.CanvasRenderer(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 

       container.appendChild(renderer.domElement); 

       stats = new Stats(); 
       stats.domElement.style.position = 'absolute'; 
       stats.domElement.style.top = '0px'; 
       container.appendChild(stats.domElement); 

       document.addEventListener('mousedown', onDocumentMouseDown, false); 
      } 

      // 

      function onDocumentMouseDown(event) { 

       event.preventDefault(); 
       new TWEEN.Tween(cube.rotation).to({ y: cube.rotation.y + rad90}, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start(); 
       new TWEEN.Tween(plane.rotation).to({ z: plane.rotation.z + rad90}, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start(); 

       console.log("click"); 
      } 

      // 

      function animate() { 

       requestAnimationFrame(animate); 

       render(); 
       stats.update(); 

      } 

      function render() { 
       TWEEN.update(); 
       renderer.render(scene, camera); 

      } 

     </script> 

    </body> 
</html>

来源

2012-02-01 18:58:15

感谢您的帮助！我们最终使用Tween.js，一切都很顺利。 – 2012-02-19 03:37:07

我错了吗？或者这会插入欧拉角（这是你通常做*不想做的事）？如果你想插入四元数呢？特别是你通常希望四元数之间的*球面*插值。有没有简单的方法来适应这个代码来实现这一点？或者我们在检索自补间开始以来的时间（如果可能的话）并在适当的时间手动调用'quaternion.slerp'？ – Bakuriu 2014-05-29 15:09:23

@Bakuriu在原始问题中，我还没有找到有关欧拉旋转的问题。我明白这个问题是使用正确的类来为three.js库设置动画属性（在这种情况下为旋转）：主要是语法/ api问题而不是线性代数问题。你是对的，欧拉角一般应避免在3D空间中进行旋转，但在这个简单的例子中，它并没有真正改变。你应该可以使用Tween类为'Object3D'的'quaternion'属性设置动画，只要确保在启动补间之前将'useQuaternion'设置为true – 2014-05-29 16:51:05

ThreeJS旋转动画

回答

相关问题