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

- Added Camera3D.autoUpdateMatrix
- Added Object3D.autoUpdateMatrix

Mr.doob 15 years ago
parent
6c43304a6c
commit
06c7ec335f
10 changed files with 161 additions and 155 deletions
Unified View Show Diff Stats
  1. 2 2
      README.md
  2. 0 0
      build/three.js
  3. 32 37
      examples/geometry/cube.html
  4. 19 21
      examples/particles/floor.html
  5. 19 21
      examples/particles/random.html
  6. 24 26
      examples/particles/waves.html
  7. 11 10
      src/cameras/Camera.js
  8. 2 0
      src/objects/Object3D.js
  9. 1 0
      src/objects/Particle.js
  10. 51 38
      src/renderers/Renderer.js

+ 2 - 2
README.md
View File 

@@ -53,7 +53,6 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 
 				particle.position.x = Math.random() * 2000 - 1000;
 
 				particle.position.x = Math.random() * 2000 - 1000;
 
 				particle.position.y = Math.random() * 2000 - 1000;
 
 				particle.position.y = Math.random() * 2000 - 1000;
 
 				particle.position.z = Math.random() * 2000 - 1000;
 
 				particle.position.z = Math.random() * 2000 - 1000;
 
-				particle.updateMatrix();
 
 				scene.add( particle );
 
 				scene.add( particle );
 
 
 
 			}
 
 			}
 
@@ -104,10 +103,11 @@ If you are interested on messing with the actual library, instead of importing t
 
 
 
 ### Change Log ###
 
 ### Change Log ###
 
 
 
-2010 06 05 - **r7** (22.225 kb)
 
+2010 06 05 - **r7** (22.387 kb)
 
 
 
 * Added Line Object
 
 * Added Line Object
 
 * Workaround for WebKit not supporting rgba() in SVG yet
 
 * Workaround for WebKit not supporting rgba() in SVG yet
 
