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旋轉動畫

回答

相關問題