<div>If you copied the code from above into the HTML file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a <strong>render loop</strong>.</div>
<div>If you copied the code from above into the HTML file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a <strong>render or animate loop</strong>.</div>
<code>
function render() {
requestAnimationFrame( render );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
render();
animate();
</code>
<div>This will create a loop that causes the renderer to draw the scene 60 times per second. If you're new to writing games in the browser, you might say "why don't we just create a <strong>setInterval</strong>? The thing is - we could, but <strong>requestAnimationFrame</strong> has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.</div>
...
...
@@ -102,14 +102,14 @@
<div>If you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.</div>
<div>Add the following right above the <strong>renderer.render</strong> call in your <strong>render</strong> function:</div>
<div>Add the following right above the <strong>renderer.render</strong> call in your <strong>animate</strong> function:</div>
<code>
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
</code>
<div>This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the render loop. You can of course call other functions from there, so that you don't end up with a <strong>render</strong> function that's hundreds of lines.
<div>This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animate loop. You can of course call other functions from there, so that you don't end up with a <strong>animate</strong> function that's hundreds of lines.
