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

Better handling of Color

Mr.doob 15 years ago
parent
30672c1f2e
commit
271ad498c6
10 changed files with 80 additions and 43 deletions
Unified View Show Diff Stats
  1. 1 1
      README.md
  2. 0 1
      build/three.js
  3. 3 2
      examples/particles/floor.html
  4. 55 0
      src/core/Color.js
  5. 2 4
      src/core/Face3.js
  6. 2 4
      src/core/Face4.js
  7. 3 26
      src/materials/ColorMaterial.js
  8. 3 0
      src/materials/FaceColorMaterial.js
  9. 5 1
      src/renderers/CanvasRenderer.js
  10. 6 4
      src/renderers/Renderer.js

+ 1 - 1
README.md
View File 

@@ -25,10 +25,10 @@
 
 		for (var i = 0; i < 1000; i++)
 
 		for (var i = 0; i < 1000; i++)
 
 		{
 
 		{
 
 			var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
 
 			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.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.size = Math.random() * 10 + 5;
 
 			particle.updateMatrix();
 
 			particle.updateMatrix();
 
 			scene.add( particle );
 
 			scene.add( particle );
 
 		}
 
 		}

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


+ 3 - 2
examples/particles/floor.html
View File 

@@ -18,6 +18,7 @@
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<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/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" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
 
 
@@ -30,8 +31,8 @@
 
 			var AMOUNTX = 50;
 
 			var AMOUNTX = 50;
 
 			var AMOUNTY = 50;
 
 			var AMOUNTY = 50;
 
 
 
-			var stats;
 
 			var container;
 
 			var container;
 
+			var stats;
 
 
 
 			var particle;
 
 			var particle;
 
 
 
@@ -55,7 +56,7 @@
 
 			function init()
 
 			function init()
 
 			{
 
 			{
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
-				document.body.appendChild(container);				
+				document.body.appendChild(container);
 
 			
 			
 				camera = new Camera(0, 0, 1000);
 
 				camera = new Camera(0, 0, 1000);
 
 				camera.focus = 200;
 
 				camera.focus = 200;

+ 55 - 0
src/core/Color.js
View File 

@@ -0,0 +1,55 @@
 
+var Color = Class.extend
 
+({
 
+	r: null, g: null, b: null, a: null,
 
+	hex: null,
 
+	
+	styleString: null,
 
+	
+	
+	init: function( hex )
 
+	{
 
+		this.setHex( hex ? hex : 0xff000000 );
 
+	},
 
+	
+	setHex: function( hex )
 
+	{
 
+		this.hex = hex;
 
+		this.updateRGBA();
 
+		this.updateStyleString();
 
+	},
 
+	
+	setRGBA: function( r, g, b, a )
 
+	{
 
+		this.r = r;
 
+		this.g = g;
 
+		this.b = b;
 
+		this.a = a;
 
+		
+		this.updateHex();
 
+		this.updateStyleString();
 
+	},
 
+	
+	updateHex: function()
 
+	{
 
+		this.hex = this.a << 24 | this.r << 16 | this.g << 8 | this.b;
 
+	},
 
+	
+	updateRGBA: function()
 
+	{
 
+		this.r = this.hex >> 16 & 0xff;
 
+		this.g = this.hex >> 8 & 0xff;
 
+		this.b = this.hex & 0xff;
 
+		this.a = this.hex >> 24 & 0xff;		
+	},
 
+	
+	updateStyleString: function()
 
+	{
 
+		this.styleString = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + (this.a / 255) + ')';		
+	},
 
+	
+	toString: function()
 
+	{
 
+		return 'Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', a: ' + this.a + ', hex: ' + this.hex + ', style: ' + this.styleString + ' )';	
+	}
 
+	
+});

+ 2 - 4
src/core/Face3.js
View File 

@@ -5,7 +5,6 @@ var Face3 = Vector3.extend
 
 	uv: null,
 
 	uv: null,
 
 	normal: null,
 
 	normal: null,
 
 	color: null,
 
 	color: null,
 
-	colorString: null,
 
 
 
 	init: function(a, b, c, uv, normal, color)
 
 	init: function(a, b, c, uv, normal, color)
 
 	{
 
 	{
 
@@ -20,12 +19,11 @@ var Face3 = Vector3.extend
 
 		this.uv = uv ? uv : [ [0, 0], [0, 0], [0, 0] ];
 
 		this.uv = uv ? uv : [ [0, 0], [0, 0], [0, 0] ];
 
 		this.normal = normal ? normal : new Vector3();
 
 		this.normal = normal ? normal : new Vector3();
 
 
 
-		this.color = color ? color : [0, 0, 0];
 
-		this.colorString = 'rgb(' + this.color[0] + ', ' + this.color[1] + ', ' + this.color[2] + ')';
 
+		this.color = color ? color : new Color();
 
 	},
 
 	},
 
 
 
 	toString: function()
 
 	toString: function()
 
 	{
 
 	{
 
-		return 'Face ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
 
+		return 'Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
 
 	}
 
 	}
 
 });
 
 });

+ 2 - 4
src/core/Face4.js
View File 

@@ -4,7 +4,6 @@ var Face4 = Vector3.extend
 
 	normal: null,
 
 	normal: null,
 
 	screen: null,
 
 	screen: null,
 
 	color: null,
 
 	color: null,
 
