Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (61 sloc) 2.14 KB
<!DOCTYPE html>
<html>
<head>
<title>WebVR Tutorial: Step 1</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="lib/three.min.js"></script>
<script>
var scene, camera, renderer;
var numCubes = 100; // Number of cubes in the scene
var fieldRange = 1500; // The range in 3D space the cubes will be placed
var cubes = []; // Array to hold cube meshes
init();
animate();
function init() {
var material, geometry, mesh;
// This is your standard three.js set up
// Create a scene, camera and a renderer
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Create a bunch of cubes
for (var i = 0; i < numCubes; i++) {
// Standard three.js to create a cube
// Each cube needs a material and geometry which is used to create a mesh
material = new THREE.MeshNormalMaterial();
geometry = new THREE.BoxGeometry( 50, 50, 50 );
mesh = new THREE.Mesh( geometry, material );
// Give each cube a random position
mesh.position.x = (Math.random() * fieldRange) - fieldRange/2;
mesh.position.y = (Math.random() * fieldRange) - fieldRange/2;
mesh.position.z = (Math.random() * fieldRange) - fieldRange/2;
// Add cube to scene
scene.add(mesh);
// Add mesh to global array for use later
cubes.push(mesh);
}
}
// Standard way to run an animation in JS
// Using requestAnimationFrame
function animate() {
requestAnimationFrame( animate );
// Every frame, update each cube's rotation
for (var i = 0; i < numCubes; i++) {
cubes[i].rotation.x += 0.01;
cubes[i].rotation.y += 0.02;
}
// Render the scene
renderer.render( scene, camera );
}
</script>
</body>
</html>