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上的旋转对象

回答

相关问题