WebGL (pt. 4) - Animation

// Animating a Three.js scene: the render loop. // The key to animating your 3D scene is to create a render loop with a requestAnimationFrame function, and rendering your scene within the loop. // a render loop function render() { requestAnimationFrame(render); // render the scene renderer.render(scene, camera); }; // Incorporating a tweening library in to your 3D Scene // initial scene on codepen -> http://codepen.io/rachsmith/pen/KzrarL // Get the list of vertices from the mesh. function getOriginalVerticePositions() { // go through each vertice geometry and store their position in an array for (var i = 0, l = geometry.vertices.length; i<l; i++) { verticePositions.push({x: geometry.vertices[i].x, y: geometry.vertices[i].y}); } } // give vertices a new random position, using GSAP TweenLite function getNewVertices() { /* this function returns an array of vertice positions which are randomised from the original vertice position */ var newVertices = []; for (var i = 0, l = geometry.vertices.length; i<l; i++) { newVertices[i] = { x: verticePositions[i].x -5 + Math.random()*10, y: verticePositions[i].y -5 + Math.random()*10 } } return newVertices; } function tweenIcosahedron() { var newVerticePositions = getNewVertices(); // tween each vertice to their new position for (var i = 0; i < geometry.vertices.length; i++) { tweenVertice(i, newVerticePositions); } } function tweenVertice(i, newVerticePositions) { // set the tween TweenLite.to(geometry.vertices[i], 1, {x: newVerticePositions[i].x, y: newVerticePositions[i].y, ease: Back.easeInOut, onComplete: function() { // start the icosahedron tween again now the animation is complete if (i === 0) tweenIcosahedron(); }}); } // on codepen -> http://codepen.io/rachsmith/pen/WwYRmm // add the rotation of the mesh // the new tween function function tweenIcosohedron() { // create a random rotation aount var rotation = {x: Math.random()*3, y: Math.random()*3, z: Math.random()*3}; // tween the mesh's rotation property to the new position TweenLite.to(mesh.rotation, 1, {x: rotation.x, y: rotation.y, z: rotation.z, ease: Back.easeInOut, onComplete: tweenIcosohedron}); var newVerticePositions = getNewVertices(); for (var i = 0; i < geometry.vertices.length; i++) { tweenVertice(i, newVerticePositions); } } // on codepen -> http://codepen.io/rachsmith/pen/RaqKpg // Animating the scene's camera // initial scene on codepen -> http://codepen.io/rachsmith/pen/jqQBdM // move camera function updateCamPosition() { // rotate our camera's position on the z/y axis angle += 0.005; var z = 100 * Math.cos(angle); var y = 100 * Math.sin(angle); camera.position.z = z; camera.position.y = y; /* rotate the camera so the angle it faces animates - there's no exact science to this - I just picked a random percentage of the z position */ camera.rotation.x = z*0.02; } // move every rock mesh Rock.prototype.rotate = function() { this.mesh.rotation.x += this.vr.x; this.mesh.rotation.y += this.vr.y; } // on codepen -> http://codepen.io/rachsmith/pen/EKLVvp