-	colorString: null,
 
 
 
 	init: function(a, b, c, d, uv, normal, color)
 
 	init: function(a, b, c, d, uv, normal, color)
 
 	{
 
 	{
 
@@ -17,12 +16,11 @@ var Face4 = Vector3.extend
 
 		
 		
 		this.screen = new Vector3();
 
 		this.screen = new Vector3();
 
 
 
-		this.color = color ? color : [0, 0, 0];
 
-		this.colorString = 'rgb(' + this.color[0] + ', ' + this.color[1] + ', ' + this.color[2] + ')';		
+		this.color = color ? color : new Color();
 
 	},
 
 	},
 
 
 
 	toString: function()
 
 	toString: function()
 
 	{
 
 	{
 
-		return 'Face ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
 
+		return 'Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ', ' + this.d + ' )';
 
 	}
 
 	}
 
 });
 
 });

+ 3 - 26
src/materials/ColorMaterial.js
View File 

@@ -1,32 +1,9 @@
 
 var ColorMaterial = Class.extend

 var ColorMaterial = Class.extend

 ({

 ({

-	color: null,
 
-	opacity: null,
 
-	
-	colorString: null,	

+	color: null,

 
 
-	// Uses hex instead of rgb is for keeping the syntax similar to .as version
 
-	

-	init: function( color, opacity )

-	{

-		this.setColor( color ? color : 0xff0000 );
 
-		this.setOpacity( opacity ? opacity : 1 );
 
-	},
 
-	
-	setColor: function( color )
 
+	init: function( hex, opacity )

 	{
 
 	{
 
-		this.color = color;
 
-		this.updateColorString();
 
-	},
 
-	
-	setOpacity: function( opacity )
 
-	{
 
-		this.opacity = opacity;
 
-		this.updateColorString();		
-	},
 
-	
-	updateColorString: function()
 
-	{
 
-		this.colorString = 'rgba(' + (this.color >> 16 & 0xff) + ',' + (this.color >> 8 & 0xff) + ',' + (this.color & 0xff) + ',' + this.opacity + ')';
 
+		this.color = new Color( (opacity ? (opacity * 0xff) << 24 : 0xff000000) | hex );
 
 	}

 	}

 });
 
 });

+ 3 - 0
src/materials/FaceColorMaterial.js
View File 

@@ -0,0 +1,3 @@
 
+var FaceColorMaterial = Class.extend

+({

+});

+ 5 - 1
src/renderers/CanvasRenderer.js
View File 

@@ -34,7 +34,11 @@ var CanvasRenderer = Renderer.extend
 
 			
 			
 			if (element.material instanceof ColorMaterial)
 
 			if (element.material instanceof ColorMaterial)
 
 			{
 
 			{
 
-				this.context.fillStyle = element.material.colorString;
 
+				this.context.fillStyle = element.material.color.styleString;
 
+			}
 
+			else if (element.material instanceof FaceColorMaterial)
 
+			{
 
+				this.context.fillStyle = element.color.styleString;
 
 			}
 
 			}
 
 			
 			
 			if (element instanceof Face3)
 
 			if (element instanceof Face3)

+ 6 - 4
src/renderers/Renderer.js
View File 

@@ -84,7 +84,7 @@ var Renderer = Class.extend
 
 						   (face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 
 						   (face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 
 						   (face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
 
 						   (face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
 
 						{
 
 						{
 
-							face.screen.z = Math.max(face.a.screen.z, Math.max(face.b.screen.z, face.c.screen.z));
 
+							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
 
 							
 							
 							if (this.face3Pool[face3count] == null)
 
 							if (this.face3Pool[face3count] == null)
 
 								this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
 
 								this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
 
@@ -93,7 +93,8 @@ var Renderer = Class.extend
 
 							this.face3Pool[face3count].b.screen.copy(face.b.screen);
 
 							this.face3Pool[face3count].b.screen.copy(face.b.screen);
 
 							this.face3Pool[face3count].c.screen.copy(face.c.screen);
 
 							this.face3Pool[face3count].c.screen.copy(face.c.screen);
 
 							this.face3Pool[face3count].screen.z = face.screen.z;
 
 							this.face3Pool[face3count].screen.z = face.screen.z;
 
-							this.face3Pool[face3count].material = face.material;
 
+							this.face3Pool[face3count].color = face.color;
 
+							this.face3Pool[face3count].material = object.material;
 
 
 
 							this.renderList.push( this.face3Pool[face3count] );
 
 							this.renderList.push( this.face3Pool[face3count] );
 
 
 
@@ -108,7 +109,7 @@ var Renderer = Class.extend
 
 						   (face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
 
 						   (face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
 
 						   (face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
 
 						   (face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
 
 						{
 
 						{
 
-							face.screen.z = Math.max(face.a.screen.z, Math.max(face.b.screen.z, face.c.screen.z));
 
+							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z + face.d.screen.z) * 0.25;
 
 
 
 							if (this.face4Pool[face4count] == null)
 
 							if (this.face4Pool[face4count] == null)
 
 								this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
 
 								this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
 
@@ -118,7 +119,8 @@ var Renderer = Class.extend
 
 							this.face4Pool[face4count].c.screen.copy(face.c.screen);
 
 							this.face4Pool[face4count].c.screen.copy(face.c.screen);
 
 							this.face4Pool[face4count].d.screen.copy(face.d.screen);
 
 							this.face4Pool[face4count].d.screen.copy(face.d.screen);
 
 							this.face4Pool[face4count].screen.z = face.screen.z;
 
 							this.face4Pool[face4count].screen.z = face.screen.z;
 
-							this.face4Pool[face4count].material = face.material;
 
+							this.face4Pool[face4count].color = face.color;
 
+							this.face4Pool[face4count].material = object.material;
 
 
 
 							this.renderList.push( this.face4Pool[face4count] );
 
 							this.renderList.push( this.face4Pool[face4count] );

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