Главная Обзор Помощь
Вход
javascript
/
three.js
зеркало из https://github.com/tazdij/three.js.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Updated webvr examples to latest API

Mr.doob 8 лет назад
Родитель
bf2b9c2f2e
Сommit
39dac1b647
11 измененных файлов с 96 добавлено и 147 удалено
Разделённый вид Показать статистику Diff
  1. 6 10
      examples/webvr_cubes.html
  2. 5 4
      examples/webvr_daydream.html
  3. 10 10
      examples/webvr_panorama.html
  4. 9 13
      examples/webvr_rollercoaster.html
  5. 7 12
      examples/webvr_sandbox.html
  6. 7 16
      examples/webvr_video.html
  7. 11 17
      examples/webvr_vive.html
  8. 9 15
      examples/webvr_vive_camerarig.html
  9. 9 15
      examples/webvr_vive_dragging.html
  10. 14 20
      examples/webvr_vive_paint.html
  11. 9 15
      examples/webvr_vive_sculpt.html

+ 6 - 10
examples/webvr_cubes.html
Просмотреть файл 

@@ -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>
 
@@ -41,7 +39,6 @@
 
 
 			var container;
 
 			var camera, scene, raycaster, renderer;
 
-			var effect, controls;
 
 
 			var room;
 
 			var isMouseDown = false;
 
@@ -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 ) );
 
 
 				} );
 
@@ -166,7 +164,7 @@
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();
 
 
-				effect.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 			}
 
 
@@ -174,8 +172,7 @@
 
 
 			function animate() {
 
 
-				effect.requestAnimationFrame( animate );
 
-				render();
 
+				renderer.animate( render );
 
 
 			}
 
 
@@ -261,8 +258,7 @@
 
 
 				}
 
 
-				controls.update();
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}

+ 5 - 4
examples/webvr_daydream.html
Просмотреть файл 

@@ -47,6 +47,7 @@
 
 			var INTERSECTED;
 
 
 			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -118,7 +119,6 @@
 
 				container.appendChild( renderer.domElement );
 
 
 				renderer.vr.enabled = true;
 
-				renderer.animate( update );
 
 
 				//
 
 
@@ -164,15 +164,16 @@
 
 
 			//
 
 
-			function update() {
 
+			function animate() {
 
 
-				gamepad.update();
 
-				render();
 
+				renderer.animate( render );
 
 
 			}
 
 
 			function render() {
 
 
+				gamepad.update();
 
+
 
 				var delta = clock.getDelta() * 60;
 
 
 				// find intersections

+ 10 - 10
examples/webvr_panorama.html
Просмотреть файл 

@@ -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>
 
@@ -34,7 +32,6 @@
 
 		//
 
 
 		var camera;
 
-		var effect, controls;
 
 		var renderer;
 
 		var scene;
 
 
@@ -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 ) );
 
 
 			} );
 
@@ -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 );
 
 
 		}

+ 9 - 13
examples/webvr_rollercoaster.html
Просмотреть файл 

@@ -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>
 
@@ -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 );
 
@@ -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 ) );
 
 
 			} );
 
@@ -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 );
 
 
@@ -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 ++ ) {
 
@@ -249,15 +247,13 @@
 
 
 				//
 
 
-				controls.update();
 
-
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 				prevTime = time;
 
 
 			}
 
 
-			effect.requestAnimationFrame( animate );
 
+			renderer.animate( render );
 
 
 		</script>

+ 7 - 12
examples/webvr_sandbox.html
Просмотреть файл 

@@ -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>
 
@@ -34,7 +32,6 @@
 
 			//
 
 
 			var camera, scene, renderer;
 
-			var effect, controls;
 
 
 			var mirror;
 
 
@@ -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 ) );
 
 
 				} );
 
@@ -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 );
 
 
 			}
 
 
@@ -154,9 +151,7 @@
 
 				mesh.rotation.x = time * 2;
 
 				mesh.rotation.y = time * 5;
 
 
-				controls.update();
 
-
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}

+ 7 - 16
examples/webvr_video.html
Просмотреть файл 

@@ -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>
 
@@ -51,8 +49,6 @@
 
 			var camera, scene, renderer;
 
 			var video, texture;
 
 
-			var controls, effect;
 
-
 
 			init();
 
 			animate();
 
 
@@ -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 ) );
 
 
 				} );
 
@@ -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 );
 
 
 			}

+ 11 - 17
examples/webvr_vive.html
Просмотреть файл 

@@ -21,8 +21,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/ViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
@@ -42,7 +40,6 @@
 
 
 			var container;
 
 			var camera, scene, renderer;
 
-			var effect, controls;
 
 			var controller1, controller2;
 
 
 			var room;
 
@@ -165,17 +162,17 @@
 
 				renderer.sortObjects = false;
 
 				container.appendChild( renderer.domElement );
 
 
-				controls = new THREE.VRControls( camera );
 
-				controls.standing = true;
 
