+ Added Line Object

+ Workaround for WebKit not supporting rgba() in SVG yet
+ Aesthetic changes on the readme file

README.md

@@ -15,10 +15,10 @@ Although this allows 3D for iPhoneOS and Android platforms the performance on th
 
 ### Examples ###
 
-[![cube.png](http://github.com/mrdoob/three.js/raw/master/examples/geometry/cube.png)](http://mrdoob.com/lab/javascript/three/geometry/cube.html)
-[![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)
-[![floor.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/floor.png)](http://mrdoob.com/lab/javascript/three/particles/floor.html)
+[![cube.png](http://github.com/mrdoob/three.js/raw/master/assets/examples/03_cube.png)](http://mrdoob.com/lab/javascript/three/geometry/cube.html)
+[![random.png](http://github.com/mrdoob/three.js/raw/master/assets/examples/02_random)](http://mrdoob.com/lab/javascript/three/particles/random.html)
+[![waves.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/01_waves)](http://mrdoob.com/lab/javascript/three/particles/waves.html)
+[![floor.png](http://github.com/mrdoob/three.js/raw/master/examples/particles/00_floor)](http://mrdoob.com/lab/javascript/three/particles/floor.html)
 
 ### How to use ###
 

examples/geometry/primitives/Cube.js

@@ -6,7 +6,7 @@ var Cube = function (width, height, depth) {
 
 	THREE.Geometry.call(this);
 	
-	var scope = this,	
+	var scope = this,
 	width_half = width / 2,
 	height_half = height / 2,
 	depth_half = depth / 2;

src/cameras/Camera.js

@@ -5,49 +5,58 @@
 THREE.Color = function (hex) {
 
 	var _r, _g, _b, _a, _hex;
-	
-	this.styleString;
-	
+
+	this.__styleString;
+	this.__svgStyleString; // Workaround for WebKit :(
+
 	this.setHex = function (hex) {
-	
+
 		_hex = hex;
 		this.updateRGBA();
 		this.updateStyleString();
+
 	}
-	
+
 	this.setRGBA = function (r, g, b, a) {
-	
+
 		_r = r;
 		_g = g;
 		_b = b;
 		_a = a;
-		
+
 		this.updateHex();
 		this.updateStyleString();
+
 	}
-	
+
 	this.updateHex = function () {
-	
+
 		_hex = _a << 24 | _r << 16 | _g << 8 | _b;
+
 	}
-	
+
 	this.updateRGBA = function () {
-	
+
 		_r = _hex >> 16 & 0xff;
 		_g = _hex >> 8 & 0xff;
 		_b = _hex & 0xff;
-		_a = _hex >> 24 & 0xff;		
+		_a = _hex >> 24 & 0xff;
+
 	}
-	
+
 	this.updateStyleString = function () {
-	
-		this.styleString = 'rgba(' + _r + ',' + _g + ',' + _b + ',' + (_a / 255) + ')';	
+
+		this.__styleString = 'rgba(' + _r + ',' + _g + ',' + _b + ',' + (_a / 255) + ')';
+		this.__svgStyleString = 'rgb(' + _r + ',' + _g + ',' + _b + '); opacity: '+(_a / 255);
+
 	}
-	
+
 	this.toString = function () {
-	
-		return 'THREE.Color ( r: ' + _r + ', g: ' + _g + ', b: ' + _b + ', a: ' + _a + ', hex: ' + _hex + ', style: ' + this.styleString + ' )';	
+
+		return 'THREE.Color ( r: ' + _r + ', g: ' + _g + ', b: ' + _b + ', a: ' + _a + ', hex: ' + _hex + ', style: ' + this.styleString + ' )';
+
 	}
-	
+
 	this.setHex(hex);
+
 }

src/core/Face3.js

@@ -8,6 +8,6 @@ THREE.ColorFillMaterial = function (hex, opacity) {
 	
 	this.toString = function () {
 	
-		return 'THREE.ColorFillMaterial ( color: ' + this.color + ' )';	
+		return 'THREE.ColorFillMaterial ( color: ' + this.color + ' )';
 	}
 }

src/materials/ColorStrokeMaterial.js

@@ -10,7 +10,7 @@ THREE.Object3D = function (material) {
 
 	this.matrix = new THREE.Matrix4();
 	this.screen = new THREE.Vector3(0, 0, 0);
-	
+
 	this.material = material instanceof Array ? material : [material];
 
 	this.updateMatrix = function () {
@@ -22,6 +22,6 @@ THREE.Object3D = function (material) {
 		this.matrix.multiplySelf(THREE.Matrix4.rotationYMatrix(this.rotation.y));
 		this.matrix.multiplySelf(THREE.Matrix4.rotationZMatrix(this.rotation.z));
 		this.matrix.multiplySelf(THREE.Matrix4.scaleMatrix(this.scale.x, this.scale.y, this.scale.z));
-		
+
 	}
 }

src/objects/Particle.js

@@ -11,21 +11,22 @@ THREE.CanvasRenderer = function () {
 	_clipRect = new THREE.Rectangle(),
 	_clearRect = new THREE.Rectangle(0, 0, 0, 0),
 	_bboxRect = new THREE.Rectangle();
-	
+
 	this.setSize = function (width, height) {
-	
+
 		_viewport.width = width;
 		_viewport.height = height;
-		
+
 		_context.setTransform(1, 0, 0, 1, width / 2, height / 2);
-		
+
 		_clipRect.set(-width / 2, -height / 2, width / 2, height / 2);
+
 	}
-	
+
 	this.domElement = _viewport;
 
 	this.render = function (scene, camera) {
-	
+
 		var i, j, element, pi2 = Math.PI * 2,
 		elementsLength, material, materialLength,
 		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
@@ -40,120 +41,154 @@ THREE.CanvasRenderer = function () {
 		_context.fillStyle = 'rgba(255, 255, 0, 0.5)';
 		_context.fillRect(_clipRect.getX(), _clipRect.getY(), _clipRect.getWidth(), _clipRect.getHeight());
 		*/
-		
+
 		this.project(scene, camera);
 
 		elementsLength = this.renderList.length;
-		
+
 		for (i = 0; i < elementsLength; i++) {
-		
+
 			element = this.renderList[i];
 			materialLength = element.material.length;
-		
+
 			for (j = 0; j < materialLength; j++) {
-		
+
 				material = element.material[j];
-			
+
 				_context.beginPath();
-				
+
 				_bboxRect.empty();
 
 				if (element instanceof THREE.RenderableFace3) {
-					
+
 					v1x = element.v1.x; v1y = element.v1.y;
 					v2x = element.v2.x; v2y = element.v2.y;
 					v3x = element.v3.x; v3y = element.v3.y;
-					
+
 					_bboxRect.addPoint(v1x, v1y);
 					_bboxRect.addPoint(v2x, v2y);
 					_bboxRect.addPoint(v3x, v3y);
-					
+
 					if (!_clipRect.instersects(_bboxRect)) {
-					
+
 						continue;
+
 					}
-					
+
 					_clearRect.addRectangle(_bboxRect);
-					
+
 					_context.moveTo(v1x, v1y);
 					_context.lineTo(v2x, v2y);
 					_context.lineTo(v3x, v3y);
-					_context.lineTo(v1x, v1y);			
-				
+					_context.lineTo(v1x, v1y);
+
 				} else if (element instanceof THREE.RenderableFace4) {
 
 					v1x = element.v1.x; v1y = element.v1.y;
 					v2x = element.v2.x; v2y = element.v2.y;
 					v3x = element.v3.x; v3y = element.v3.y;
 					v4x = element.v4.x; v4y = element.v4.y;
-					
+
 					_bboxRect.addPoint(v1x, v1y);
 					_bboxRect.addPoint(v2x, v2y);
 					_bboxRect.addPoint(v3x, v3y);
 					_bboxRect.addPoint(v4x, v4y);
 
 					if (!_clipRect.instersects(_bboxRect)) {
-					
+
 						continue;
+
 					}
 
-					_clearRect.addRectangle(_bboxRect);
-					
 					_context.moveTo(v1x, v1y);
 					_context.lineTo(v2x, v2y);
 					_context.lineTo(v3x, v3y);
-					_context.lineTo(v4x, v4y);					
-					_context.lineTo(v1x, v1y);					
+					_context.lineTo(v4x, v4y);
+					_context.lineTo(v1x, v1y);
+				
+				} else if (element instanceof THREE.RenderableLine) {
 				
+					v1x = element.v1.x; v1y = element.v1.y;
+					v2x = element.v2.x; v2y = element.v2.y;
+
+					_bboxRect.addPoint(v1x, v1y);
+					_bboxRect.addPoint(v2x, v2y);
+
+					if (!_clipRect.instersects(_bboxRect)) {
+
+						continue;
+
+					}
+
+					_context.moveTo(v1x, v1y);
+					_context.lineTo(v2x, v2y);
+
 				} else if (element instanceof THREE.RenderableParticle) {
-					
+
 					size = element.size * element.screenZ;
-					
+
 					_bboxRect.set(element.x - size, element.y - size, element.x + size, element.y + size);
 
 					if (!_clipRect.instersects(_bboxRect)) {
-					
+
 						continue;
+
 					}
-					
-					_clearRect.addRectangle(_bboxRect);
-					
+
 					_context.arc(element.x, element.y, size, 0, pi2, true);
+
 				}
-				
-				
+
 				if (material instanceof THREE.ColorFillMaterial) {
-			
-					_context.fillStyle = material.color.styleString;
+
+					_context.fillStyle = material.color.__styleString;
 					_context.fill();
-			
+
+					_clearRect.addRectangle(_bboxRect);
+
 				} else if (material instanceof THREE.FaceColorFillMaterial) {
-			
-					_context.fillStyle = element.color.styleString;
+
+					_context.fillStyle = element.color.__styleString;
 					_context.fill();
 
+					_clearRect.addRectangle(_bboxRect);
+
 				} else if (material instanceof THREE.ColorStrokeMaterial) {
-				
+
 					_context.lineWidth = material.lineWidth;
 					_context.lineJoin = "round";
 					_context.lineCap = "round";
 
-					_context.strokeStyle = material.color.styleString;
+					_context.strokeStyle = material.color.__styleString;
 					_context.stroke();
-				
+
+					_bboxRect.inflate(material.lineWidth);
+					_clearRect.addRectangle(_bboxRect);
+
 				} else if (material instanceof THREE.FaceColorStrokeMaterial) {
-				
+
 					_context.lineWidth = material.lineWidth;
 					_context.lineJoin = "round";
 					_context.lineCap = "round";
-					
-					_context.strokeStyle = element.color.styleString;					
+
+					_context.strokeStyle = element.color.__styleString;
 					_context.stroke();
+
+					_bboxRect.inflate(material.lineWidth);
+					_clearRect.addRectangle(_bboxRect);
+
 				}
-				
-				_context.closePath();			
+
+				_context.closePath();
+
 			}
 		}
+		
+		/*
+		_context.lineWidth = 1;
+		_context.strokeStyle = 'rgba(0, 0, 255, 0.5)';
+		_context.strokeRect(_clearRect.getX(), _clearRect.getY(), _clearRect.getWidth(), _clearRect.getHeight());	
+		*/
 	}
 }
 

src/renderers/Renderer.js

@@ -6,6 +6,7 @@ THREE.Renderer = function() {
 
 	var face3Pool = [],
 	face4Pool = [],
+	linePool = [],
 	particlePool = [],
 
 	matrix = new THREE.Matrix4();
@@ -13,25 +14,26 @@ THREE.Renderer = function() {
 	this.renderList;
 
 	function sort(a, b) {
-	
+
 		return a.screenZ - b.screenZ;
+
 	}
 
 	this.project = function (scene, camera) {
-	
-		var i, j, vertex, face, object, v1, v2, v3, v4,
-		face3count = 0, face4count = 0, particleCount = 0,
+
+		var i, j, vertex, vertex2, face, object, v1, v2, v3, v4,
+		face3count = 0, face4count = 0, lineCount = 0, particleCount = 0,
 		camerafocus = camera.focus, focuszoom = camera.focus * camera.zoom,
 		verticesLength = 0, facesLength = 0;
 
 		this.renderList = [];
 
 		for (i = 0; i < scene.objects.length; i++) {
-		
+
 			object = scene.objects[i];
 
 			if (object instanceof THREE.Mesh) {
-			
+
 				matrix.multiply(camera.matrix, object.matrix);
 
 				// vertices
@@ -39,7 +41,7 @@ THREE.Renderer = function() {
 				verticesLength = object.geometry.vertices.length;
 
 				for (j = 0; j < verticesLength; j++) {
-				
+
 					vertex = object.geometry.vertices[j];
 
 					vertex.screen.copy(vertex.position);
@@ -48,10 +50,11 @@ THREE.Renderer = function() {
 
 					vertex.screen.z = focuszoom / (camerafocus + vertex.screen.z);
 
-					vertex.visible = vertex.screen.z > 0;					
+					vertex.visible = vertex.screen.z > 0;
 
 					vertex.screen.x *= vertex.screen.z;
 					vertex.screen.y *= vertex.screen.z; 
+
 				}
 
 				// faces
@@ -61,7 +64,7 @@ THREE.Renderer = function() {
 				for (j = 0; j < facesLength; j++) {
 				
 					face = object.geometry.faces[j];
-					
+
 					// TODO: Use normals for culling
 
 					if (face instanceof THREE.Face3) {
@@ -76,9 +79,12 @@ THREE.Renderer = function() {
 						   
 							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z) * 0.3;
 							
-							if (face3Pool[face3count] == null)
+							if (!face3Pool[face3count]) {
+							
 								face3Pool[face3count] = new THREE.RenderableFace3();
-
+							
+							}
+							
 							face3Pool[face3count].v1.x = v1.screen.x;
 							face3Pool[face3count].v1.y = v1.screen.y;
 							face3Pool[face3count].v2.x = v2.screen.x;
@@ -100,7 +106,7 @@ THREE.Renderer = function() {
 						v1 = object.geometry.vertices[face.a];
 						v2 = object.geometry.vertices[face.b];
 						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 ||
 						   ((v4.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
@@ -110,9 +116,12 @@ THREE.Renderer = function() {
 						   
 							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z + v4.screen.z) * 0.25;
 
-							if (face4Pool[face4count] == null)
+							if (!face4Pool[face4count]) {
+							
 								face4Pool[face4count] = new THREE.RenderableFace4();
-
+								
+							}
+							
 							face4Pool[face4count].v1.x = v1.screen.x;
 							face4Pool[face4count].v1.y = v1.screen.y;
 							face4Pool[face4count].v2.x = v2.screen.x;
@@ -132,6 +141,55 @@ THREE.Renderer = function() {
 						}
 					}
 				}
+
+			} else if (object instanceof THREE.Line) {
+
+				matrix.multiply(camera.matrix, object.matrix);
+
+				verticesLength = object.geometry.vertices.length;
+
+				for (j = 0; j < verticesLength; j++) {
+				
+					vertex = object.geometry.vertices[j];
+
+					vertex.screen.copy(vertex.position);
+
+					matrix.transform(vertex.screen);
+
+					vertex.screen.z = focuszoom / (camerafocus + vertex.screen.z);
+
+					vertex.visible = vertex.screen.z > 0;
+
+					vertex.screen.x *= vertex.screen.z;
+					vertex.screen.y *= vertex.screen.z;
+					
+					if (j > 0) {
+					
+						vertex2 = object.geometry.vertices[j-1];
+						
+						if (!vertex.visible || !vertex2.visible) {
+						
+							continue;
+						}
+						
+						if (!linePool[lineCount]) {
+						
+							linePool[lineCount] = new THREE.RenderableLine();
+					
+						}
+						
+						linePool[lineCount].v1.x = vertex.screen.x;
+						linePool[lineCount].v1.y = vertex.screen.y;
+						linePool[lineCount].v2.x = vertex2.screen.x;
+						linePool[lineCount].v2.y = vertex2.screen.y;
+						linePool[lineCount].screenZ = (vertex.screen.z + vertex2.screen.z) * 0.5;						
+						linePool[lineCount].material = object.material;
+						
+						this.renderList.push( linePool[lineCount] );
+						
+						lineCount++;
+					}
+				}
 				
 			} else if (object instanceof THREE.Particle) {
 			
@@ -149,9 +207,12 @@ THREE.Renderer = function() {
 				object.screen.x *= object.screen.z;
 				object.screen.y *= object.screen.z;
 
-				if (particlePool[particleCount] == null)
+				if (!particlePool[particleCount]) {
+				
 					particlePool[particleCount] = new THREE.RenderableParticle();
 
+				}
+				
 				particlePool[particleCount].x = object.screen.x;
 				particlePool[particleCount].y = object.screen.y;
 				particlePool[particleCount].screenZ = object.screen.z;

src/renderers/SVGRenderer.js

@@ -106,19 +106,19 @@ THREE.SVGRenderer = function () {
 
 				if (material instanceof THREE.ColorFillMaterial) {
 				
-					svgNode.setAttribute('style', 'fill: ' + material.color.styleString + '; stroke-width:10');
+					svgNode.setAttribute('style', 'fill: ' + material.color.__svgStyleString + '; stroke-width:10');
 					
 				} else if (material instanceof THREE.FaceColorFillMaterial) {
 				
-					svgNode.setAttribute('style', 'fill: ' + element.color.styleString + '; stroke-width:10');
+					svgNode.setAttribute('style', 'fill: ' + element.color.__svgStyleString + '; stroke-width:10');
 					
 				} else if (material instanceof THREE.ColorStrokeMaterial) {
 				
-					svgNode.setAttribute('style', 'fill: none; stroke: ' + material.color.styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round');
+					svgNode.setAttribute('style', 'fill: none; stroke: ' + material.color.__svgStyleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round');
 				
 				} else if (material instanceof THREE.FaceColorStrokeMaterial) {
 				
-					svgNode.setAttribute('style', 'fill: none; stroke: ' + element.color.styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round');
+					svgNode.setAttribute('style', 'fill: none; stroke: ' + element.color.__svgStyleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round');
 				}
 				
 

src/renderers/renderables/RenderableLine.js

@@ -0,0 +1,14 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.RenderableLine = function () {
+
+	this.v1 = new THREE.Vector2();
+	this.v2 = new THREE.Vector2();
+	
+	this.screenZ;
+	
+	this.color;
+	this.material;
+}

src/scenes/Scene.js

@@ -3,7 +3,7 @@ import os
 
 # MERGER
 
-rev = 6;
+rev = 7;
 
 files = [];
 files.append('Three.js');
@@ -33,6 +33,7 @@ files.append('renderers/SVGRenderer.js');
 files.append('renderers/renderables/RenderableFace3.js');
 files.append('renderers/renderables/RenderableFace4.js');
 files.append('renderers/renderables/RenderableParticle.js');
+files.append('renderers/renderables/RenderableLine.js');
 
 string = '';