如何使用.json文件加載的three.js中的網格旋轉動畫？

我只是在學習three.js，並且正在努力使對象動畫化。如何使用.json文件加載的three.js中的網格旋轉動畫？

我需要能夠加載一個.json文件（從Blender導出）並讓對象水平連續旋轉（如動畫），有點像this example。旋轉場景也可以。我看到的大多數解決方案都涉及旋轉網格，但是每當我嘗試引用網格變量時，我都會得到一個控制檯錯誤，它是未定義的或爲空（取決於我是否初始化它），哪個I假設是因爲它只用在我的.json加載器中。另一個解決方案建議引用這個場景，但是這給我一個錯誤：「由於列入黑名單而禁止反鋸齒反向緩衝區。」

我目前擁有的代碼是：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Rotating Sphere</title> 
 
    <meta charset="utf-8"> 
 
    
 
    <!-- https://cdnjs.com/libraries/three.js --> 
 
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/three.min.js"></script> 
 
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/OrbitControls.js"></script> 
 
    <!-- Tween.js: https://cdnjs.com/libraries/tween.js/ --> 
 
    <!--<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/Tween.js"></script>--> 
 
    </head> 
 
    <body style="margin: 0; background-color:#6cdbf5;"> 
 
    <script> 
 

 
     // Set up the scene, camera, and renderer as global variables. 
 
     var scene = null, 
 
      camera = null, 
 
      renderer = null, 
 
      mesh = null; 
 

 
     init(); 
 
     animate(); 
 

 
     // Sets up the scene. 
 
     function init() { 
 

 
     // Create the scene and set the scene size. 
 
     scene = new THREE.Scene(); 
 
     var WIDTH = window.innerWidth, 
 
      HEIGHT = window.innerHeight; 
 

 
     // Create a renderer and add it to the DOM. 
 
     renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); 
 
     renderer.setSize(WIDTH, HEIGHT); 
 
     document.body.appendChild(renderer.domElement); 
 

 
     // Create a camera, zoom it out from the model a bit, and add it to the scene. 
 
     camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 20000); 
 
     camera.position.set(0,6,0); 
 
     scene.add(camera); 
 

 
     // Create an event listener that resizes the renderer with the browser window. 
 
     window.addEventListener('resize', function() { 
 
      var WIDTH = window.innerWidth, 
 
       HEIGHT = window.innerHeight; 
 
      renderer.setSize(WIDTH, HEIGHT); 
 
      camera.aspect = WIDTH/HEIGHT; 
 
      camera.updateProjectionMatrix(); 
 
     }); 
 

 
     // Set the background color of the scene to transparent 
 
     //renderer.setClearColor(0x000000, 0); 
 
     
 
     // Create a light, set its position, and add it to the scene. 
 
     var light = new THREE.PointLight(0xffffff); 
 
     light.position.set(-100,200,100); 
 
     scene.add(light); 
 

 
     // Load in the mesh and add it to the scene. 
 
     var loader = new THREE.JSONLoader(); 
 
     loader.load("http://www.amdesigngroup.com/clients/AM_6292_Learning/models/circle.json", function(geometry){ 
 
      var material = new THREE.MeshLambertMaterial({color: 0x55B663}); 
 
      mesh = new THREE.Mesh(geometry, material); 
 
      mesh.translation = THREE.GeometryUtils.center(geometry); 
 
      /*mesh.rotation.x = 0;*/ 
 
      scene.add(mesh); 
 
     }); 
 

 
     // Add OrbitControls so that we can pan around with the mouse. 
 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 
 

 
     } 
 
     
 
     /* rotate mesh */ 
 
     /*var duration = 5000; // ms 
 
     var currentTime = Date.now(); 
 
     function rotate() { 
 

 
      var now = Date.now(); 
 
      var deltat = now - currentTime; 
 
      currentTime = now; 
 
      var fract = deltat/duration; 
 
      var angle = Math.PI * 2 * fract; 
 
      scene.rotation.y += angle; 
 
     }*/ 
 
     
 
     // Renders the scene and updates the render as needed. 
 
     function animate() { 
 

 
     // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 
 
     requestAnimationFrame(animate); 
 
     //rotate(); 
 
     // Render the scene. 
 
     renderer.render(scene, camera); 
 
     controls.update(); 
 
     } 
 

 
    </script> 
 
    </body> 
 
</html>

張貼，它會顯示，而不是動畫，模型 - 這被註釋掉各部分是我的失敗嘗試完成一個旋轉動畫。

任何人都可以給我一些指針嗎？

來源

2016-11-15 Mary7678

我找到了解決方案！由於有一篇文章使用了加載器中調用的函數，將對象作爲變量傳遞，所以我能夠訪問該對象。然後this StackOverflow post使用Tween創建動畫。我能夠修改該代碼以獲得我正在尋找的輪換。