+				renderer.vr.enabled = true;
 
+				renderer.vr.standing = true;
 
 
 				// controllers
 
 
 				controller1 = new THREE.ViveController( 0 );
 
-				controller1.standingMatrix = controls.getStandingMatrix();
 
+				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
 				scene.add( controller1 );
 
 
 				controller2 = new THREE.ViveController( 1 );
 
-				controller2.standingMatrix = controls.getStandingMatrix();
 
+				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
 				scene.add( controller2 );
 
 
 				var loader = new THREE.OBJLoader();
 
@@ -194,10 +191,10 @@
 
 
 				} );
 
 
-				effect = new THREE.VREffect( renderer );
 
-
 
 				WEBVR.getVRDisplay( function ( display ) {
 
 
+					renderer.vr.setDevice( display );
 
+
 
 					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
 
 				} );
 
@@ -213,19 +210,18 @@
 
 				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() {
 
 
 				var delta = clock.getDelta() * 60;
 
@@ -233,8 +229,6 @@
 
 				controller1.update();
 
 				controller2.update();
 
 
-				controls.update();
 
-
 
 				for ( var i = 0; i < room.children.length; i ++ ) {
 
 
 					var cube = room.children[ i ];
 
@@ -268,7 +262,7 @@
 
 
 				}
 
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}

+ 9 - 15
examples/webvr_vive_camerarig.html
Просмотреть файл 

@@ -21,8 +21,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/ViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
@@ -42,7 +40,6 @@
 
 
 			var container;
 
 			var cameraRig, camera, scene, renderer;
 
-			var effect, controls;
 
 			var controller1, controller2;
 
 			var scale = 1;
 
 			var dragging = {
 
@@ -174,19 +171,19 @@
 
 				renderer.sortObjects = false;
 
 				container.appendChild( renderer.domElement );
 
 
-				controls = new THREE.VRControls( camera );
 
-				controls.standing = true;
 
+				renderer.vr.enabled = true;
 
+				renderer.vr.standing = true;
 
 
 				// controllers
 
 
 				controller1 = new THREE.ViveController( 0 );
 
-				controller1.standingMatrix = controls.getStandingMatrix();
 
+				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
 				controller1.addEventListener( 'triggerdown', onTriggerDown );
 
 				controller1.addEventListener( 'triggerup', onTriggerUp );
 
 				cameraRig.add( controller1 );
 
 
 				controller2 = new THREE.ViveController( 1 );
 
-				controller2.standingMatrix = controls.getStandingMatrix();
 
+				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
 				controller2.addEventListener( 'triggerdown', onTriggerDown );
 
 				controller2.addEventListener( 'triggerup', onTriggerUp );
 
 				cameraRig.add( controller2 );
 
@@ -207,10 +204,10 @@
 
 
 				} );
 
 
-				effect = new THREE.VREffect( renderer );
 
-
 
 				WEBVR.getVRDisplay( function ( display ) {
 
 
+					renderer.vr.setDevice( display );
 
+
 
 					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
 
 				} );
 
@@ -226,7 +223,7 @@
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();
 
 
-				effect.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 			}
 
 
@@ -234,8 +231,7 @@
 
 
 			function animate() {
 
 
-				effect.requestAnimationFrame( animate );
 
-				render();
 
+				renderer.animate( render );
 
 
 			}
 
 
@@ -246,8 +242,6 @@
 
 				controller1.update();
 
 				controller2.update();
 
 
-				controls.update();
 
-
 
 				scaleUpdate();
 
 
 				for ( var i = 0; i < room.children.length; i ++ ) {
 
@@ -283,7 +277,7 @@
 
 
 				}
 
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}

+ 9 - 15
examples/webvr_vive_dragging.html
Просмотреть файл 

@@ -21,8 +21,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/ViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
@@ -40,7 +38,6 @@
 
 
 			var container;
 
 			var camera, scene, renderer;
 
-			var effect, controls;
 
 			var controller1, controller2;
 
 
 			var raycaster, intersected = [];
 
@@ -142,19 +139,19 @@
 
 				renderer.gammaOutput = true;
 
 				container.appendChild( renderer.domElement );
 
 
-				controls = new THREE.VRControls( camera );
 
-				controls.standing = true;
 
+				renderer.vr.enabled = true;
 
+				renderer.vr.standing = true;
 
 
 				// controllers
 
 
 				controller1 = new THREE.ViveController( 0 );
 
-				controller1.standingMatrix = controls.getStandingMatrix();
 
+				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
 				controller1.addEventListener( 'triggerdown', onTriggerDown );
 
 				controller1.addEventListener( 'triggerup', onTriggerUp );
 
 				scene.add( controller1 );
 
 
 				controller2 = new THREE.ViveController( 1 );
 
-				controller2.standingMatrix = controls.getStandingMatrix();
 
+				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
 				controller2.addEventListener( 'triggerdown', onTriggerDown );
 
 				controller2.addEventListener( 'triggerup', onTriggerUp );
 
 				scene.add( controller2 );
 
