CODEWITHSUNDEEP
javascriptanimationthree.js
UID
UID

Reputation: 4514

Remove rotating animation from Three.js Cube

I have created a 3D wireframe cube from Three.js examples, but it keeps rotating,

I want to stop this animation.

Now when I remove the animate(); from the bottom of script, the Canvas doesn't load.

// start animation
animate();
</script>

And when I try to remove animate(); function from :

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });

The animation stops but it takes wierd shape, but not the shape of Cube. Also on every refresh it changes the shape.

Here is my code:

Javascript:

    <script defer="defer">
  // revolutions per second
  var angularSpeed = 0.2; 
var lastTime = 0;

// this function is executed on each animation frame
function animate(){
    // update
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cube.rotation.y += angleChange;
    lastTime = time;

    // render
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
}

// renderer
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;

// scene
var scene = new THREE.Scene();

// cube Length, Height, Width
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 200, 200), new THREE.MeshBasicMaterial({
    wireframe: true,
    color: '#ff0000'
}));
cube.rotation.x = Math.PI * 0.1;
scene.add(cube);

// start animation
animate();
</script>

Here is the Fiddle for the same: http://jsfiddle.net/UsEDt/1/

Let me know if you need any other information.

Please suggest.

Upvotes: 1

Views: 1798

Answers (1)

Prabindh
Prabindh

Reputation: 3504

To stop rotation and keep it constant even if you refresh, all you have to do is comment out the line that makes the angle change. This line:

//cube.rotation.y += angleChange;

For the issue of cube shape - if you really want an unit cube, you need to fix your dimensions accordingly, as well as your window proportions.

Upvotes: 3

Related Questions