如何在从.json文件加载的three.js中为网格旋转设置动画？
[英]How can I animate a mesh rotation in three.js loaded from a .json file?
问题描述
I am just learning three.js and am struggling to animate an object. 
我只是在学习three.js，正在努力为对象制作动画。
I need to be able to load a .json file (exported from Blender) and have the object rotate horizontally continually (as an animation), kind of like this example . 我需要能够加载.json文件（从Blender导出），并使对象连续水平旋转（作为动画），类似于本示例 。 Rotating the scene could also work. 旋转场景也可以。
Most solutions I've seen involve rotating the mesh, but any time I try to reference the mesh variable, I get a console error that it is undefined or null (depending on whether I initialize it or not), which I assume is because it is only used inside of my .json loader. 我见过的大多数解决方案都涉及旋转网格，但是每当我尝试引用mesh变量时，都会收到一个控制台错误，该错误是undefined或null（取决于是否初始化），我认为这是因为仅在我的.json加载器内使用。 Another solution suggested referencing the scene, but that gives me an error "Disallowing antialiased backbuffers due to blacklisting." 另一个解决方案建议参考场景，但这给我一个错误“由于黑名单而不允许使用抗锯齿的后备缓冲区”。
The code I currently have is: 我目前拥有的代码是：
<!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>
As posted, it will display, but not animate, the model - various sections that are commented out are my failed attempts to accomplish a rotation animation. 发布后，它将显示但不制作动画模型-被注释掉的各个部分是我完成旋转动画的失败尝试。
Can anyone give me some pointers? 谁能给我一些指导？
2 个解决方案
解决方案1
0 2016-11-17 07:24:33
Another option is adding cameraControls to your camera 另一种选择是将cameraControls添加到您的相机
THREE.OrbitControls: add orbitControls to your camera define a lookAt target position and allow the camera to automatically rotate constantly THREE.OrbitControls：向相机添加orbitControls定义lookAt目标位置，并允许相机自动不断旋转
camera.lookAt(scene.position);
cameraControl = new THREE.OrbitControls(camera);
cameraControl.autoRotate = true;
scene.postion is this case would be the centre of your rendering world space. scene.postion在这种情况下将成为渲染世界空间的中心。 Your can adjust the speed of the rotation using 您可以使用以下命令调整旋转速度
cameraControl.autoRotateSpeed = //value
解决方案2
0 已采纳 2016-11-17 15:33:43
I found the solution! 我找到了解决方案！ Thanks to one article that used a function called within the loader, passing the object as a variable, I was able to access the object. 由于有一篇文章使用了加载器中调用的函数，并将对象作为变量传递，因此我能够访问该对象。 Then this StackOverflow post used Tween to create an animation. 然后， 此StackOverflow帖子使用Tween创建动画。 I was able to modify that code to get the rotation that I was looking for. 我能够修改该代码以获取所需的旋转方式。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.