@@ -193,10 +190,10 @@
 
 
 				//
 
 
-				effect = new THREE.VREffect( renderer );
 
-
 
 				WEBVR.getVRDisplay( function ( display ) {
 
 
+					renderer.vr.setDevice( display );
 
+
 
 					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
 
 				} );
 
@@ -212,7 +209,7 @@
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();
 
 
-				effect.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 			}
 
 
@@ -312,8 +309,7 @@
 
 
 			function animate() {
 
 
-				effect.requestAnimationFrame( animate );
 
-				render();
 
+				renderer.animate( render );
 
 
 			}
 
 
@@ -322,14 +318,12 @@
 
 				controller1.update();
 
 				controller2.update();
 
 
-				controls.update();
 
-
 
 				cleanIntersected();
 
 
 				intersectObjects( controller1 );
 
 				intersectObjects( controller2 );
 
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}

+ 14 - 20
examples/webvr_vive_paint.html
Просмотреть файл 

@@ -21,8 +21,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/ViveController.js"></script>
 
 		<script src="js/vr/PaintViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
@@ -41,7 +39,6 @@
 
 
 			var container;
 
 			var camera, scene, renderer;
 
-			var effect, controls;
 
 			var controller1, controller2;
 
 
 			var line;
 
@@ -142,19 +139,19 @@
 
 				renderer.gammaOutput = true;
 
 				container.appendChild( renderer.domElement );
 
 
-				controls = new THREE.VRControls( camera );
 
-				controls.standing = true;
 
+				renderer.vr.enabled = true;
 
+				renderer.vr.standing = true;
 
 
 				// controllers
 
 
 				controller1 = new THREE.PaintViveController( 0 );
 
-				controller1.standingMatrix = controls.getStandingMatrix();
 
+				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
 				controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 
 				controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 
 				scene.add( controller1 );
 
 
 				controller2 = new THREE.PaintViveController( 1 );
 
-				controller2.standingMatrix = controls.getStandingMatrix();
 
+				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
 				controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 
 				controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 
 				scene.add( controller2 );
 
@@ -188,10 +185,10 @@
 
 
 				} );
 
 
-				effect = new THREE.VREffect( renderer );
 
-
 
 				WEBVR.getVRDisplay( function ( display ) {
 
 
+					renderer.vr.setDevice( display );
 
+
 
 					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
 
 				} );
 
@@ -387,19 +384,12 @@
 
 				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();
 
-
 
-			}
 
-
 
 			function handleController( controller ) {
 
 
 				controller.update();
 
@@ -435,9 +425,13 @@
 
 
 			}
 
 
-			function render() {
 
+			function animate() {
 
+
 
+				renderer.animate( render );
 
 
-				controls.update();
 
+			}
 
+
 
+			function render() {
 
 
 				var count = line.geometry.drawRange.count;
 
 
@@ -446,7 +440,7 @@
 
 
 				updateGeometry( count, line.geometry.drawRange.count );
 
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}

+ 9 - 15
examples/webvr_vive_sculpt.html
Просмотреть файл 

@@ -21,8 +21,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/ViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
@@ -41,7 +39,6 @@
 
 
 			var container;
 
 			var camera, scene, renderer;
 
-			var effect, controls;
 
 			var controller1, controller2;
 
 
 			var blob, vector;
 
@@ -124,17 +121,17 @@
 
 				renderer.gammaOutput = true;
 
 				container.appendChild( renderer.domElement );
 
 
-				controls = new THREE.VRControls( camera );
 
-				controls.standing = true;
 
+				renderer.vr.enabled = true;
 
+				renderer.vr.standing = true;
 
 
 				// controllers
 
 
 				controller1 = new THREE.ViveController( 0 );
 
-				controller1.standingMatrix = controls.getStandingMatrix();
 
+				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
 				scene.add( controller1 );
 
 
 				controller2 = new THREE.ViveController( 1 );
 
-				controller2.standingMatrix = controls.getStandingMatrix();
 
+				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
 				scene.add( controller2 );
 
 
 				var loader = new THREE.OBJLoader();
 
@@ -166,10 +163,10 @@
 
 
 				} );
 
 
-				effect = new THREE.VREffect( renderer );
 
-
 
 				WEBVR.getVRDisplay( function ( display ) {
 
 
+					renderer.vr.setDevice( display );
 
+
 
 					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
 
 
 				} );
 
@@ -223,7 +220,7 @@
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();
 
 
-				effect.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 			}
 
 
@@ -231,8 +228,7 @@
 
 
 			function animate() {
 
 
-				effect.requestAnimationFrame( animate );
 
-				render();
 
+				renderer.animate( render );
 
 
 			}
 
 
@@ -329,9 +325,7 @@
 
 
 				updateBlob();
 
 
-				controls.update();
 
-
 
-				effect.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
 			}