Experimenting with different syntax for materials (just hex instead of...

Experimenting with different syntax for materials (just hex instead of THREE.Color in API), checking how it feels with shaders example.

examples/materials_shaders.html

@@ -70,10 +70,9 @@
 		<script type="text/javascript" src="../src/objects/Particle.js"></script>
 		<script type="text/javascript" src="../src/objects/Line.js"></script>
 		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
@@ -180,7 +179,7 @@
 
 				// light representation
 				sphere = new Sphere( 100, 16, 8, 1 );
-				lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
+				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } );
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 				lightMesh.position = pointLight.position;
 				lightMesh.overdraw = true;
@@ -192,26 +191,26 @@
 
 				var y1 = 0, y2 = -200;
 				
-				addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) );
-				addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) );
+				addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, diffuse: 0x000000, specular: 0x555555, shininess: 30 } );
+				addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x050505 } );
 
-				addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) );
-				addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) );
+				addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0xffffff, specular: 0x555555, shininess: 30 } );
+				addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0xffffff } );
 
-				addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) );
-				addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) );
+				addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0xff5500, specular: 0x555555, shininess: 10 } );
+				addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0xff5500 } );
 
-				addMesh( sphere, 1,    0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) );
-				addMesh( sphere, 1,    0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
+				addMesh( sphere, 1,    0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0xffaa00, specular: 0x555555, shininess: 30 } );
+				addMesh( sphere, 1,    0, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0xffaa00 } );
 
-				addMesh( sphere, 1,  200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) );
-				addMesh( sphere, 1,  200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) );
+				addMesh( sphere, 1,  200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0x55ff00, specular: 0x555555, shininess: 30 } );
+				addMesh( sphere, 1,  200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x55ff00 } );
 
-				addMesh( sphere, 1,  400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) );
-				addMesh( sphere, 1,  400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) );
+				addMesh( sphere, 1,  400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0x0055ff, specular: 0x555555, shininess: 30 } );
+				addMesh( sphere, 1,  400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x0055ff } );
 
