Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
136 lines (99 sloc) 3.53 KB
<!DOCTYPE html>
<html>
<head>
<title>WebVR Tutorial: Step 3</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;
}
button {
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<button id="startVR">Start VR</button>
<script src="lib/webvr-polyfill.js"></script>
<script src="lib/three.min.js"></script>
<script src="lib/VRControls.js"></script>
<script src="lib/VREffect.js"></script>
<script>
var scene, camera, renderer;
var controls, effect;
var vrDisplay;
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();
document.body.appendChild( renderer.domElement );
// Set VR controls
controls = new THREE.VRControls( camera );
// Apply VR stereo rendering to renderer.
effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
// Look for available VR devices
navigator.getVRDisplays().then(function(displays) {
if (displays.length > 0) {
// set vrDisplay variable as the first device
vrDisplay = displays[0];
}
});
// 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;
}
// Controls need updating every frame
controls.update();
// Render the scene
effect.render( scene, camera );
}
// Resize the renderer canvas
function onResize() {
effect.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
// Start the VR if button is clicked
document.querySelector('#startVR').addEventListener('click', function() {
vrDisplay.requestPresent([{source: renderer.domElement}]);
});
// Resize the renderer canvas when going in or out of VR mode
window.addEventListener('vrdisplaypresentchange', onResize);
// Resize the renderer canvas if the browser window size changes
window.addEventListener('resize', onResize);
</script>
</body>
</html>