Improved webgl_raycast_sprite.

examples/webgl_raycast_sprite.html

@@ -7,6 +7,10 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
+
 				margin: 0px;
 				background-color: #fff;
 				overflow: hidden;
@@ -16,6 +20,7 @@
 				position: absolute;
 				z-index: 1;
 				width: 100%;
+				padding: 5px;
 				text-align: center;
 			}
 		</style>
@@ -25,11 +30,9 @@
 	<script src="../build/three.js"></script>
 	<script src="./js/controls/OrbitControls.js"></script>
 	<script>
-        var renderer;
-        var scene;
-        var spriteGroup;
-        var camera;
-        var controls;
+
+		var renderer, scene, camera;
+		var controls, group;
 
 		init();
 		animate();
@@ -37,17 +40,17 @@
 		function init() {
 
 			// init renderer
-            renderer = new THREE.WebGLRenderer( {
-                antialias: true
-            } );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
-            renderer.setClearColor( 0xFFFFFF, 1.0 );
 
 			// init scene
 			scene = new THREE.Scene();
-            spriteGroup = new THREE.Object3D();
-            scene.add( spriteGroup );
+			scene.background = new THREE.Color( 0xffffff );
+
+			group = new THREE.Group();
+			scene.add( group );
 
 			// init camera
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -58,45 +61,37 @@
 			controls.enableRotate = true;
 
 			// add sprites
-            var sprite;
 
-            sprite = makeSprite( '#69f', spriteGroup );
+			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
 			sprite.position.set( 6, 5, 5 );
 			sprite.scale.set( 2, 5, 1 );
+			group.add( sprite );
 
-            sprite = makeSprite( '#69f', spriteGroup );
+			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
+			sprite.material.rotation = Math.PI / 3 * 4;
 			sprite.position.set( 8, - 2, 2 );
 			sprite.center.set( 0.5, 0 );
 			sprite.scale.set( 1, - 5, 1 );
-            sprite.material.rotation = Math.PI / 3 * 4;
+			group.add( sprite );
 
-            var g = new THREE.Object3D();
-            spriteGroup.add( g );
-            g.scale.set( 1, 2, 1 );
-            g.position.set( - 5, 0, 0 );
-            g.rotation.set( Math.PI / 2, 0, 0 );
+			var group2 = new THREE.Object3D();
+			group2.scale.set( 1, 2, 1 );
+			group2.position.set( - 5, 0, 0 );
+			group2.rotation.set( Math.PI / 2, 0, 0 );
+			group.add( group2 );
 
-            sprite = makeSprite( '#69f', g );
+			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
 			sprite.position.set( 0, 2, 5 );
 			sprite.scale.set( 10, 2, 3 );
 			sprite.center.set( - 0.1, 0 );
 			sprite.material.rotation = Math.PI / 3;
+			group2.add( sprite );
 
 			window.addEventListener( 'resize', onWindowResize, false );
 			window.addEventListener( "mousemove", onDocumentMouseMove, false );
 
 		}
 
-        function makeSprite( color, parent ) {
-
-            var sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
-                color: color
-            } ) );
-            parent.add( sprite );
-            return sprite;
-
-        }
-
 		function animate() {
 
 			renderer.render( scene, camera );
@@ -150,12 +145,13 @@
 
 		function getIntersects( x, y ) {
 
-            mouseVector.set(
-                ( x / window.innerWidth ) * 2 - 1, - ( y / window.innerHeight ) * 2 + 1,
-                0.5 );
+			x = ( x / window.innerWidth ) * 2 - 1;
+			y = - ( y / window.innerHeight ) * 2 + 1;
+
+			mouseVector.set( x, y, 0.5 );
 			raycaster.setFromCamera( mouseVector, camera );
-            var intersects = raycaster.intersectObjects( [ spriteGroup ], true );
-            return intersects;
+
+			return raycaster.intersectObject( group, true );
 
 		}
 	</script>

examples/webgl_raycast_texture.html

@@ -7,9 +7,9 @@
 		<style>
 			body {
 				color: #808080;
-				font-family:Monospace;
-				font-size:13px;
-				text-align:center;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
 
 				background-color: #ffffff;
 				margin: 0px;