-				addMesh( sphere, 1,  600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) );
-				addMesh( sphere, 1,  600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) );
+				addMesh( sphere, 1,  600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0x5500ff, specular: 0x555555, shininess: 30 } );
+				addMesh( sphere, 1,  600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x5500ff } );
 
 				if ( render_gl ) {
 					try {

src/materials/MeshBasicMaterial.js

@@ -3,7 +3,7 @@
  * @author alteredq / http://alteredqualia.com/
  
  * params = {
- * 	color: new THREE.Color(),
+ * 	color: hex,
  *  bitmap: new THREE.UVMap( <Image> ),
  *  alpha: float,
  *  blending: THREE.AdditiveBlending,
@@ -41,8 +41,9 @@ THREE.MeshBasicMaterial.setDefaultParams = function ( override ) {
         
     if ( override != undefined ) {
         
-        if( override.color != undefined ) params.color = override.color;
+        if( override.color != undefined ) params.color = new THREE.Color( override.color );
         if( override.bitmap != undefined ) params.bitmap = override.bitmap;
+        
         if( override.alpha != undefined ) params.alpha = override.alpha;
         if( override.blending != undefined ) params.blending = override.blending;
         if( override.wireframe != undefined ) params.wireframe = override.wireframe;

src/materials/MeshLambertMaterial.js

@@ -3,7 +3,7 @@
  * @author alteredq / http://alteredqualia.com/
  
  * params = {
- * 	diffuse: new THREE.Color(),
+ * 	diffuse: hex,
  *  diffuse_map: new THREE.UVMap( <Image> ),
  *  alpha: float,
  *  shading: THREE.Gourad,
@@ -14,47 +14,48 @@
 
 THREE.MeshLambertMaterial = function ( params ) {
 
-    this.id = THREE.MeshLambertMaterial.value ++;
-    
-    this.params = this.setDefaultParams( params );
-    
+	this.id = THREE.MeshLambertMaterial.value ++;
+	
+	this.params = this.setDefaultParams( params );
+	
 	this.toString = function () {
 
 		return 'THREE.MeshLambertMaterial ( diffuse: ' + this.params.diffuse 
-        + ', alpha: ' + this.params.alpha 
-        + ', shading: ' + this.params.shading 
-        + ', blending: ' + this.params.blending 
-        + ', wireframe: ' + this.params.wireframe 
-        + ', id: ' + this.id +' )';
+		+ ', alpha: ' + this.params.alpha 
+		+ ', shading: ' + this.params.shading 
+		+ ', blending: ' + this.params.blending 
+		+ ', wireframe: ' + this.params.wireframe 
+		+ ', id: ' + this.id +' )';
 
 	};
 
 };
 
 THREE.MeshLambertMaterial.setDefaultParams = function ( override ) {
-    
-    var params = {
-        diffuse: new THREE.Color( 0xeeeeee ),
-        diffuse_map: null,
-        alpha: 1.0,
-        shading: THREE.Gourad,
-        blending: THREE.AdditiveBlending,
-        wireframe: false
-    };
-        
-    if ( override != undefined ) {
-        
-        if( override.diffuse != undefined ) params.diffuse = override.diffuse;
-        if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map;
-        if( override.alpha != undefined ) params.alpha = override.alpha;
-        if( override.shading != undefined ) params.shading = override.shading;
-        if( override.blending != undefined ) params.blending = override.blending;
-        if( override.wireframe != undefined ) params.wireframe = override.wireframe;
-        
-    }
-    
-    return params;
-    
+	
+	var params = {
+		diffuse: new THREE.Color( 0xeeeeee ),
+		diffuse_map: null,
+		alpha: 1.0,
+		shading: THREE.Gourad,
+		blending: THREE.AdditiveBlending,
+		wireframe: false
+	};
+		
+	if ( override != undefined ) {
+		
+		if( override.diffuse != undefined ) params.diffuse = new THREE.Color( override.diffuse );
+		if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map;
+		
+		if( override.alpha != undefined ) params.alpha = override.alpha;
+		if( override.shading != undefined ) params.shading = override.shading;
+		if( override.blending != undefined ) params.blending = override.blending;
+		if( override.wireframe != undefined ) params.wireframe = override.wireframe;
+		
+	}
+	
+	return params;
+	
 };
 
 THREE.MeshLambertMaterial = { value: 0 };

src/materials/MeshPhongMaterial.js

@@ -3,9 +3,9 @@
  * @author alteredq / http://alteredqualia.com/
  
  * params = {
- * 	ambient: new THREE.Color(),
- * 	diffuse: new THREE.Color(),
- * 	specular: new THREE.Color(),
+ * 	ambient: hex,
+ * 	diffuse: hex,
+ * 	specular: hex,
  *  diffuse_map: new THREE.UVMap( <Image> ),
  *  specular_map: new THREE.UVMap( <Image> ),
  *  shininess: float,
@@ -18,58 +18,61 @@
 
 THREE.MeshPhongMaterial = function ( ambient, diffuse, specular, shininess, opacity ) {
 
-    this.id = THREE.MeshPhongMaterial.value ++;
-    
-    this.params = this.setDefaultParams( params );
-    
+	this.id = THREE.MeshPhongMaterial.value ++;
+	
+	this.params = this.setDefaultParams( params );
+	
 	this.toString = function () {
 
 		return 'THREE.MeshPhongMaterial ( <br/>ambient: ' + this.params.ambient_color
-                + ', <br/>diffuse: ' + this.params.diffuse 
-                + ', <br/>specular: ' + this.params.specular 
-                + ', <br/>shininess: ' + this.params.shininess 
-                + ', <br/>alpha: ' + this.params.alpha
-                + ', <br/>shading: ' + this.params.shading
-                + ', <br/>wireframe: ' + this.params.wireframe
-                + ', <br/>id: ' + this.params.id        
-                + ')';
+				+ ', <br/>diffuse: ' + this.params.diffuse 
+				+ ', <br/>specular: ' + this.params.specular 
+				+ ', <br/>shininess: ' + this.params.shininess 
+				+ ', <br/>alpha: ' + this.params.alpha
+				+ ', <br/>shading: ' + this.params.shading
+				+ ', <br/>wireframe: ' + this.params.wireframe
+				+ ', <br/>id: ' + this.params.id        
+				+ ')';
 
 	};
 
 };
 
 THREE.MeshPhongMaterial.setDefaultParams = function ( override ) {
-    
-    var params = {
-        ambient: new THREE.Color( 0x050505 ),
-        diffuse: new THREE.Color( 0xeeeeee ),
-        specular: new THREE.Color( 0x111111 ),
-        diffuse_map: null,
-        specular_map: null,
-        shininess: 30,
-        alpha: 1.0,
-        shading: THREE.Gourad,
-        blending: THREE.AdditiveBlending,
-        wireframe: false
-    };
-        
-    if ( override != undefined ) {
-        
-        if( override.ambient != undefined ) params.ambient = override.ambient;
-        if( override.diffuse != undefined ) params.diffuse = override.diffuse;
-        if( override.specular != undefined ) params.specular = override.specular;
-        if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map;
-        if( override.specular_map != undefined ) params.specular_map = override.specular_map;
-        if( override.shininess != undefined ) params.shininess = override.shininess;
-        if( override.alpha != undefined ) params.alpha = override.alpha;
-        if( override.shading != undefined ) params.shading = override.shading;
-        if( override.blending != undefined ) params.blending = override.blending;
-        if( override.wireframe != undefined ) params.wireframe = override.wireframe;
-        
-    }
-    
-    return params;
-    
+	
+	var params = {
+		ambient: new THREE.Color( 0x050505 ),
+		diffuse: new THREE.Color( 0xeeeeee ),
+		specular: new THREE.Color( 0x111111 ),
+		diffuse_map: null,
+		specular_map: null,
+		shininess: 30,
+		alpha: 1.0,
+		shading: THREE.Gourad,
+		blending: THREE.AdditiveBlending,
+		wireframe: false
+	};
+		
+	if ( override != undefined ) {
+		
+		if( override.ambient != undefined ) params.ambient = new THREE.Color( override.ambient );
+		if( override.diffuse != undefined ) params.diffuse = new THREE.Color( override.diffuse );
+		if( override.specular != undefined ) params.specular = new THREE.Color( override.specular );
+		
+		if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map;
+		if( override.specular_map != undefined ) params.specular_map = override.specular_map;
+		
+		if( override.shininess != undefined ) params.shininess = override.shininess;
+		
+		if( override.alpha != undefined ) params.alpha = override.alpha;
+		if( override.shading != undefined ) params.shading = override.shading;
+		if( override.blending != undefined ) params.blending = override.blending;
+		if( override.wireframe != undefined ) params.wireframe = override.wireframe;
+		
+	}
+	
+	return params;
+	
 };
 
 THREE.MeshPhongMaterial = { value: 0 };