+* No need to call updateMatrix(). Use .autoUpdateMatrix = false if needed. (thx (Gregory Athons)[http://github.com/gregmax17])
 
 
 
 
 
 2010 05 17 - **r6** (21.003 kb)
 
 2010 05 17 - **r6** (21.003 kb)

File diff suppressed because it is too large
+ 0 - 0
build/three.js


+ 32 - 37
examples/geometry/cube.html
View File 

@@ -5,8 +5,7 @@
 
 		<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;"/>		
 		<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 {
 
 				font-family: Monospace;
 
 				font-family: Monospace;
 
 				background-color: #f0f0f0;
 
 				background-color: #f0f0f0;
 
 				margin: 0px;
 
 				margin: 0px;
 
@@ -17,10 +16,10 @@
 
 	<body>
 
 	<body>
 
 
 
 		<script type="text/javascript" src="../../build/three.js"></script>
 
 		<script type="text/javascript" src="../../build/three.js"></script>
 
-		
+
 
 		<script type="text/javascript" src="primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
-		
+
 
 		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
 		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -36,7 +35,7 @@
 
 			var renderer;
 
 			var renderer;
 
 
 
 			var cube, plane;
 
 			var cube, plane;
 
-			
+
 
 			var targetRotation = 0;
 
 			var targetRotation = 0;
 
 			var targetRotationOnMouseDown = 0;
 
 			var targetRotationOnMouseDown = 0;
 
 
 
@@ -50,10 +49,10 @@
 
 			setInterval(loop, 1000/60);
 
 			setInterval(loop, 1000/60);
 
 
 
 			function init() {
 
 			function init() {
 
-			
+
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
 				document.body.appendChild(container);
 
 				document.body.appendChild(container);
 
-				
+
 
 				var info = document.createElement('div');
 
 				var info = document.createElement('div');
 
 				info.style.position = 'absolute';
 
 				info.style.position = 'absolute';
 
 				info.style.top = '10px';
 
 				info.style.top = '10px';
 
@@ -61,7 +60,7 @@
 
 				info.style.textAlign = 'center';
 
 				info.style.textAlign = 'center';
 
 				info.innerHTML = 'Drag to spin the cube';
 
 				info.innerHTML = 'Drag to spin the cube';
 
 				container.appendChild(info);
 
 				container.appendChild(info);
 
-			
+
 
 				camera = new THREE.Camera(0, 150, 400);
 
 				camera = new THREE.Camera(0, 150, 400);
 
 				camera.focus = 300;
 
 				camera.focus = 300;
 
 				camera.target.position.y = 150;
 
 				camera.target.position.y = 150;
 
@@ -74,22 +73,20 @@
 
 				geometry = new Cube(200, 200, 200);
 
 				geometry = new Cube(200, 200, 200);
 
 
 
 				for (var i = 0; i < geometry.faces.length; i++) {
 
 				for (var i = 0; i < geometry.faces.length; i++) {
 
-				
+
 
 					geometry.faces[i].color.setRGBA( Math.floor( Math.random() * 128), Math.floor( Math.random() * 128 + 128), Math.floor( Math.random() * 128 + 128), 255 );
 
 					geometry.faces[i].color.setRGBA( Math.floor( Math.random() * 128), Math.floor( Math.random() * 128 + 128), Math.floor( Math.random() * 128 + 128), 255 );
 
 				}
 
 				}
 
-								
+
 
 				cube = new THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());
 
 				cube = new THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());
 
 				cube.position.y = 150;
 
 				cube.position.y = 150;
 
-				cube.updateMatrix();
 
 				scene.add(cube);
 
 				scene.add(cube);
 
-				
+
 
 				// Plane
 
 				// Plane
 
-				
+
 
 				plane = new THREE.Mesh(new Plane(200, 200), new THREE.ColorFillMaterial(0xe0e0e0));
 
 				plane = new THREE.Mesh(new Plane(200, 200), new THREE.ColorFillMaterial(0xe0e0e0));
 
 				plane.rotation.x = 90 * (Math.PI / 180);
 
 				plane.rotation.x = 90 * (Math.PI / 180);
 
-				plane.updateMatrix();
 
 				scene.add(plane);
 
 				scene.add(plane);
 
-				
+
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 
 
@@ -99,7 +96,7 @@
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild(stats.domElement);
 
 				container.appendChild(stats.domElement);
 
-				
+
 
 				document.addEventListener('mousedown', onDocumentMouseDown, false);
 
 				document.addEventListener('mousedown', onDocumentMouseDown, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
 				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
@@ -108,42 +105,42 @@
 
 			//
 
 			//
 
 
 
 			function onDocumentMouseDown( event ) {
 
 			function onDocumentMouseDown( event ) {
 
-			
+
 
 				event.preventDefault();
 
 				event.preventDefault();
 
-				
+
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('mouseup', onDocumentMouseUp, false);
 
 				document.addEventListener('mouseup', onDocumentMouseUp, false);
 
 				document.addEventListener('mouseout', onDocumentMouseOut, false);
 
 				document.addEventListener('mouseout', onDocumentMouseOut, false);
 
-				
+
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 
 				targetRotationOnMouseDown = targetRotation;
 
 				targetRotationOnMouseDown = targetRotation;
 
 			}
 
 			}
 
 
 
 			function onDocumentMouseMove( event ) {
 
 			function onDocumentMouseMove( event ) {
 
-			
+
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseX = event.clientX - windowHalfX;
 
-				
+
 
 				targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
 
 				targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
 
 			}
 
 			}
 
-			
+
 
 			function onDocumentMouseUp( event ) {
 
 			function onDocumentMouseUp( event ) {
 
-			
+
 
 				document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
 				document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
 				document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 				document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 			}
 
 			}
 
-			
+
 
 			function onDocumentMouseOut( event ) {
 
 			function onDocumentMouseOut( event ) {
 
-			
+
 
 				document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
 				document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
 				document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 				document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 			}
 
 			}
 
-			
+
 
 			function onDocumentTouchStart( event ) {
 
 			function onDocumentTouchStart( event ) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
 					mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
 					mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
@@ -152,11 +149,11 @@
 
 			}
 
 			}
 
 
 
 			function onDocumentTouchMove( event ) {
 
 			function onDocumentTouchMove( event ) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
-					
+
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
 					targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
 				}
 
 				}
 
@@ -165,17 +162,15 @@
 
 			//
 
 			//
 
 
 
 			function loop() {
 
 			function loop() {
 
-			
+
 
 				cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
 
 				cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
 
-				cube.updateMatrix();
 
-				
+
 
 				plane.rotation.z = -cube.rotation.y;
 
 				plane.rotation.z = -cube.rotation.y;
 
-				plane.updateMatrix();
 
-				
+
 
 				renderer.render(scene, camera);
 
 				renderer.render(scene, camera);
 
 				stats.update();
 
 				stats.update();
 
 			}
 
 			}
 
-	
+
 
 		</script>
 
 		</script>
 
 
 
 	</body>
 
 	</body>

+ 19 - 21
examples/particles/floor.html
View File 

@@ -10,16 +10,16 @@
 
 				margin: 0px;
 
 				margin: 0px;
 
 				overflow: hidden;
 
 				overflow: hidden;
 
 			}
 
 			}
 
