Web上的旋轉對象

我使用three.js將簡單的3d對象從攪拌器加載到網頁。我想旋轉這個對象從vectorSTART到vectorEND時間TIME（在這個例子中只有'y'軸）。我發現有一個解決方案ThreeJS Rotation Animation，但有一個錯誤TypeError: _easingFunction is not a function（當我點擊屏幕時）。我的代碼是：Web上的旋轉對象

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>My first three.js app</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100%; display: block; } 
     </style> 
    </head> 
    <body> 
     <script src="https://threejs.org/build/three.js"></script> 
     <script src="Tween.js"></script> 
     <script> 
      var object; 
      var scene = new THREE.Scene(); 
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
      camera.position.z = 5; 
      camera.position.y = 0; 
      camera.position.x = 0; 
      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      var loader = new THREE.ObjectLoader(); 
      document.addEventListener('mousedown', onDocumentMouseDown, false); 
      loader.load("model(1).json", function (obj) { 
       object = obj; 
       scene.add(object); 
       render(); 
       }, 
       function (xhr) { 
        console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
       }, 
       function (xhr) { 
        console.error('An error happened'); 
       } 
      ); 
      var render = function() { 
       requestAnimationFrame(render); 
       renderer.render(scene, camera); 

      }; 
      function onDocumentMouseDown(){ 
       animate(); 
      } 
      function animate(){ 
       //object.rotation.y += 10 *(Math.PI/180); 
       new TWEEN.Tween(object.rotation).to({ y: object.rotation.y + (Math.PI * .18)}, 100).easing(TWEEN.Easing.Quadratic.EaseOut).start(); 
       TWEEN.update(); 
       console.log("im here"); 
      } 
      render(); 
     </script> 
    </body> 
</html>

我不知道爲什麼它不起作用。不過，我不必使用TWEEN，如果您知道任何不同的解決方案，這將是非常棒的。

來源

2017-04-08 littlewombat

沒有測試過這一點，但IIRC Tween.JS的API需要你「從」相媲美的價值觀和「以」 - 嘗試：

new TWEEN.Tween(object.rotation.y).to({object.rotation.y + (Math.PI * .18)}, 100).easing(TWEEN.Easing.Quadratic.EaseOut).start();

來源

2017-04-15 18:41:01 AquaVitae

Web上的旋轉對象

回答

相關問題