Improved daydream and gearvr examples.

examples/webvr_daydream.html

@@ -31,13 +31,11 @@
 			var clock = new THREE.Clock();
 
 			var container;
-			var camera, scene, ray, raycaster, renderer;
+			var camera, scene, renderer;
 			var controller;
 
 			var room;
 
-			var INTERSECTED;
-
 			init();
 			animate();
 
@@ -54,13 +52,8 @@
 				info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - daydream';
 				container.appendChild( info );
 
-				var background = new THREE.CubeTextureLoader()
-					.setPath( 'textures/cube/MilkyWay/' )
-					.load( [ 'dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg' ] );
-				background.format = THREE.RGBFormat;
-
 				scene = new THREE.Scene();
-				scene.background = background;
+				scene.background = new THREE.Color( 0x505050 );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
@@ -77,7 +70,7 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxGeometry( 0.15, 0.15, 0.15 );
+				var geometry = new THREE.IcosahedronGeometry( 0.08, 2 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 
@@ -91,10 +84,6 @@
 					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;
-
 					object.userData.velocity = new THREE.Vector3();
 					object.userData.velocity.x = Math.random() * 0.01 - 0.005;
 					object.userData.velocity.y = Math.random() * 0.01 - 0.005;
@@ -106,10 +95,6 @@
 
 				//
 
-				raycaster = new THREE.Raycaster();
-
-				//
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -128,16 +113,10 @@
 
 				//
 
-				var controllerHelper = new THREE.Line( new THREE.BufferGeometry(), new THREE.LineBasicMaterial( { linewidth: 4 } ) );
+				var controllerHelper = new THREE.Line( new THREE.BufferGeometry(), new THREE.LineBasicMaterial( { linewidth: 2 } ) );
 				controllerHelper.geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 10 ], 3 ) );
 				controller.add( controllerHelper );
 
-				renderer.domElement.addEventListener( 'click', function ( event ) {
-
-					controllerHelper.material.color.setHex( Math.random() * 0xffffff );
-
-				} );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -173,66 +152,44 @@
 					room.remove( cube );
 
 					cube.position.copy( controller.position ).sub( room.position );
-					cube.userData.velocity.x = ( Math.random() - 0.5 ) * 0.02 * delta;
-					cube.userData.velocity.y = ( Math.random() - 0.5 ) * 0.02 * delta;
-					cube.userData.velocity.z = ( Math.random() * 0.01 - 0.05 ) * delta;
+					cube.userData.velocity.x = ( Math.random() - 0.5 ) * 0.02;
+					cube.userData.velocity.y = ( Math.random() - 0.5 ) * 0.02;
+					cube.userData.velocity.z = ( Math.random() * 0.02 - 0.1 );
 					cube.userData.velocity.applyQuaternion( controller.quaternion );
 					room.add( cube );
 
 				}
 
-				// find intersections
-
-				raycaster.ray.origin.copy( controller.position );
-				raycaster.ray.direction.set( 0, 0, - 1 ).applyQuaternion( controller.quaternion );
-
-				var intersects = raycaster.intersectObjects( room.children );
-
-				if ( intersects.length > 0 ) {
-
-					if ( INTERSECTED != intersects[ 0 ].object ) {
-
-						if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
-
-						INTERSECTED = intersects[ 0 ].object;
-						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
-						INTERSECTED.material.emissive.setHex( 0xff0000 );
-
-					}
-
-				} else {
-
-					if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
-
-					INTERSECTED = undefined;
-
-				}
-
 				// keep cubes inside room
 