-			
+
 
 			a {
 
 			a {
 
 				color:#0078ff;
 
 				color:#0078ff;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-	
+
 
 		<script type="text/javascript" src="../../build/three.js"></script>
 
 		<script type="text/javascript" src="../../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" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -50,15 +50,15 @@
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
 
 
 			function init() {
 
 			function init() {
 
-			
+
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
 				document.body.appendChild(container);
 
 				document.body.appendChild(container);
 
-			
+
 
 				camera = new THREE.Camera(0, 0, 1000);
 
 				camera = new THREE.Camera(0, 0, 1000);
 
 				camera.focus = 200;
 
 				camera.focus = 200;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				
+
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 
 
@@ -67,13 +67,12 @@
 
 				var material = new THREE.ColorFillMaterial(0xffffff, 1);
 
 				var material = new THREE.ColorFillMaterial(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 = new THREE.Particle( material );
 
 						particle = new THREE.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();
 
 						scene.add( particle );
 
 						scene.add( particle );
 
 					}
 
 					}
 
 				}
 
 				}
 
@@ -84,7 +83,7 @@
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild(stats.domElement);
 
 				container.appendChild(stats.domElement);
 
-				
+
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
 				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
@@ -93,15 +92,15 @@
 
 			//
 
 			//
 
 
 
 			function onDocumentMouseMove(event) {
 
 			function onDocumentMouseMove(event) {
 
-			
+
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
 				mouseY = event.clientY - windowHalfY;
 
 			}
 
 			}
 
-			
+
 
 			function onDocumentTouchStart( event ) {
 
 			function onDocumentTouchStart( event ) {
 
-			
+
 
 				if(event.touches.length > 1) {
 
 				if(event.touches.length > 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
@@ -110,29 +109,28 @@
 
 			}
 
 			}
 
 
 
 			function onDocumentTouchMove( event ) {
 
 			function onDocumentTouchMove( event ) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
-					
+
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
 				}
 
 				}
 
 			}
 
 			}
 
-			
+
 
 			//
 
 			//
 
 
 
 			function loop() {
 
 			function loop() {
 
-			
+
 
 				camera.position.x += (mouseX - camera.position.x) * .05;
 
 				camera.position.x += (mouseX - camera.position.x) * .05;
 
 				camera.position.y += (-mouseY - camera.position.y) * .05;
 
 				camera.position.y += (-mouseY - camera.position.y) * .05;
 
-				camera.updateMatrix();
 
 
 
 				renderer.render(scene, camera);
 
 				renderer.render(scene, camera);
 
 
 
 				stats.update();
 
 				stats.update();
 
 			}
 
 			}
 
-	
+
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>
 
 </html>
 
 </html>

+ 19 - 21
examples/particles/random.html
View File 

@@ -10,16 +10,16 @@
 
 				margin: 0px;
 
 				margin: 0px;
 
 				overflow: hidden;
 
 				overflow: hidden;
 
 			}
 
 			}
 