Here is the code that is now working for me:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Rotating Sphere</title> 
 
    <meta charset="utf-8"> 
 
    
 
    <!-- https://cdnjs.com/libraries/three.js --> 
 
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/three.min.js"></script> 
 
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/OrbitControls.js"></script> 
 
    <!-- Tween.js: https://cdnjs.com/libraries/tween.js/ --> 
 
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/Tween.js"></script> 
 
    </head> 
 
    <body style="margin: 0; background-color:#6cdbf5;"> 
 
    <script> 
 

 
     // Set up the scene, camera, and renderer as global variables. 
 
     var scene = null, 
 
      camera = null, 
 
      renderer = null, 
 
      mesh = null; 
 

 
     init(); 
 
     run(); 
 

 
     // Sets up the scene. 
 
     function init() { 
 

 
     // Create the scene and set the scene size. 
 
     scene = new THREE.Scene(); 
 
     var WIDTH = window.innerWidth, 
 
      HEIGHT = window.innerHeight; 
 

 
     // Create a renderer and add it to the DOM. 
 
     renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); 
 
     renderer.setSize(WIDTH, HEIGHT); 
 
     document.body.appendChild(renderer.domElement); 
 

 
     // Create a camera, zoom it out from the model a bit, and add it to the scene. 
 
     camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 20000); 
 
     camera.position.set(0,6,0); 
 
     scene.add(camera); 
 

 
     // Create an event listener that resizes the renderer with the browser window. 
 
     window.addEventListener('resize', function() { 
 
      var WIDTH = window.innerWidth, 
 
       HEIGHT = window.innerHeight; 
 
      renderer.setSize(WIDTH, HEIGHT); 
 
      camera.aspect = WIDTH/HEIGHT; 
 
      camera.updateProjectionMatrix(); 
 
     }); 
 

 
     // Set the background color of the scene to transparent 
 
     //renderer.setClearColor(0x000000, 0); 
 
     
 
     // Create a light, set its position, and add it to the scene. 
 
     var light = new THREE.PointLight(0xffffff); 
 
     light.position.set(-100,200,100); 
 
     scene.add(light); 
 

 
     // Load in the mesh and add it to the scene. 
 
     var loader = new THREE.JSONLoader(); 
 
     loader.load("http://www.amdesigngroup.com/clients/AM_6292_Learning/models/circle.json", function(geometry){ 
 
      var material = new THREE.MeshLambertMaterial({color: 0x55B663}); 
 
      mesh = new THREE.Mesh(geometry, material); 
 
      mesh.translation = THREE.GeometryUtils.center(geometry); 
 
      /*mesh.rotation.x = 0;*/ 
 
      scene.add(mesh); 
 
      
 
      animate(mesh); 
 
     }); 
 

 
     // Add OrbitControls so that we can pan around with the mouse. 
 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 
 

 
     } 
 
     
 
     /* rotate mesh */ 
 
     function animate(mesh) { 
 
     var tween = new TWEEN.Tween(mesh.rotation) 
 
      .to({ z: "-" + Math.PI/2}, 2500) // relative animation 
 
      .onComplete(function() { 
 
       // Check that the full 360 degrees of rotation, 
 
       // and calculate the remainder of the division to avoid overflow. 
 
       if (Math.abs(mesh.rotation.z)>=2*Math.PI) { 
 
        mesh.rotation.y = mesh.rotation.z % (2*Math.PI); 
 
       } 
 
      }) 
 
      .start(); 
 
     tween.repeat(Infinity) 
 
     } 
 
     
 
     // Renders the scene and updates the render as needed. 
 
     function run() { 
 

 
     // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 
 
     requestAnimationFrame(run); 
 
     TWEEN.update(); 
 
     
 
     // Render the scene. 
 
     renderer.render(scene, camera); 
 
     controls.update(); 
 
     } 
 

 
    </script> 
 
    </body> 
 
</html>

來源

2016-11-17 15:33:43 Mary7678

另一種選擇是增加cameraControls到您的相機

THREE.OrbitControls：添加orbitControls到您的相機定義的lookAt目標位置並讓相機自動旋轉不停

camera.lookAt(scene.position); 
cameraControl = new THREE.OrbitControls(camera); 
cameraControl.autoRotate = true;

scene.postion是這個案例將成爲渲染世界空間的中心。您可以調整旋轉的速度使用

cameraControl.autoRotateSpeed = //value

來源

2016-11-17 07:24:33 NikhilSN

有趣的解決方案，@NikhilSN！我只是想出瞭如何讓對象旋轉，所以我可能不會嘗試這個時間，但這可能會在未來派上用場！非常感謝！！！ – Mary7678

沒問題。無論如何你都歡迎 – NikhilSN

如何使用.json文件加載的three.js中的網格旋轉動畫？

回答

相關問題