Improved webgl_raycast_sprite.

TimeoutY · Jul 31, 2018 · 28f5a8c · 28f5a8c
1 parent a1daef3
commit 28f5a8c
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 120 deletions.
diff --git a/examples/webgl_raycast_sprite.html b/examples/webgl_raycast_sprite.html
@@ -1,163 +1,159 @@
 
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>three.js webgl - raycast - sprite</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 {
-                margin: 0px;
-                background-color: #fff;
-                overflow: hidden;
-            }
-
-            #info{
-                position: absolute;
-                z-index: 1;
-                width: 100%;
-                text-align: center;
-            }
-        </style>
-    </head>
+	<head>
+		<title>three.js webgl - raycast - sprite</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;
+				font-size: 13px;
+				text-align: center;
+
+				margin: 0px;
+				background-color: #fff;
+				overflow: hidden;
+			}
+
+			#info{
+				position: absolute;
+				z-index: 1;
+				width: 100%;
+				padding: 5px;
+				text-align: center;
+			}
+		</style>
+	</head>
 <body>
-    <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raycast sprite<br></div>
-    <script src="../build/three.js"></script>
-    <script src="./js/controls/OrbitControls.js"></script>
-    <script>
-        var renderer;
-        var scene;
-        var spriteGroup;
-        var camera;
-        var controls;
+	<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raycast sprite<br></div>
+	<script src="../build/three.js"></script>
+	<script src="./js/controls/OrbitControls.js"></script>
+	<script>
 
-        init();
-        animate();
+		var renderer, scene, camera;
+		var controls, group;
 
-        function init() {
+		init();
+		animate();
 
-            // init renderer
-            renderer = new THREE.WebGLRenderer( {
-                antialias: true
-            } );
-            renderer.setSize( window.innerWidth, window.innerHeight );
-            document.body.appendChild( renderer.domElement );
-            renderer.setClearColor( 0xFFFFFF, 1.0 );
+		function init() {
 
-            // init scene
-            scene = new THREE.Scene();
-            spriteGroup = new THREE.Object3D();
-            scene.add( spriteGroup );
+			// init renderer
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			document.body.appendChild( renderer.domElement );
 
-            // init camera
-            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-            camera.position.set( 15, 15, 15 );
-            camera.lookAt( scene.position );
+			// init scene
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xffffff );
 
-            controls = new THREE.OrbitControls( camera, renderer.domElement );
-            controls.enableRotate = true;
+			group = new THREE.Group();
+			scene.add( group );
 
-            // add sprites
-            var sprite;
+			// init camera
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera.position.set( 15, 15, 15 );
+			camera.lookAt( scene.position );
 
-            sprite = makeSprite( '#69f', spriteGroup );
-            sprite.position.set( 6, 5, 5 );
-            sprite.scale.set( 2, 5, 1 );
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.enableRotate = true;
 
-            sprite = makeSprite( '#69f', spriteGroup );
-            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;
+			// add sprites
 
-            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 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', g );
-            sprite.position.set( 0, 2, 5 );
-            sprite.scale.set( 10, 2, 3 );
-            sprite.center.set( - 0.1, 0 );
-            sprite.material.rotation = Math.PI / 3;
+			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 );
+			group.add( sprite );
 
-            window.addEventListener( 'resize', onWindowResize, false );
-            window.addEventListener( "mousemove", onDocumentMouseMove, false );
+			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 );
 
-        }
+			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 );
 
-        function makeSprite( color, parent ) {
+			window.addEventListener( 'resize', onWindowResize, false );
+			window.addEventListener( "mousemove", onDocumentMouseMove, false );
 
-            var sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
-                color: color
-            } ) );
-            parent.add( sprite );
-            return sprite;
+		}
 
-        }
+		function animate() {
 
-        function animate() {
+			renderer.render( scene, camera );
+			requestAnimationFrame( animate );
 
-            renderer.render( scene, camera );
-            requestAnimationFrame( animate );
+		}
 
-        }
+		function onWindowResize() {
 
-        function onWindowResize() {
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
 
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
-            renderer.setSize( window.innerWidth, window.innerHeight );
+		}
 
-        }
+		var selectedObject = null;
 
-        var selectedObject = null;
+		function onDocumentMouseMove( event ) {
 
-        function onDocumentMouseMove( event ) {
+			event.preventDefault();
+			if ( selectedObject ) {
 
-            event.preventDefault();
-            if ( selectedObject ) {
+				selectedObject.material.color.set( '#69f' );
+				selectedObject = null;
 
-                selectedObject.material.color.set( '#69f' );
-                selectedObject = null;
+			}
 
-            }
+			var intersects = getIntersects( event.layerX, event.layerY );
+			if ( intersects.length > 0 ) {
 
-            var intersects = getIntersects( event.layerX, event.layerY );
-            if ( intersects.length > 0 ) {
+				var res = intersects.filter( function ( res ) {
 
-                var res = intersects.filter( function ( res ) {
+					return res && res.object;
 
-                    return res && res.object;
+				} )[ 0 ];
 
-                } )[ 0 ];
+				if ( res && res.object ) {
 
-                if ( res && res.object ) {
+					selectedObject = res.object;
+					selectedObject.material.color.set( '#f00' );
 
-                    selectedObject = res.object;
-                    selectedObject.material.color.set( '#f00' );
+				}
 
-                }
+			}
 
-            }
+		}
 
-        }
+		var raycaster = new THREE.Raycaster();
+		var mouseVector = new THREE.Vector3();
 
-        var raycaster = new THREE.Raycaster();
-        var mouseVector = new THREE.Vector3();
+		function getIntersects( x, y ) {
 
-        function getIntersects( x, y ) {
+			x = ( x / window.innerWidth ) * 2 - 1;
+			y = - ( y / window.innerHeight ) * 2 + 1;
 
-            mouseVector.set(
-                ( x / window.innerWidth ) * 2 - 1, - ( y / window.innerHeight ) * 2 + 1,
-                0.5 );
-            raycaster.setFromCamera( mouseVector, camera );
-            var intersects = raycaster.intersectObjects( [ spriteGroup ], true );
-            return intersects;
+			mouseVector.set( x, y, 0.5 );
+			raycaster.setFromCamera( mouseVector, camera );
 
-        }
-    </script>
+			return raycaster.intersectObject( group, true );
+
+		}
+	</script>
 </body>
-</html>
+</html>
diff --git a/examples/webgl_raycast_texture.html b/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;