-			
+
 
 			a {
 
 			a {
 
 				color:#0078ff;
 
 				color:#0078ff;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-	
+
 
 		<script type="text/javascript" src="../../build/three.js"></script>
 
 		<script type="text/javascript" src="../../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" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -47,26 +47,25 @@
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
 
 
 			function init() {
 
 			function init() {
 
-			
+
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
-				document.body.appendChild(container);				
-			
+				document.body.appendChild(container);
 
+
 
 				camera = new THREE.Camera(0, 0, 1000);
 
 				camera = new THREE.Camera(0, 0, 1000);
 
 				camera.focus = 200;
 
 				camera.focus = 200;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				
+
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 
 
 				for (var i = 0; i < 1000; i++) {
 
 				for (var i = 0; i < 1000; i++) {
 
-				
+
 
 					particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1));
 
 					particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1));
 
 					particle.size = Math.random() * 10 + 5;
 
 					particle.size = Math.random() * 10 + 5;
 
 					particle.position.x = Math.random() * 2000 - 1000;
 
 					particle.position.x = Math.random() * 2000 - 1000;
 
 					particle.position.y = Math.random() * 2000 - 1000;
 
 					particle.position.y = Math.random() * 2000 - 1000;
 
 					particle.position.z = Math.random() * 2000 - 1000;
 
 					particle.position.z = Math.random() * 2000 - 1000;
 
-					particle.updateMatrix();
 
 					scene.add(particle);
 
 					scene.add(particle);
 
 				}
 
 				}
 
 
 
@@ -76,7 +75,7 @@
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild(stats.domElement);
 
 				container.appendChild(stats.domElement);
 
-				
+
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
 				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
@@ -85,15 +84,15 @@
 
 			//
 
 			//
 
 
 
 			function onDocumentMouseMove(event) {
 
 			function onDocumentMouseMove(event) {
 
-			
+
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
 				mouseY = event.clientY - windowHalfY;
 
 			}
 
 			}
 
-			
+
 
 			function onDocumentTouchStart(event) {
 
 			function onDocumentTouchStart(event) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
@@ -102,29 +101,28 @@
 
 			}
 
 			}
 
 
 
 			function onDocumentTouchMove(event) {
 
 			function onDocumentTouchMove(event) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
-					
+
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
 				}
 
 				}
 
 			}
 
 			}
 
-			
+
 
 			//
 
 			//
 
 
 
 			function loop() {
 
 			function loop() {
 
-			
+
 
 				camera.position.x += (mouseX - camera.position.x) * .05;
 
 				camera.position.x += (mouseX - camera.position.x) * .05;
 
 				camera.position.y += (-mouseY - camera.position.y) * .05;
 
 				camera.position.y += (-mouseY - camera.position.y) * .05;
 
-				camera.updateMatrix();
 
 
 
 				renderer.render(scene, camera);
 
 				renderer.render(scene, camera);
 
 
 
 				stats.update();
 
 				stats.update();
 
 			}
 
 			}
 
-	
+
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>
 
 </html>
 
 </html>

+ 24 - 26
examples/particles/waves.html
View File 

@@ -19,7 +19,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<script type="text/javascript" src="../../build/three.js"></script>
 
 		<script type="text/javascript" src="../../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" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -51,15 +51,15 @@
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
 
 
 			function init() {
 
 			function init() {
 
-			
+
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
-				document.body.appendChild(container);				
-			
+				document.body.appendChild(container);
 
+
 
 				camera = new THREE.Camera(0, 0, 1000);
 
 				camera = new THREE.Camera(0, 0, 1000);
 
 				camera.focus = 200;
 
 				camera.focus = 200;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				
+
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 
 
@@ -69,14 +69,13 @@
 
 				var material = new THREE.ColorFillMaterial(0xffffff, 1);
 
 				var material = new THREE.ColorFillMaterial(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 THREE.Particle( material );
 
 						particle = particles[i++] = new THREE.Particle( material );
 
 						particle.size = 1;
 
 						particle.size = 1;
 
 						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();
 
 						scene.add( particle );
 
 						scene.add( particle );
 
 					}
 
 					}
 
 				}
 
 				}
 
@@ -89,63 +88,62 @@
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
 				container.appendChild(stats.domElement);
 
 				container.appendChild(stats.domElement);
 
-				
+
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
-				document.addEventListener('touchmove', onDocumentTouchMove, false);				
+				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
 
 
 			function onDocumentMouseMove(event) {
 
 			function onDocumentMouseMove(event) {
 
-			
+
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseX = event.clientX - windowHalfX;
 
 				mouseY = event.clientY - windowHalfY;
 
 				mouseY = event.clientY - windowHalfY;
 
-				
+
 
 			}
 
 			}
 
