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

Readme code improved. New example (particles/random)

Mr.doob 15 years ago
parent
d752745968
commit
763d801756
5 changed files with 267 additions and 28 deletions
Unified View Show Diff Stats
  1. 28 21
      README.md
  2. 49 5
      examples/particles/floor.html
  3. 143 0
      examples/particles/random.html
  4. BIN
      examples/particles/random.png
  5. 47 2
      examples/particles/waves.html

+ 28 - 21
README.md
View File 

@@ -2,31 +2,37 @@ Basic and modular javascript 3d engine which can use <canvas> and/org <
 
 
 
 ### How to use
 
 ### How to use
 
 
 
-	var SCREEN_WIDTH = window.innerWidth;
 
-	var SCREEN_HEIGHT = window.innerHeight;
 
+	var container;
 
+	var camera, scene, renderer;
 
 
 
-	var camera = new Camera(0, 0, 1000);
 
-
 
-	var scene = new Scene();
 
-	
-	var renderer = new CanvasRenderer();
 
-	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
-
 
-	var material = new ColorMaterial(0xffffff, 1);
 
+	init();
 
+	setInterval(loop, 1000 / 60);
 
 
 
-	for (var i = 0; i < 1000; i++)
 
+	function init()
 
 	{
 
 	{
 
-		var particle = new Particle( material );
 
-		particle.position.x = Math.random() * 1000 - 500;
 
-		particle.position.y = Math.random() * 1000 - 500;
 
-		particle.position.z = Math.random() * 1000 - 500;
 
-		particle.updateMatrix();
 
-		scene.add( particle );
 
-	}
 
+		camera = new Camera(0, 0, 1000);
 
 
 
-	dom_element.appendChild(renderer.viewport);
 
-
 
-	setInterval(loop, 1000 / 60);
 
+		scene = new Scene();
 
+	
+		renderer = new CanvasRenderer();
 
+		renderer.setSize(window.innerWidth, window.innerHeight);
 
+
 
+		for (var i = 0; i < 1000; i++)
 
+		{
 
+			var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
 
+			particle.size = Math.random() * 10 + 5;
 
+			particle.position.x = Math.random() * 2000 - 1000;
 
+			particle.position.y = Math.random() * 2000 - 1000;
 
+			particle.position.z = Math.random() * 2000 - 1000;
 
+			particle.updateMatrix();
 
+			scene.add( particle );
 
+		}
 
+
 
+		container = document.createElement('div');
 
+		document.body.appendChild(container);
 
+
 
+		container.appendChild(renderer.viewport);
 
+	}
 
 
 
 	function loop()
 
 	function loop()
 
 	{
 
 	{
 
@@ -35,6 +41,7 @@ Basic and modular javascript 3d engine which can use &lt;canvas&gt; and/org &lt;
 
 	
 	
 ### Examples
 
 ### Examples
 
 
 
+[![random.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/random.png)](http://mrdoob.com/lab/javascript/three/particles/random.html)
 
 [![waves.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/waves.png)](http://mrdoob.com/lab/javascript/three/particles/waves.html)
 
 [![waves.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/waves.png)](http://mrdoob.com/lab/javascript/three/particles/waves.html)
 
 [![floor.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/floor.png)](http://mrdoob.com/lab/javascript/three/particles/floor.html)
 
 [![floor.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/floor.png)](http://mrdoob.com/lab/javascript/three/particles/floor.html)

+ 49 - 5
examples/particles/floor.html
View File 

@@ -3,6 +3,7 @@
 
 	<head>
 
 	<head>
 
 		<title>three.js - particles - floor</title>
 
 		<title>three.js - particles - floor</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body
 
 			body
 
 			{
 
 			{
 
@@ -32,7 +33,7 @@
 
 			var stats;
 
 			var stats;
 
 			var container;
 
 			var container;
 
 
 
-			var particles, particle;
 
+			var particle;
 
 
 
 			var camera;
 
 			var camera;
 
 			var scene;
 
 			var scene;
 
@@ -45,6 +46,7 @@
 
 			var windowHalfY = window.innerHeight >> 1;
 
 			var windowHalfY = window.innerHeight >> 1;
 
 
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+			document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 
 
 			init();
 
 			init();
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
@@ -65,14 +67,13 @@
 
 
 
 				particles = new Array();
 
 				particles = new Array();
 
 
 
-				var i = 0;
 
 				var material = new ColorMaterial(0xffffff, 1);
 
 				var material = new ColorMaterial(0xffffff, 1);
 
 
 
 				for (var ix = 0; ix < AMOUNTX; ix++)
 
 				for (var ix = 0; ix < AMOUNTX; ix++)
 
 				{
 
 				{
 
 					for(var iy = 0; iy < AMOUNTY; iy++)
 
 					for(var iy = 0; iy < AMOUNTY; iy++)
 
 					{
 
 					{
 
-						particle = particles[i++] = new Particle( material );
 
+						particle = new Particle( material );
 
 						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
 
 						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
 
 						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
 
 						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
 
 						particle.updateMatrix();
 
 						particle.updateMatrix();
 
@@ -86,11 +87,54 @@
 
 				container.appendChild( stats.getDisplayElement() );
 
 				container.appendChild( stats.getDisplayElement() );
 
 			}
 
 			}
 
 
 
+			//
 
+
 
 			function onDocumentMouseMove(event)
 
 			function onDocumentMouseMove(event)
 
 			{
 
 			{
 
-				mouseX = (event.clientX - windowHalfX);
 
-				mouseY = (event.clientY - windowHalfY);
 
+				mouseX = event.clientX - windowHalfX;
 
+				mouseY = event.clientY - windowHalfY;
 
 			}
 
 			}
 
+			
+			function onDocumentTouchStart( event )
 
+			{
 
+				if(event.touches.length == 1)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+
 
+					document.addEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.addEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchMove( event )
 
+			{
 
+				if(event.touches.length == 1)
 
+				{
 
+					event.preventDefault();
 
+					
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchEnd( event )
 
+			{
 
+				if(event.touches.length == 0)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+
 
+					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}
 
+			
+			//
 
 
 
 			function loop()
 
 			function loop()
 
 			{
 
 			{

+ 143 - 0
examples/particles/random.html
View File 

@@ -0,0 +1,143 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - particles - random</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
+		<style type="text/css">
 
+			body
 
+			{
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+			a
 
+			{
 
+				color:#0078ff;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<script type="text/javascript" src="http://github.com/mrdoob/three.js/raw/master/build/three.js"></script>
 
+		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+
 
+			var stats;
 
+			var container;
 
+
 
+			var particle;
 
+
 
+			var camera;
 
+			var scene;
 
+			var renderer;
 
+
 
+			var mouseX = 0;
 
+			var mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth >> 1;
 
+			var windowHalfY = window.innerHeight >> 1;
 
+
 
+			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+			document.addEventListener('touchstart', onDocumentTouchStart, false);
 
+
 
+			init();
 
+			setInterval(loop, 1000 / 60);
 
+
 
+
 
+			function init()
 
+			{
 
+				container = document.createElement('div');
 
+				document.body.appendChild(container);				
+			
+				camera = new Camera(0, 0, 1000);
 
+				camera.focus = 200;
 
+
 
+				scene = new Scene();
 
+				
+				renderer = new CanvasRenderer();
 
+				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
+
 
+				for (var i = 0; i < 1000; i++)
 
+				{
 
+					particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
 
+					particle.size = Math.random() * 10 + 5;
 
+					particle.position.x = Math.random() * 2000 - 1000;
 
+					particle.position.y = Math.random() * 2000 - 1000;
 
+					particle.position.z = Math.random() * 2000 - 1000;
 
+					particle.updateMatrix();
 
+					scene.add( particle );
 
+				}
 
+
 
+				container.appendChild(renderer.viewport);
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.getDisplayElement() );
 
+			}
 
+
 
+			//
 
+
 
+			function onDocumentMouseMove(event)
 
+			{
 
+				mouseX = event.clientX - windowHalfX;
 
+				mouseY = event.clientY - windowHalfY;
 
+			}
 
+			
+			function onDocumentTouchStart( event )
 
+			{
 
+				if(event.touches.length == 1)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+
 
+					document.addEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.addEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchMove( event )
 
+			{
 
+				if(event.touches.length == 1)
 
+				{
 
+					event.preventDefault();
 
+					
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchEnd( event )
 
+			{
 
+				if(event.touches.length == 0)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+
 
+					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}
 
+			
+			//
 
+
 
+			function loop()
 
+			{
 
+				camera.x += (mouseX - camera.x) * .05;
 
+				camera.y += (-mouseY - camera.y) * .05;
 
+				camera.updateMatrix();
 
+
 
+				renderer.render(scene, camera);
 
+
 
+				stats.update();
 
+			}
 
+	
+		</script>
 
+	</body>
 
+</html>

BIN
examples/particles/random.png
View File


+ 47 - 2
examples/particles/waves.html
View File 

@@ -3,6 +3,7 @@
 
 	<head>
 
 	<head>
 
 		<title>three.js - particles - waves</title>
 
 		<title>three.js - particles - waves</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body
 
 			body
 
 			{
 
 			{
 
@@ -46,6 +47,7 @@
 
 			var windowHalfY = window.innerHeight >> 1;
 
 			var windowHalfY = window.innerHeight >> 1;
 
 
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+			document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 
 
 			init();
 
 			init();
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
@@ -90,11 +92,54 @@
 
 				container.appendChild( stats.getDisplayElement() );
 
 				container.appendChild( stats.getDisplayElement() );
 
 			}
 
 			}
 
 
 
+			//
 
+
 
 			function onDocumentMouseMove(event)
 
 			function onDocumentMouseMove(event)
 
 			{
 
 			{
 
-				mouseX = (event.clientX - windowHalfX);
 
-				mouseY = (event.clientY - windowHalfY);
 
+				mouseX = event.clientX - windowHalfX;
 
+				mouseY = event.clientY - windowHalfY;
 
 			}
 
 			}
 
+			
+			function onDocumentTouchStart( event )
 
+			{
 
+				if(event.touches.length == 1)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+
 
+					document.addEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.addEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchMove( event )
 
+			{
 
+				if(event.touches.length == 1)
 
+				{
 
+					event.preventDefault();
 
+					
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchEnd( event )
 
+			{
 
+				if(event.touches.length == 0)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[0].pageX - windowHalfX;
 
+					mouseY = event.touches[0].pageY - windowHalfY;
 
+
 
+					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}
 
+			
+			//
 
 
 
 			function loop()
 
 			function loop()
 
 			{
 
 			{