+				var range = 3 - 0.04;
+
 				for ( var i = 0; i < room.children.length; i ++ ) {
 
 					var cube = room.children[ i ];
 
 					cube.position.add( cube.userData.velocity );
 
-					if ( cube.position.x < - 3 || cube.position.x > 3 ) {
+					if ( cube.position.x < - range || cube.position.x > range ) {
 
-						cube.position.x = THREE.Math.clamp( cube.position.x, - 3, 3 );
+						cube.position.x = THREE.Math.clamp( cube.position.x, - range, range );
 						cube.userData.velocity.x = - cube.userData.velocity.x;
 
 					}
 
-					if ( cube.position.y < - 3 || cube.position.y > 3 ) {
+					if ( cube.position.y < - range ) {
+
+						cube.position.y = Math.max( cube.position.y, - range );
 
-						cube.position.y = THREE.Math.clamp( cube.position.y, - 3, 3 );
-						cube.userData.velocity.y = - cube.userData.velocity.y;
+						cube.userData.velocity.x *= 0.9;
+						cube.userData.velocity.y = - cube.userData.velocity.y * 0.8;
+						cube.userData.velocity.z *= 0.9;
 
 					}
 
-					if ( cube.position.z < - 3 || cube.position.z > 3 ) {
+					if ( cube.position.z < - range || cube.position.z > range ) {
 
-						cube.position.z = THREE.Math.clamp( cube.position.z, - 3, 3 );
+						cube.position.z = THREE.Math.clamp( cube.position.z, - range, range );
 						cube.userData.velocity.z = - cube.userData.velocity.z;
 
 					}
@@ -241,6 +198,8 @@
 					cube.rotation.y += cube.userData.velocity.y * 2 * delta;
 					cube.rotation.z += cube.userData.velocity.z * 2 * delta;
 
+					cube.userData.velocity.y -= 0.00098;
+
 				}
 
 				renderer.render( scene, camera );

examples/webvr_gearvr.html

@@ -34,7 +34,7 @@
 			var clock = new THREE.Clock();
 
 			var container;
-			var camera, camBox, scene, renderer;
+			var camera, scene, renderer;
 			var controller;
 
 			var room;
@@ -73,7 +73,7 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+				var geometry = new THREE.IcosahedronGeometry( 0.08, 2 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 
@@ -90,10 +90,6 @@
 					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;
-
 					object.userData.velocity = new THREE.Vector3();
 					object.userData.velocity.x = Math.random() * 0.01 - 0.005;
 					object.userData.velocity.y = Math.random() * 0.01 - 0.005;
@@ -181,9 +177,9 @@
 					room.remove( cube );
 
 					cube.position.copy( controller.position ).sub( room.position );
-					cube.userData.velocity.x = ( Math.random() - 0.5 ) * 0.02 * delta;
-					cube.userData.velocity.y = ( Math.random() - 0.5 ) * 0.02 * delta;
-					cube.userData.velocity.z = ( Math.random() * 0.01 - 0.05 ) * delta;
+					cube.userData.velocity.x = ( Math.random() - 0.5 ) * 0.02;
+					cube.userData.velocity.y = ( Math.random() - 0.5 ) * 0.02;
+					cube.userData.velocity.z = ( Math.random() * 0.01 - 0.1 );
 					cube.userData.velocity.applyQuaternion( controller.quaternion );
 					room.add( cube );
 
@@ -191,29 +187,34 @@
 
 				// keep cubes inside room
 
+				var range = 3 - 0.04;
+
 				for ( var i = 0; i < room.children.length; i ++ ) {
 
 					var cube = room.children[ i ];
 
 					cube.position.add( cube.userData.velocity );
 
-					if ( cube.position.x < - 3 || cube.position.x > 3 ) {
+					if ( cube.position.x < - range || cube.position.x > range ) {
 
-						cube.position.x = THREE.Math.clamp( cube.position.x, - 3, 3 );
+						cube.position.x = THREE.Math.clamp( cube.position.x, - range, range );
 						cube.userData.velocity.x = - cube.userData.velocity.x;
 
 					}
 
-					if ( cube.position.y < - 3 || cube.position.y > 3 ) {
+					if ( cube.position.y < - range || cube.position.y > range ) {
 
-						cube.position.y = THREE.Math.clamp( cube.position.y, - 3, 3 );
-						cube.userData.velocity.y = - cube.userData.velocity.y;
+						cube.position.y = Math.max( cube.position.y, - range );
+
+						cube.userData.velocity.x *= 0.9;
+						cube.userData.velocity.y = - cube.userData.velocity.y * 0.8;
+						cube.userData.velocity.z *= 0.9;
 
 					}
 
-					if ( cube.position.z < - 3 || cube.position.z > 3 ) {
+					if ( cube.position.z < - range || cube.position.z > range ) {
 
-						cube.position.z = THREE.Math.clamp( cube.position.z, - 3, 3 );
+						cube.position.z = THREE.Math.clamp( cube.position.z, - range, range );
 						cube.userData.velocity.z = - cube.userData.velocity.z;
 
 					}
@@ -222,6 +223,8 @@
 					cube.rotation.y += cube.userData.velocity.y * 2 * delta;
 					cube.rotation.z += cube.userData.velocity.z * 2 * delta;
 
+					cube.userData.velocity.y -= 0.00098;
+
 				}
 
 				renderer.render( scene, camera );