Skip to content

Instantly share code, notes, and snippets.

@jzitelli

jzitelli/test_VREffect.html

Created September 20, 2015 04:22
Show Gist options
  • Save jzitelli/1188e4f96c0f9494dd15 to your computer and use it in GitHub Desktop.
Save jzitelli/1188e4f96c0f9494dd15 to your computer and use it in GitHub Desktop.
Download ZIP
VREffect example where the camera is child of an object which has dynamic matrixWorld
Raw
test_VREffect.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - native vr demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
.menu {
position: fixed;
bottom: 20px;
right: 20px;
}
.button {
display: inline-block;
padding: 8px;
color: #FFF;
background-color: #555;
}
.button.enabled {
background-color: rgb(18, 36, 70);
}
.button:hover {
cursor: pointer;
background-color: rgb(18, 36, 70);
}
.button.error {
pointer-events: none;
background-color: red;
}
</style>
</head>
<body>
<div class="menu">
<div class="button full-screen">Start VR Mode</div>
</div>
<script src="../build/three.min.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/controls/FlyControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
/*
In both cases the camera is a child of an object that is moving
(magicCarpet in this example, which moves in response to the
FlyControls which are applied to it)
*/
var TEST_CASE;
TEST_CASE = "A"; // the camera's local matrix is dynamic, e.g. controlled by vrControls
// TEST_CASE = "B"; // the camera's local matrix is fixed (less common case, it seems to me, but I still like to handle it)
var magicCarpet;
var flyControls;
var clock = new THREE.Clock();
var container, stats;
var camera, scene, renderer;
var vrEffect;
var vrControls;
var cubes = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes';
container.appendChild( info );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.2, 10000 );
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );
var geometry = new THREE.BoxGeometry( 20, 20, 20 );
for ( var i = 0; i < 2000; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
object.scale.z = Math.random() + 0.5;
scene.add( object );
cubes.push( object );
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
var fullScreenButton = document.querySelector( '.full-screen' );
if ( navigator.getVRDevices === undefined ) {
fullScreenButton.innerHTML = 'Your browser doesn\'t support WebVR';
fullScreenButton.classList.add('error');
}
vrControls = new THREE.VRControls( camera );
vrEffect = new THREE.VREffect( renderer, function ( error ) {
fullScreenButton.innerHTML = error;
fullScreenButton.classList.add('error');
} );
if (TEST_CASE == "A") {
magicCarpet = new THREE.Mesh( new THREE.PlaneGeometry( 1.5, 2 ).rotateX( -Math.PI / 2 ).translate( 0, -1, 0 ) );
} else if (TEST_CASE == "B") {
magicCarpet = new THREE.Mesh( new THREE.PlaneGeometry( 1.5, 2 ).rotateX( -Math.PI / 2 ) );
camera.position.y += 1;
}
magicCarpet.add( camera );
scene.add( magicCarpet );
flyControls = new THREE.FlyControls( magicCarpet );
flyControls.movementSpeed *= 20;
flyControls.rollSpeed *= 10;
fullScreenButton.onclick = function() {
vrEffect.setFullScreen( true );
};
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
vrEffect.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var t = 0;
function render() {
var delta = clock.getDelta();
t += delta;
if ( t > 20 ) {
vrEffect.scale *= 2;
t = 0;
}
flyControls.update( delta );
if (TEST_CASE == "A") {
vrControls.update();
}
vrEffect.render( scene, camera );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment