home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

All canvas examples are now using RequestAnimationFrame.js

Browse Source 
Webgl examples next.
This commit is contained in:
Mr.doob
2011-02-22 01:54:03 +00:00
parent a4ee822b10
commit 5aa43cd1cd
26 changed files with 390 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/canvas_interactive_cubes.html
+18 -6
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - cubes</title>
<title>three.js canvas - interactive - cubes</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -17,6 +17,7 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -25,7 +26,7 @@
var camera, scene, projector, renderer;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -69,7 +70,7 @@
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -112,18 +113,29 @@
*/
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var radius = 600;
var theta = 0;
function loop() {
function render() {
theta += 0.2;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
</script>