-			
+
 
 			function onDocumentTouchStart(event) {
 
 			function onDocumentTouchStart(event) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
-					
+
 
 				}
 
 				}
 
 			}
 
 			}
 
 
 
 			function onDocumentTouchMove(event) {
 
 			function onDocumentTouchMove(event) {
 
-			
+
 
 				if(event.touches.length == 1) {
 
 				if(event.touches.length == 1) {
 
-				
+
 
 					event.preventDefault();
 
 					event.preventDefault();
 
-					
+
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
 					mouseY = event.touches[0].pageY - windowHalfY;
 
-					
+
 
 				}
 
 				}
 
 			}
 
 			}
 
-			
+
 
 			//
 
 			//
 
 
 
 			function loop() {
 
 			function loop() {
 
-			
+
 
 				camera.position.x += (mouseX - camera.position.x) * .05;
 
 				camera.position.x += (mouseX - camera.position.x) * .05;
 
 				camera.position.y += (-mouseY - camera.position.y) * .05;
 
 				camera.position.y += (-mouseY - camera.position.y) * .05;
 
-				camera.updateMatrix();
 
 
 
 				var i = 0;
 
 				var i = 0;
 
 
 
 				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++];
 
 						particle = particles[i++];
 
 						particle.size = (Math.sin((ix + count) * .3) + 1) * 2 + (Math.sin((iy + count) * .5) + 1) * 2;
 
 						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);
 
 						particle.position.y = (Math.sin((ix + count) * .3) * 50) + (Math.sin((iy + count) * .5) * 50);
 
-						
+
 
 					}
 
 					}
 
 				}
 
 				}

+ 11 - 10
src/cameras/Camera.js
View File 

@@ -5,29 +5,30 @@
 
 THREE.Camera = function (x, y, z) {
 
 THREE.Camera = function (x, y, z) {
 
 
 
 	this.position = new THREE.Vector3(x, y, z);
 
 	this.position = new THREE.Vector3(x, y, z);
 
-	this.target = {
 
-		position: new THREE.Vector3(0, 0, 0)
 
-	}
 
+	this.target = { position: new THREE.Vector3(0, 0, 0) }
 
 
 
 	this.matrix = new THREE.Matrix4();
 
 	this.matrix = new THREE.Matrix4();
 
 	this.projectionMatrix = THREE.Matrix4.makePerspective(45, 1 /*SCREEN_WIDTH/SCREEN_HEIGHT*/, 0.001, 1000);
 
 	this.projectionMatrix = THREE.Matrix4.makePerspective(45, 1 /*SCREEN_WIDTH/SCREEN_HEIGHT*/, 0.001, 1000);
 
-	
+
 
 	this.up = new THREE.Vector3(0, 1, 0);
 
 	this.up = new THREE.Vector3(0, 1, 0);
 
 	this.roll = 0;
 
 	this.roll = 0;
 
-	
-	// TODO: Need to remove this	
+
 
+	// TODO: Need to remove this
 
 	this.zoom = 3;
 
 	this.zoom = 3;
 
 	this.focus = 500;
 
 	this.focus = 500;
 
-	
+
 
+	this.autoUpdateMatrix = true;
 
+
 
 	this.updateMatrix = function () {
 
 	this.updateMatrix = function () {
 
-	
+
 
 		this.matrix.lookAt(this.position, this.target.position, this.up);
 
 		this.matrix.lookAt(this.position, this.target.position, this.up);
 
+
 
 	}
 
 	}
 
 
 
 	this.toString = function () {
 
 	this.toString = function () {
 
-	
+
 
 		return 'THREE.Camera ( ' + this.position + ', ' + this.target.position + ' )';
 
 		return 'THREE.Camera ( ' + this.position + ', ' + this.target.position + ' )';
 
 	}
 
 	}
 
-	
+
 
 	this.updateMatrix();
 
 	this.updateMatrix();
 
 }
 
 }

+ 2 - 0
src/objects/Object3D.js
View File 

