Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Renamed canvas interactive sprites example and clean up.

Mr.doob 7 years ago
parent
e848b24a3c
commit
cfacd5c9eb
2 changed files with 41 additions and 20 deletions
Unified View Show Diff Stats
  1. 40 19
      examples/canvas_interactive_sprites.html
  2. 1 1
      examples/files.js

+ 40 - 19
examples/canvas_interactive_particles.html → examples/canvas_interactive_sprites.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js canvas - interactive particles</title>
 
+		<title>three.js canvas - interactive sprites</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
@@ -32,22 +32,37 @@
 
 
 
 			var PI2 = Math.PI * 2;
 
 			var PI2 = Math.PI * 2;
 
 
 
-			var programFill = function ( context ) {
 
+			/*
 
+			function programFill( context ) {
 
+
 
+				context.fillRect( - 0.5, - 0.5, 1, 1 );
 
+
 
+			}
 
+
 
+			function programStroke( context ) {
 
+
 
+				context.lineWidth = 0.025;
 
+				context.strokeRect( - 0.5, - 0.5, 1, 1 );
 
+
 
+			}
 
+			*/
 
+
 
+			function programFill( context ) {
 
 
 
 				context.beginPath();
 
 				context.beginPath();
 
 				context.arc( 0, 0, 0.5, 0, PI2, true );
 
 				context.arc( 0, 0, 0.5, 0, PI2, true );
 
 				context.fill();
 
 				context.fill();
 
 
 
-			};
 
+			}
 
 
 
-			var programStroke = function ( context ) {
 
+			function programStroke( context ) {
 
 
 
 				context.lineWidth = 0.025;
 
 				context.lineWidth = 0.025;
 
 				context.beginPath();
 
 				context.beginPath();
 
 				context.arc( 0, 0, 0.5, 0, PI2, true );
 
 				context.arc( 0, 0, 0.5, 0, PI2, true );
 
 				context.stroke();
 
 				context.stroke();
 
 
 
-			};
 
+			}
 
 
 
 			var INTERSECTED;
 
 			var INTERSECTED;
 
 
 
@@ -64,7 +79,7 @@
 
 				info.style.top = '10px';
 
 				info.style.top = '10px';
 
 				info.style.width = '100%';
 
 				info.style.width = '100%';
 
 				info.style.textAlign = 'center';
 
 				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> canvas - interactive particles';
 
+				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> canvas - interactive sprites';
 
 				container.appendChild( info );
 
 				container.appendChild( info );
 
 
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
@@ -75,17 +90,22 @@
 
 
 
 				for ( var i = 0; i < 100; i ++ ) {
 
 				for ( var i = 0; i < 100; i ++ ) {
 
 
 
-					var particle = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: Math.random() * 0x808080 + 0x808080, program: programStroke } ) );
 
-					particle.position.x = Math.random() * 800 - 400;
 
-					particle.position.y = Math.random() * 800 - 400;
 
-					particle.position.z = Math.random() * 800 - 400;
 
-					particle.scale.x = particle.scale.y = Math.random() * 20 + 20;
 
-					scene.add( particle );
 
+					var material = new THREE.SpriteCanvasMaterial( {
 
+						color: Math.random() * 0x808080 + 0x808080,
 
+						program: programStroke
 
+					} );
 
+
 
+					var sprite = new THREE.Sprite( material );
 
+					sprite.position.x = Math.random() * 800 - 400;
 
+					sprite.position.y = Math.random() * 800 - 400;
 
+					sprite.position.z = Math.random() * 800 - 400;
 
+					sprite.scale.setScalar( Math.random() * 20 + 20 );
 
+					scene.add( sprite );
 
 
 
 				}
 
 				}
 
-				
+
 
 				//
 
 				//
 
-				
+
 
 				raycaster = new THREE.Raycaster();
 
 				raycaster = new THREE.Raycaster();
 
 				mouse = new THREE.Vector2();
 
 				mouse = new THREE.Vector2();
 
 
 
@@ -158,19 +178,20 @@
 
 
 
 				if ( intersects.length > 0 ) {
 
 				if ( intersects.length > 0 ) {
 
 
 
-					if ( INTERSECTED != intersects[ 0 ].object ) {
 
+					var object = intersects[ 0 ].object;
 
+
 
+					if ( INTERSECTED !== object ) {
 
 
 
 						if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
 
 						if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
 
 
 
-						INTERSECTED = intersects[ 0 ].object;
 
+						INTERSECTED = object;
 
 						INTERSECTED.material.program = programFill;
 
 						INTERSECTED.material.program = programFill;
 
 
 
 					}
 
 					}
 
 
 
-				} else {
 
-
 
-					if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
 
+				} else if ( INTERSECTED ) {
 
 
 
+					INTERSECTED.material.program = programStroke;
 
 					INTERSECTED = null;
 
 					INTERSECTED = null;
 
 
 
 				}
 
 				}

+ 1 - 1
examples/files.js
View File 

@@ -383,7 +383,7 @@ var files = {
 
 		"canvas_geometry_text",
 
 		"canvas_geometry_text",
 
 		"canvas_interactive_cubes",
 
 		"canvas_interactive_cubes",
 
 		"canvas_interactive_cubes_tween",
 
 		"canvas_interactive_cubes_tween",
 
-		"canvas_interactive_particles",
 
+		"canvas_interactive_sprites",
 
 		"canvas_interactive_voxelpainter",
 
 		"canvas_interactive_voxelpainter",
 
 		"canvas_lights_pointlights",
 
 		"canvas_lights_pointlights",
 
 		"canvas_lines",
 
 		"canvas_lines",