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

Fixed incorrect rotation matrix calculation. Particles examples clean up. Added Cube and Plane primitives. Added Cube geometry example.

Mr.doob 15 years ago
parent
d169c81828
commit
4f22f423b5
11 changed files with 247 additions and 40 deletions
Unified View Show Diff Stats
  1. 0 1
      build/three.js
  2. 169 0
      examples/geometry/cube.html
  3. BIN
      examples/geometry/cube.png
  4. 6 10
      examples/particles/floor.html
  5. 5 9
      examples/particles/random.html
  6. 5 9
      examples/particles/waves.html
  7. 1 0
      src/cameras/Camera.js
  8. 2 2
      src/core/Matrix4.js
  9. 5 2
      src/objects/Object3D.js
  10. 37 0
      src/objects/primitives/Cube.js
  11. 17 7
      src/objects/primitives/Plane.js

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


+ 169 - 0
examples/geometry/cube.html
View File 

@@ -0,0 +1,169 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - geometry - cube</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: #ffffff;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<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">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+			var AMOUNT = 100;
 
+
 
+			var container;
 
+			var stats;
 
+
 
+			var camera;
 
+			var scene;
 
+			var renderer;
 
+
 
+			var cube, plane;
 
+			
+			var targetRotation = 0;
 
+			var targetRotationOnMouseDown = 0;
 
+
 
+			var mouseX = 0;
 
+			var mouseXOnMouseDown = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			init();
 
+			setInterval(loop, 1000/60);
 
+
 
+			function init()
 
+			{
 
+				container = document.createElement('div');
 
+				document.body.appendChild(container);			
+			
+				camera = new Camera(0, 150, 300);
 
+				camera.focus = 300;
 
+				camera.target.y = 150;
 
+				camera.updateMatrix();
 
+
 
+				scene = new Scene();
 
+
 
+				// Cube
 
+
 
+				geometry = new Cube(200, 200, 200);
 
+
 
+				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 );
 
+								
+				cube = new Mesh(geometry, new FaceColorMaterial());
 
+				cube.position.y = 150;
 
+				cube.updateMatrix();
 
+				scene.add(cube);
 
+				
+				// Plane
 
+				
+				plane = new Mesh(new Plane(200, 200), new ColorMaterial(0xeeeeee));
 
+				plane.rotation.x = 90 * (Math.PI / 180);
 
+				plane.updateMatrix();
 
+				scene.add(plane);
 
+				
+				renderer = new CanvasRenderer();
 
+				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
+
 
+				container.appendChild(renderer.viewport);
 
+
 
+				stats = new Stats();
 
+				container.appendChild(stats.getDisplayElement());
 
+				
+				document.addEventListener('mousedown', onDocumentMouseDown, false);
 
+				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
+			}
 
+
 
+			//
 
+
 
+			function onDocumentMouseDown( event )
 
+			{
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+				document.addEventListener('mouseup', onDocumentMouseUp, false);
 
+				
+				mouseXOnMouseDown = event.clientX - windowHalfX;
 
+				targetRotationOnMouseDown = targetRotation;
 
+			}
 
+
 
+			function onDocumentMouseMove( event )
 
+			{
 
+				mouseX = event.clientX - windowHalfX;
 
+				
+				targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
+			}
 
+			
+			function onDocumentMouseUp( event )
 
+			{
 
+				document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
+				document.removeEventListener('mouseup', onDocumentMouseUp, false);				
+			}
 
+			
+			function onDocumentTouchStart( event )
 
+			{
 
+				if(event.touches.length > 1)
 
+				{
 
+					event.preventDefault();
 
+
 
+					mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
+					targetRotationOnMouseDown = targetRotation;
 
+
 
+					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;
 
+					
+					targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
+				}
 
+			}
 
+
 
+			function onDocumentTouchEnd( event )
 
+			{
 
+				if(event.touches.length == 0)
 
+				{
 
+					event.preventDefault();
 
+
 
+					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
+					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
+				}
 
+			}			
+
 
+			//
 
+
 
+			function loop()
 
+			{
 
+				cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
 
+				cube.updateMatrix();
 
+				
+				plane.rotation.z = -cube.rotation.y;
 
+				plane.updateMatrix();
 
+				
+				renderer.render(scene, camera);
 
+				stats.update();
 
+			}
 
+	
+		</script>
 
+
 
+	</body>
 
+</html>

BIN
examples/geometry/cube.png
View File


+ 6 - 10
examples/particles/floor.html
View File 

@@ -43,16 +43,12 @@
 
 			var mouseX = 0;
 
 			var mouseX = 0;
 
 			var mouseY = 0;
 
 			var mouseY = 0;
 
 
 
-			var windowHalfX = window.innerWidth >> 1;
 