@@ -13,6 +13,8 @@ THREE.Object3D = function (material) {
 
 
 
 	this.material = material instanceof Array ? material : [material];
 
 	this.material = material instanceof Array ? material : [material];
 
 
 
+	this.autoUpdateMatrix = true;
 
+
 
 	this.updateMatrix = function () {
 
 	this.updateMatrix = function () {
 
 
 
 		this.matrix.identity();
 
 		this.matrix.identity();

+ 1 - 0
src/objects/Particle.js
View File 

@@ -7,6 +7,7 @@ THREE.Particle = function (material) {
 
 	THREE.Object3D.call(this, material);
 
 	THREE.Object3D.call(this, material);
 
 
 
 	this.size = 1;
 
 	this.size = 1;
 
+	this.autoUpdateMatrix = false;
 
 }
 
 }
 
 
 
 THREE.Particle.prototype = new THREE.Object3D();
 
 THREE.Particle.prototype = new THREE.Object3D();

+ 51 - 38
src/renderers/Renderer.js
View File 

@@ -28,10 +28,22 @@ THREE.Renderer = function() {
 
 
 
 		this.renderList = [];
 
 		this.renderList = [];
 
 
 
+		if(camera.autoUpdateMatrix) {
 
+
 
+			camera.updateMatrix();
 
+
 
+		}
 
+
 
 		for (i = 0; i < scene.objects.length; i++) {
 
 		for (i = 0; i < scene.objects.length; i++) {
 
 
 
 			object = scene.objects[i];
 
 			object = scene.objects[i];
 
 
 
+			if(object.autoUpdateMatrix) {
 
+
 
+				object.updateMatrix();
 
+
 
+			}
 
+
 
 			if (object instanceof THREE.Mesh) {
 
 			if (object instanceof THREE.Mesh) {
 
 
 
 				matrix.multiply(camera.matrix, object.matrix);
 
 				matrix.multiply(camera.matrix, object.matrix);
 
@@ -62,29 +74,29 @@ THREE.Renderer = function() {
 
 				facesLength = object.geometry.faces.length;
 
 				facesLength = object.geometry.faces.length;
 
 
 
 				for (j = 0; j < facesLength; j++) {
 
 				for (j = 0; j < facesLength; j++) {
 
-				
+
 
 					face = object.geometry.faces[j];
 
 					face = object.geometry.faces[j];
 
 
 
 					// TODO: Use normals for culling
 
 					// TODO: Use normals for culling
 
 
 
 					if (face instanceof THREE.Face3) {
 
 					if (face instanceof THREE.Face3) {
 
-					
+
 
 						v1 = object.geometry.vertices[face.a];
 
 						v1 = object.geometry.vertices[face.a];
 
 						v2 = object.geometry.vertices[face.b];
 
 						v2 = object.geometry.vertices[face.b];
 
 						v3 = object.geometry.vertices[face.c];
 
 						v3 = object.geometry.vertices[face.c];
 
-					
+
 
 						if (v1.visible && v2.visible && v3.visible && (object.doubleSided ||
 
 						if (v1.visible && v2.visible && v3.visible && (object.doubleSided ||
 
 						   (v3.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
 
 						   (v3.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
 
 						   (v3.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0) ) {
 
 						   (v3.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0) ) {
 
-						   
+
 
 							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z) * 0.3;
 
 							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z) * 0.3;
 
-							
+
 
 							if (!face3Pool[face3count]) {
 
 							if (!face3Pool[face3count]) {
 
-							
+
 
 								face3Pool[face3count] = new THREE.RenderableFace3();
 
 								face3Pool[face3count] = new THREE.RenderableFace3();
 
-							
+
 
 							}
 
 							}
 
-							
+
 
 							face3Pool[face3count].v1.x = v1.screen.x;
 
 							face3Pool[face3count].v1.x = v1.screen.x;
 
 							face3Pool[face3count].v1.y = v1.screen.y;
 
 							face3Pool[face3count].v1.y = v1.screen.y;
 
 							face3Pool[face3count].v2.x = v2.screen.x;
 
 							face3Pool[face3count].v2.x = v2.screen.x;
 
@@ -92,7 +104,7 @@ THREE.Renderer = function() {
 
 							face3Pool[face3count].v3.x = v3.screen.x;
 
 							face3Pool[face3count].v3.x = v3.screen.x;
 
 							face3Pool[face3count].v3.y = v3.screen.y;
 
 							face3Pool[face3count].v3.y = v3.screen.y;
 
 							face3Pool[face3count].screenZ = face.screen.z;
 
 							face3Pool[face3count].screenZ = face.screen.z;
 
-							
+
 
 							face3Pool[face3count].color = face.color;
 
 							face3Pool[face3count].color = face.color;
 
 							face3Pool[face3count].material = object.material;
 
 							face3Pool[face3count].material = object.material;
 
 
 
@@ -100,28 +112,28 @@ THREE.Renderer = function() {
 
 
 
 							face3count++;
 
 							face3count++;
 
 						}
 
 						}
 
-						
+
 
 					} else if (face instanceof THREE.Face4) {
 
 					} else if (face instanceof THREE.Face4) {
 
 
 
 						v1 = object.geometry.vertices[face.a];
 
 						v1 = object.geometry.vertices[face.a];
 
 						v2 = object.geometry.vertices[face.b];
 
 						v2 = object.geometry.vertices[face.b];
 
 						v3 = object.geometry.vertices[face.c];
 
 						v3 = object.geometry.vertices[face.c];
 
 						v4 = object.geometry.vertices[face.d];
 
 						v4 = object.geometry.vertices[face.d];
 
-					
+
 
 						if (v1.visible && v2.visible && v3.visible && v4.visible && (object.doubleSided ||
 
 						if (v1.visible && v2.visible && v3.visible && v4.visible && (object.doubleSided ||
 
 						   ((v4.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
 
 						   ((v4.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
 
 						   (v4.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0 ||
 
 						   (v4.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0 ||
 
 						   (v2.screen.x - v3.screen.x) * (v4.screen.y - v3.screen.y) -
 
 						   (v2.screen.x - v3.screen.x) * (v4.screen.y - v3.screen.y) -
 
 						   (v2.screen.y - v3.screen.y) * (v4.screen.x - v3.screen.x) > 0)) ) {
 
 						   (v2.screen.y - v3.screen.y) * (v4.screen.x - v3.screen.x) > 0)) ) {
 
-						   
+
 
 							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z + v4.screen.z) * 0.25;
 
 							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z + v4.screen.z) * 0.25;
 
 
 
 							if (!face4Pool[face4count]) {
 
 							if (!face4Pool[face4count]) {
 
-							
+
 
 								face4Pool[face4count] = new THREE.RenderableFace4();
 
 								face4Pool[face4count] = new THREE.RenderableFace4();
 
-								
+
 
 							}
 
 							}
 
-							
+
 
 							face4Pool[face4count].v1.x = v1.screen.x;
 
 							face4Pool[face4count].v1.x = v1.screen.x;
 
 							face4Pool[face4count].v1.y = v1.screen.y;
 
 							face4Pool[face4count].v1.y = v1.screen.y;
 
 							face4Pool[face4count].v2.x = v2.screen.x;
 
 							face4Pool[face4count].v2.x = v2.screen.x;
 
@@ -131,7 +143,7 @@ THREE.Renderer = function() {
 
 							face4Pool[face4count].v4.x = v4.screen.x;
 
 							face4Pool[face4count].v4.x = v4.screen.x;
 
 							face4Pool[face4count].v4.y = v4.screen.y;
 
 							face4Pool[face4count].v4.y = v4.screen.y;
 
 							face4Pool[face4count].screenZ = face.screen.z;
 
 							face4Pool[face4count].screenZ = face.screen.z;
 
-							
+
 
 							face4Pool[face4count].color = face.color;
 
 							face4Pool[face4count].color = face.color;
 
 							face4Pool[face4count].material = object.material;
 
 							face4Pool[face4count].material = object.material;
 
 
 
@@ -149,7 +161,7 @@ THREE.Renderer = function() {
 
 				verticesLength = object.geometry.vertices.length;
 
 				verticesLength = object.geometry.vertices.length;
 
 
 
 				for (j = 0; j < verticesLength; j++) {
 
 				for (j = 0; j < verticesLength; j++) {
 
-				
+
 
 					vertex = object.geometry.vertices[j];
 
 					vertex = object.geometry.vertices[j];
 
 
 
 					vertex.screen.copy(vertex.position);
 
 					vertex.screen.copy(vertex.position);
 
@@ -162,45 +174,45 @@ THREE.Renderer = function() {
 
 
 
 					vertex.screen.x *= vertex.screen.z;
 
 					vertex.screen.x *= vertex.screen.z;
 
 					vertex.screen.y *= vertex.screen.z;
 
 					vertex.screen.y *= vertex.screen.z;
 
-					
+
 
 					if (j > 0) {
 
 					if (j > 0) {
 
-					
+
 
 						vertex2 = object.geometry.vertices[j-1];
 
 						vertex2 = object.geometry.vertices[j-1];
 
-						
+
 
 						if (!vertex.visible || !vertex2.visible) {
 
 						if (!vertex.visible || !vertex2.visible) {
 
-						
+
 
 							continue;
 
 							continue;
 
 						}
 
 						}
 
-						
+
 
 						if (!linePool[lineCount]) {
 
 						if (!linePool[lineCount]) {
 
-						
+
 
 							linePool[lineCount] = new THREE.RenderableLine();
 
 							linePool[lineCount] = new THREE.RenderableLine();
 
-					
+
 
 						}
 
 						}
 
-						
+
 
 						linePool[lineCount].v1.x = vertex.screen.x;
 
 						linePool[lineCount].v1.x = vertex.screen.x;
 
 						linePool[lineCount].v1.y = vertex.screen.y;
 
 						linePool[lineCount].v1.y = vertex.screen.y;
 
 						linePool[lineCount].v2.x = vertex2.screen.x;
 
 						linePool[lineCount].v2.x = vertex2.screen.x;
 
 						linePool[lineCount].v2.y = vertex2.screen.y;
 
 						linePool[lineCount].v2.y = vertex2.screen.y;
 
-						linePool[lineCount].screenZ = (vertex.screen.z + vertex2.screen.z) * 0.5;						
+						linePool[lineCount].screenZ = (vertex.screen.z + vertex2.screen.z) * 0.5;
 
 						linePool[lineCount].material = object.material;
 
 						linePool[lineCount].material = object.material;
 
-						
+
 
 						this.renderList.push( linePool[lineCount] );
 
 						this.renderList.push( linePool[lineCount] );
 
-						
+
 
 						lineCount++;
 
 						lineCount++;
 
 					}
 
 					}
 
 				}
 
 				}
 
-				
+
 
 			} else if (object instanceof THREE.Particle) {
 
 			} else if (object instanceof THREE.Particle) {
 
-			
+
 
 				object.screen.copy(object.position);
 
 				object.screen.copy(object.position);
 
-				
+
 
 				camera.matrix.transform(object.screen);
 
 				camera.matrix.transform(object.screen);
 
-				
+
 
 				object.screen.z = focuszoom / (camerafocus + object.screen.z);
 
 				object.screen.z = focuszoom / (camerafocus + object.screen.z);
 
 
 
 				if (object.screen.z < 0) {
 
 				if (object.screen.z < 0) {
 
-				
+
 
 					continue;
 
 					continue;
 
 				}
 
 				}
 
 
 
@@ -208,25 +220,26 @@ THREE.Renderer = function() {
 
 				object.screen.y *= object.screen.z;
 
 				object.screen.y *= object.screen.z;
 
 
 
 				if (!particlePool[particleCount]) {
 
 				if (!particlePool[particleCount]) {
 
-				
+
 
 					particlePool[particleCount] = new THREE.RenderableParticle();
 
 					particlePool[particleCount] = new THREE.RenderableParticle();
 
 
 
 				}
 
 				}
 
-				
+
 
 				particlePool[particleCount].x = object.screen.x;
 
 				particlePool[particleCount].x = object.screen.x;
 
 				particlePool[particleCount].y = object.screen.y;
 
 				particlePool[particleCount].y = object.screen.y;
 
 				particlePool[particleCount].screenZ = object.screen.z;
 
 				particlePool[particleCount].screenZ = object.screen.z;
 
-				
-				particlePool[particleCount].size = object.size;				
+
 
+				particlePool[particleCount].size = object.size;
 
 				particlePool[particleCount].material = object.material;
 
 				particlePool[particleCount].material = object.material;
 
 				particlePool[particleCount].color = object.color;
 
 				particlePool[particleCount].color = object.color;
 
 
 
 				this.renderList.push( particlePool[particleCount] );
 
 				this.renderList.push( particlePool[particleCount] );
 
-				
+
 
 				particleCount++;
 
 				particleCount++;
 
 			}
 
 			}
 
 		}
 
 		}
 
 
 
 		this.renderList.sort(sort);
 
 		this.renderList.sort(sort);
 
+
 
 	}
 
 	}
 
 }
 
 }

Some files were not shown because too many files changed in this diff