How can I animate a mesh rotation in three.js loaded from a .json file?

Question

I am just learning three.js and am struggling to animate an object.

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. 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. 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?

score 1 · Accepted Answer · edited May 23 '17 at 11:45

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. 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>

score 0 · Answer 2 · answered Nov 17 '16 at 07:24

0

Another option is adding cameraControls to your camera

THREE.OrbitControls: add orbitControls to your camera define a lookAt target position and allow the camera to automatically rotate constantly

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. Your can adjust the speed of the rotation using

cameraControl.autoRotateSpeed = //value

answered Nov 17 '16 at 07:24

NikhilSN

43
1
13

Interesting solution, @NikhilSN! I just figured out how to make the object rotate, so I probably won't try it this time, but this might come in handy in the future! Thank you so much!!! – Mary7678 Nov 17 '16 at 15:30

How can I animate a mesh rotation in three.js loaded from a .json file?

2 Answers2