-			var windowHalfY = window.innerHeight >> 1;
 
-
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-			document.addEventListener('touchstart', onDocumentTouchStart, false);
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
 
 			init();
 
 			init();
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
 
 
-
 
 			function init()
 
 			function init()
 
 			{
 
 			{
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
@@ -86,6 +82,9 @@
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				container.appendChild( stats.getDisplayElement() );
 
 				container.appendChild( stats.getDisplayElement() );
 
+				
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
@@ -98,7 +97,7 @@
 
 			
 			
 			function onDocumentTouchStart( event )
 
 			function onDocumentTouchStart( event )
 
 			{
 
 			{
 
-				if(event.touches.length == 1)
 
+				if(event.touches.length > 1)
 
 				{
 
 				{
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
@@ -127,9 +126,6 @@
 
 				{
 
 				{
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
-					mouseX = event.touches[0].pageX - windowHalfX;
 
-					mouseY = event.touches[0].pageY - windowHalfY;
 
-
 
 					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
 					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
 					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
 					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
 				}
 
 				}

+ 5 - 9
examples/particles/random.html
View File 

@@ -38,16 +38,12 @@
 
 			var mouseX = 0;
 
 			var mouseX = 0;
 
 			var mouseY = 0;
 
 			var mouseY = 0;
 
 
 
-			var windowHalfX = window.innerWidth >> 1;
 
-			var windowHalfY = window.innerHeight >> 1;
 
-
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-			document.addEventListener('touchstart', onDocumentTouchStart, false);
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
 
 			init();
 
 			init();
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
 
 
-
 
 			function init()
 
 			function init()
 
 			{
 
 			{
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
@@ -76,6 +72,9 @@
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				container.appendChild( stats.getDisplayElement() );
 
 				container.appendChild( stats.getDisplayElement() );
 
+				
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
@@ -117,9 +116,6 @@
 
 				{
 
 				{
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
-					mouseX = event.touches[0].pageX - windowHalfX;
 
-					mouseY = event.touches[0].pageY - windowHalfY;
 
-
 
 					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
 					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
 					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
 					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
 				}
 
 				}

+ 5 - 9
examples/particles/waves.html
View File 

@@ -43,16 +43,12 @@
 
 			var mouseX = 0;
 
 			var mouseX = 0;
 
 			var mouseY = 0;
 
 			var mouseY = 0;
 
 
 
-			var windowHalfX = window.innerWidth >> 1;
 
-			var windowHalfY = window.innerHeight >> 1;
 
-
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-			document.addEventListener('touchstart', onDocumentTouchStart, false);
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
 
 			init();
 
 			init();
 
 			setInterval(loop, 1000 / 60);
 
 			setInterval(loop, 1000 / 60);
 
 
 
-
 
 			function init()
 
 			function init()
 
 			{
 
 			{
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
@@ -90,6 +86,9 @@
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				container.appendChild( stats.getDisplayElement() );
 
 				container.appendChild( stats.getDisplayElement() );
 
+				
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
@@ -131,9 +130,6 @@
 
 				{
 
 				{
 
 					event.preventDefault();
 
 					event.preventDefault();
 
 
 
-					mouseX = event.touches[0].pageX - windowHalfX;
 
-					mouseY = event.touches[0].pageY - windowHalfY;
 
-
 
 					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
 					document.removeEventListener('touchmove', onDocumentTouchMove, false);
 
 					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
 					document.removeEventListener('touchend', onDocumentTouchEnd, false);
 
 				}
 
 				}

+ 1 - 0
src/cameras/Camera.js
View File 

@@ -18,6 +18,7 @@ var Camera = Vector3.extend
 
 		this.roll = 0;
 
 		this.roll = 0;
 
 		
 		
 		this.matrix = new Matrix4();
 
 		this.matrix = new Matrix4();
 
+		this.updateMatrix();
 
 	},
 
 	},
 
 	
 	
 	updateMatrix: function()
 
 	updateMatrix: function()

+ 2 - 2
src/core/Matrix4.js
View File 

@@ -39,11 +39,11 @@ var Matrix4 = Class.extend
 
 		this.n11 = this.x.x;
 
 		this.n11 = this.x.x;
 
 		this.n12 = this.x.y;
 
 		this.n12 = this.x.y;
 
 		this.n13 = this.x.z;
 
 		this.n13 = this.x.z;
 
-		this.n14 = this.x.dot(eye);
 
+		this.n14 = -this.x.dot(eye);
 
 		this.n21 = this.y.x;
 
 		this.n21 = this.y.x;
 
 		this.n22 = this.y.y;
 
 		this.n22 = this.y.y;
 
 		this.n23 = this.y.z;
 
 		this.n23 = this.y.z;
 
-		this.n24 = this.y.dot(eye);
 
+		this.n24 = -this.y.dot(eye);
 
 		this.n31 = this.z.x;
 
 		this.n31 = this.z.x;
 
 		this.n32 = this.z.y;
 
 		this.n32 = this.z.y;
 
 		this.n33 = this.z.z;
 
 		this.n33 = this.z.z;

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

@@ -21,6 +21,9 @@ var Object3D = Class.extend
 
 	{
 
 	{
 
 		this.matrix.identity();
 
 		this.matrix.identity();
 
 
		this.matrix.multiplySelf( Matrix4.translationMatrix( this.position.x, this.position.y, this.position.z) );
 
 
		this.matrix.multiplySelf( Matrix4.translationMatrix( this.position.x, this.position.y, this.position.z) );
 
-		this.matrix.multiplySelf( Matrix4.rotationMatrix( this.rotation.x, this.rotation.y, this.rotation.z ) );		
-		this.matrix.multiplySelf( Matrix4.scaleMatrix( this.scale.x, this.scale.y, this.scale.z ) );
	}
 
+		this.matrix.multiplySelf( Matrix4.rotationXMatrix( this.rotation.x ) );
 
+		this.matrix.multiplySelf( Matrix4.rotationYMatrix( this.rotation.y ) );
 
+		this.matrix.multiplySelf( Matrix4.rotationZMatrix( this.rotation.z ) );
 
+		this.matrix.multiplySelf( Matrix4.scaleMatrix( this.scale.x, this.scale.y, this.scale.z ) );
 
+	}
 
 });
 
 });

+ 37 - 0
src/objects/primitives/Cube.js
View File 

@@ -0,0 +1,37 @@
 
+var Cube = Geometry.extend
 
+({
 
+	init: function( width, height, depth )
 
+	{
 
+		this._super();
 
+		
+		var width_half = width / 2;
 
+		var height_half = height / 2;
 
+		var depth_half = depth / 2;
 
+		
+		this.v(  width_half,  height_half, -depth_half );
 
+		this.v(  width_half, -height_half, -depth_half );
 
+		this.v( -width_half, -height_half, -depth_half );
 
+		this.v( -width_half,  height_half, -depth_half );
 
+		this.v(  width_half,  height_half,  depth_half );
 
+		this.v(  width_half, -height_half,  depth_half );
 
+		this.v( -width_half, -height_half,  depth_half );
 
+		this.v( -width_half,  height_half,  depth_half );
 
+		
+		this.f4( 0, 1, 2, 3 );
 
+		this.f4( 4, 7, 6, 5 );
 
+		this.f4( 0, 4, 5, 1 );
 
+		this.f4( 1, 5, 6, 2 );
 
+		this.f4( 2, 6, 7, 3 );
 
+		this.f4( 4, 0, 3, 7 );
 
+	},
 
+
 
+	v: function( x, y, z )
 
+	{
 
+		this.vertices.push( new Vertex( x, y, z ) );
 
+	},
 
+
 
+	f4: function( a, b, c, d )
 
+	{
 
+		this.faces.push( new Face4( this.vertices[a], this.vertices[b], this.vertices[c], this.vertices[d] ) );
 
+	}	
+});

+ 17 - 7
src/objects/primitives/Plane.js
View File 

@@ -7,11 +7,21 @@ var Plane = Geometry.extend
 
 		var width_half = width / 2;
 
 		var width_half = width / 2;
 
 		var height_half = height / 2;
 
 		var height_half = height / 2;
 
 		
 		
-		this.vertices.push( new Vertex(-width_half,  height_half, 0) );
 
-		this.vertices.push( new Vertex( width_half,  height_half, 0) );
 
-		this.vertices.push( new Vertex( width_half, -height_half, 0) );
 
-		this.vertices.push( new Vertex(-width_half, -height_half, 0) );
 
+		this.v( -width_half,  height_half, 0 );
 
+		this.v(  width_half,  height_half, 0 );
 
+		this.v(  width_half, -height_half, 0 );
 
+		this.v( -width_half, -height_half, 0 );
 
 		
 		
-		this.faces.push( new Face4( this.vertices[0], this.vertices[1], this.vertices[2], this.vertices[3] ) );
 
-	}
 
-});
 
+		this.f4( 0, 1, 2, 3 );
 
+	},
 
+	
+	v: function( x, y, z )
 
+	{
 
+		this.vertices.push( new Vertex( x, y, z ) );
 
+	},
 
+
 
+	f4: function( a, b, c, d )
 
+	{
 
+		this.faces.push( new Face4( this.vertices[a], this.vertices[b], this.vertices[c], this.vertices[d] ) );
 
+	}	
+});

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