Skip to content

Commit

Permalink
Updated webvr examples to latest API
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Jun 16, 2017
1 parent bf2b9c2 commit 39dac1b
Show file tree
Hide file tree
Showing 11 changed files with 96 additions and 147 deletions.
16 changes: 6 additions & 10 deletions examples/webvr_cubes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@

<script src="../build/three.js"></script>

<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>

<script>
Expand All @@ -41,7 +39,6 @@

var container;
var camera, scene, raycaster, renderer;
var effect, controls;

var room;
var isMouseDown = false;
Expand Down Expand Up @@ -129,11 +126,12 @@
renderer.sortObjects = false;
container.appendChild( renderer.domElement );

controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
renderer.vr.enabled = true;

WEBVR.getVRDisplay( function ( display ) {

renderer.vr.setDevice( display );

document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

} );
Expand Down Expand Up @@ -166,16 +164,15 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

effect.requestAnimationFrame( animate );
render();
renderer.animate( render );

}

Expand Down Expand Up @@ -261,8 +258,7 @@

}

controls.update();
effect.render( scene, camera );
renderer.render( scene, camera );

}

Expand Down
9 changes: 5 additions & 4 deletions examples/webvr_daydream.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
var INTERSECTED;

init();
animate();

function init() {

Expand Down Expand Up @@ -118,7 +119,6 @@
container.appendChild( renderer.domElement );

renderer.vr.enabled = true;
renderer.animate( update );

//

Expand Down Expand Up @@ -164,15 +164,16 @@

//

function update() {
function animate() {

gamepad.update();
render();
renderer.animate( render );

This comment has been minimized.

Sign in to view

Copy link
@fernandojsg

fernandojsg Jun 16, 2017

Collaborator

@mrdoob I'm not sure I like that name, calling animate with the render tick sounds strange for me, maybe something like update or tick?

This comment has been minimized.

Sign in to view

Copy link
@mrdoob

mrdoob Jun 16, 2017

Author Owner

Let's discuss it on #11301

}

function render() {

gamepad.update();

var delta = clock.getDelta() * 60;

// find intersections
Expand Down
20 changes: 10 additions & 10 deletions examples/webvr_panorama.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@
<body>
<script src="../build/three.js"></script>

<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>

<script>
Expand All @@ -34,7 +32,6 @@
//

var camera;
var effect, controls;
var renderer;
var scene;

Expand All @@ -48,16 +45,17 @@
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.vr.enabled = true;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.layers.enable( 1 );

controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );

WEBVR.getVRDisplay( function ( display ) {

renderer.vr.setDevice( display );

document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

} );
Expand Down Expand Up @@ -137,17 +135,19 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

controls.update();
renderer.animate( render );

}

effect.render( scene, camera );
function render() {

effect.requestAnimationFrame( animate );
renderer.render( scene, camera );

}

Expand Down
22 changes: 9 additions & 13 deletions examples/webvr_rollercoaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@

<script src="js/RollerCoaster.js"></script>

<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>

<script>
Expand All @@ -45,6 +43,8 @@
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.vr.enabled = true;

var scene = new THREE.Scene();

var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
Expand Down Expand Up @@ -186,11 +186,10 @@

//

var controls = new THREE.VRControls( camera );
var effect = new THREE.VREffect( renderer );

WEBVR.getVRDisplay( function ( display ) {

renderer.vr.setDevice( display );

document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

} );
Expand All @@ -202,7 +201,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );

}, false );

Expand All @@ -218,10 +217,9 @@

var prevTime = performance.now();

function animate( time ) {

effect.requestAnimationFrame( animate );
function render() {

var time = performance.now();
var delta = time - prevTime;

for ( var i = 0; i < funfairs.length; i ++ ) {
Expand Down Expand Up @@ -249,15 +247,13 @@

//

controls.update();

effect.render( scene, camera );
renderer.render( scene, camera );

prevTime = time;

}

effect.requestAnimationFrame( animate );
renderer.animate( render );

</script>

Expand Down
19 changes: 7 additions & 12 deletions examples/webvr_sandbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@

<script src="../build/three.js"></script>

<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>

<script src="js/Mirror.js"></script>
Expand All @@ -34,7 +32,6 @@
//

var camera, scene, renderer;
var effect, controls;

var mirror;

Expand Down Expand Up @@ -114,13 +111,14 @@
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );

//
renderer.vr.enabled = true;

controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
//

WEBVR.getVRDisplay( function ( display ) {

renderer.vr.setDevice( display );

document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

} );
Expand All @@ -136,14 +134,13 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

effect.requestAnimationFrame( animate );
render();
renderer.animate( render );

}

Expand All @@ -154,9 +151,7 @@
mesh.rotation.x = time * 2;
mesh.rotation.y = time * 5;

controls.update();

effect.render( scene, camera );
renderer.render( scene, camera );

}

Expand Down
23 changes: 7 additions & 16 deletions examples/webvr_video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@

<script src="../build/three.js"></script>

<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>

<script>
Expand All @@ -51,8 +49,6 @@
var camera, scene, renderer;
var video, texture;

var controls, effect;

init();
animate();

Expand Down Expand Up @@ -142,16 +138,14 @@
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

//

controls = new THREE.VRControls( camera );
renderer.vr.enabled = true;

effect = new THREE.VREffect( renderer );
effect.scale = 0; // video doesn't need eye separation
effect.setSize( window.innerWidth, window.innerHeight );
//

WEBVR.getVRDisplay( function ( display ) {

renderer.vr.setDevice( display );

document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

} );
Expand All @@ -168,22 +162,19 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

effect.requestAnimationFrame( animate );
render();
renderer.animate( render );

}

function render() {

controls.update();

effect.render( scene, camera );
renderer.render( scene, camera );

}

Expand Down
Loading

0 comments on commit 39dac1b

Please sign in to comment.