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

New README and some examples

Mr.doob 15 years ago
parent
094310793e
commit
a97ce787f1
5 changed files with 281 additions and 0 deletions
Unified View Show Diff Stats
  1. 47 0
      README.md
  2. 108 0
      examples/particles/floor.html
  3. BIN
      examples/particles/floor.png
  4. 126 0
      examples/particles/waves.html
  5. BIN
      examples/particles/waves.png

+ 47 - 0
README.md
View File 

@@ -0,0 +1,47 @@
 
+Basic and modular javascript 3d engine.
 
+
 
+Can use <canvas> and/org <svg> as renderer.
 
+
 
+### How to use
 
+
 
+	var SCREEN_WIDTH = window.innerWidth;
 
+	var SCREEN_HEIGHT = window.innerHeight;
 
+
 
+	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);
 
+
 
+	for (var i = 0; i < 1000; i++)
 
+	{
 
+		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 );
 
+	}
 
+
 
+	dom_element.appendChild(renderer.viewport);
 
+
 
+	setInterval(loop, 1000 / 60);
 
+
 
+	function loop()
 
+	{
 
+		renderer.render(scene, camera);
 
+	}
 
+	
+### Examples
 
+
 
+[![waves.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/waves.png)](http://github.com/mrdoob/three.js/raw/master/examples/particles/waves.html)
 
+[![floor.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/floor.png)](http://github.com/mrdoob/three.js/raw/master/examples/particles/floor.html)
 
+
 
+### Change Log
 
+
 
+2010 04 24 - **r011.2**
 
+
 
+* First alpha release

+ 108 - 0
examples/particles/floor.html
View File 

@@ -0,0 +1,108 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - particles - floor</title>
 
+		<meta charset="utf-8">
 
+		<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 SEPARATION = 100;
 
+			var AMOUNTX = 50;
 
+			var AMOUNTY = 50;
 
+
 
+			var stats;
 
+			var container;
 
+
 
+			var particles, 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);
 
+
 
+			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);
 
+
 
+				particles = new Array();
 
+
 
+				var i = 0;
 
+				var material = new ColorMaterial(0xffffff, 1);
 
+
 
+				for (var ix = 0; ix < AMOUNTX; ix++)
 
+				{
 
+					for(var iy = 0; iy < AMOUNTY; iy++)
 
+					{
 
+						particle = particles[i++] = new Particle( material );
 
+						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
 
+						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
 
+						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 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/floor.png
View File


+ 126 - 0
examples/particles/waves.html
View File 

@@ -0,0 +1,126 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - particles - waves</title>
 
+		<meta charset="utf-8">
 
+		<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 SEPARATION = 100;
 
+			var AMOUNTX = 50;
 
+			var AMOUNTY = 50;
 
+
 
+			var stats;
 
+			var container;
 
+
 
+			var particles, particle;
 
+			var count;
 
+
 
+			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);
 
+
 
+			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);
 
+
 
+				particles = new Array();
 
+
 
+				var i = 0;
 
+				var material = new ColorMaterial(0xffffff, 1);
 
+
 
+				for (var ix = 0; ix < AMOUNTX; ix++)
 
+				{
 
+					for(var iy = 0; iy < AMOUNTY; iy++)
 
+					{
 
+						particle = particles[i++] = new Particle( material );
 
+						particle.size = 1;
 
+						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
 
+						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
 
+						particle.updateMatrix();
 
+						scene.add( particle );
 
+					}
 
+				}
 
+
 
+				count = 0;
 
+
 
+				container.appendChild(renderer.viewport);
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.getDisplayElement() );
 
+			}
 
+
 
+			function onDocumentMouseMove(event)
 
+			{
 
+				mouseX = (event.clientX - windowHalfX);
 
+				mouseY = (event.clientY - windowHalfY);
 
+			}
 
+
 
+			function loop()
 
+			{
 
+				camera.x += (mouseX - camera.x) * .05;
 
+				camera.y += (-mouseY - camera.y) * .05;
 
+				camera.updateMatrix();
 
+
 
+				var i = 0;
 
+
 
+				for (var ix = 0; ix < AMOUNTX; ix++)
 
+				{
 
+					for(var iy = 0; iy < AMOUNTY; iy++)
 
+					{
 
+						particle = particles[i++];
 
+						// particle.size = (Math.sin((ix + count) * .3) + 1) * 2 + (Math.sin((iy + count) * .5) + 1) * 2;
 
+						particle.position.y = (Math.sin((ix + count) * .3) * 50) + (Math.sin((iy + count) * .5) * 50);
 
+					}
 
+				}
 
+
 
+				renderer.render(scene, camera);
 
+
 
+				stats.update();
 
+
 
+				count += 0.1;
 
+			}
 
+	
+		</script>
 
+	</body>
 
+</html>

BIN
examples/particles/waves.png
View File