Browse Source

Removed alpha component from the Color class
GouraudShading and PhongShading ⟶ SmoothShading

Mr.doob 14 năm trước cách đây
mục cha
commit
51f91fdd03

+ 2 - 2
examples/lights_pointlights_gl.html

@@ -10,7 +10,7 @@
 				overflow: hidden;
 			}
 
-			#info {			
+			#info {
 				position: absolute;
 				top: 0px; width: 100%;
 				color: #ffffff;
@@ -69,7 +69,7 @@
 				loader.loadAscii( "obj/walt/WaltHead_slim.js", function( geometry ) {
 				
 					//object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.FlatShading } )  );
-					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.PhongShading } )  );
+					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading } )  );
 					object.scale.x = object.scale.y = object.scale.z = 0.80;
 					object.overdraw = true;
 					scene.addObject( object );

+ 15 - 5
examples/materials.html

@@ -66,19 +66,29 @@
 				// Spheres
 
 				var geometry = new Sphere( 100, 14, 8, true );
+				// var geometry = new Sphere( 100, 44, 28, true );
 
 				var generatedTexture = new THREE.Texture( generateTexture() );
 				generatedTexture.loaded = 1;
-				
+
 				var materials = [];
 				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true } );
 				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true } );
 				materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10 } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshNormalMaterial( ), overdraw: true, doubleSided: false } );
+				materials.push( { material: new THREE.MeshNormalMaterial( { shading: THREE.GouraudShading } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshBasicMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
 
+				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
+
+					var face = geometry.faces[ i ];
+					if ( Math.random() > 0.7 ) face.material = [ materials[ Math.floor( Math.random() * materials.length )  ].material ];
+
+				}
+
+				materials.push( { material: new THREE.MeshFaceMaterial(), overdraw: false, doubleSided: true } );
+
 				objects = [];
 
 				for ( var i = 0, l = materials.length; i < l; i ++ ) {
@@ -102,7 +112,7 @@
 
 				//particleLight = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xffffff } ) );
 				//particleLight.scale.x = particleLight.scale.y = particleLight.scale.z = 4;
-				particleLight = new THREE.Mesh( new Sphere( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				particleLight = new THREE.Mesh( new Sphere( 4, 8, 4 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				scene.addObject( particleLight );
 
 				// Lights
@@ -120,7 +130,7 @@
 				scene.addLight( pointLight );
 
 				renderer = new THREE.CanvasRenderer();
-				//renderer = new THREE.WebGLRenderer();
+				// renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
@@ -159,7 +169,7 @@
 				for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
 
 					x = j % 256;
-					y = x == 0 ? y + 1 : y;
+					y = ~~( j / 256 );
 
 					image.data[ i + 2 ] = Math.floor( x ^ y );
 					image.data[ i + 3 ] = 255;

+ 5 - 7
src/core/Color.js

@@ -11,12 +11,11 @@ THREE.Color = function ( hex ) {
 
 THREE.Color.prototype = {
 
-	setRGBA: function ( r, g, b, a ) {
+	setRGB: function ( r, g, b ) {
 
 		this.r = r;
 		this.g = g;
 		this.b = b;
-		this.a = a;
 
 		if ( this.autoUpdate ) {
 
@@ -29,7 +28,7 @@ THREE.Color.prototype = {
 
 	setHex: function ( hex ) {
 
-		this.hex = ( ( hex = ~~ hex ) & 0xffffff ) == hex ? 0xff << 24 ^ hex : hex;
+		this.hex = ( ~~ hex ) & 0xffffff;
 
 		if ( this.autoUpdate ) {
 
@@ -42,13 +41,12 @@ THREE.Color.prototype = {
 
 	updateHex: function () {
 
-		this.hex = ~~( this.a * 255 ) << 24 ^ ~~( this.r * 255 ) << 16 ^ ~~( this.g * 255 ) << 8 ^ ~~( this.b * 255 );
+		this.hex = ~~( this.r * 255 ) << 16 ^ ~~( this.g * 255 ) << 8 ^ ~~( this.b * 255 );
 
 	},
 
 	updateRGBA: function () {
 
-		this.a = ( this.hex >> 24 & 255 ) / 255;
 		this.r = ( this.hex >> 16 & 255 ) / 255;
 		this.g = ( this.hex >> 8 & 255 ) / 255;
 		this.b = ( this.hex & 255 ) / 255;
@@ -57,13 +55,13 @@ THREE.Color.prototype = {
 
 	updateStyleString: function () {
 
-		this.__styleString = 'rgba(' + ~~( this.r * 255 ) + ',' + ~~( this.g * 255 ) + ',' + ~~( this.b * 255 ) + ',' + this.a + ')';
+		this.__styleString = 'rgb(' + ~~( this.r * 255 ) + ',' + ~~( this.g * 255 ) + ',' + ~~( this.b * 255 ) + ')';
 
 	},
 
 	toString: function () {
 
-		return 'THREE.Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', a: ' + this.a + ', hex: ' + this.hex + ' )';
+		return 'THREE.Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', hex: ' + this.hex + ' )';
 
 	}
 

+ 1 - 3
src/materials/Material.js

@@ -1,11 +1,9 @@
 /**
  * @author mr.doob / http://mrdoob.com/
- * }
  */
 
 THREE.FlatShading = 0;
-THREE.GouraudShading = 1;
-THREE.PhongShading = 2;
+THREE.SmoothShading = 1;
 
 THREE.NormalBlending = 0;
 THREE.AdditiveBlending = 1;

+ 1 - 1
src/materials/MeshBasicMaterial.js

@@ -4,7 +4,7 @@
  *
  * parameters = {
  *  color: <hex>,
- *  map: new THREE.UVMap( <Image> ),
+ *  map: new THREE.Texture( <Image> ),
  *  opacity: <float>,
  *  blending: THREE.NormalBlending,
  *  wireframe: <boolean>,

+ 2 - 2
src/materials/MeshLambertMaterial.js

@@ -6,7 +6,7 @@
  *  color: <hex>,
  *  map: new THREE.UVMap( <Image> ),
  *  opacity: <float>,
- *  shading: THREE.GouraudShading,
+ *  shading: THREE.SmoothShading,
  *  blending: THREE.NormalBlending,
  *  wireframe: <boolean>,
  *  wireframe_linewidth: <float>
@@ -20,7 +20,7 @@ THREE.MeshLambertMaterial = function ( parameters ) {
 	this.color = new THREE.Color( 0xeeeeee );
 	this.map = null;
 	this.opacity = 1;
-	this.shading = THREE.GouraudShading;
+	this.shading = THREE.SmoothShading;
 	this.blending = THREE.NormalBlending;
 	this.wireframe = false;
 	this.wireframe_linewidth = 1;

+ 2 - 2
src/materials/MeshNormalMaterial.js

@@ -5,13 +5,13 @@
  *  opacity: <float>,
  *  shading: THREE.FlatShading,
  *  blending: THREE.NormalBlending
- * } 
+ * }
  */
 
 THREE.MeshNormalMaterial = function ( parameters ) {
 
 	this.opacity = 1;
-    this.shading = THREE.FlatShading;
+	this.shading = THREE.FlatShading;
 	this.blending = THREE.NormalBlending;
 
 

+ 2 - 2
src/materials/MeshPhongMaterial.js

@@ -10,7 +10,7 @@
  *  specular_map: new THREE.UVMap( <Image> ),
  *  shininess: <float>,
  *  opacity: <float>,
- *  shading: THREE.PhongShading,
+ *  shading: THREE.SmoothShading,
  *  blending: THREE.AdditiveBlending,
  *  wireframe: <boolean>,
  *  wireframe_linewidth: <float>
@@ -28,7 +28,7 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 	this.specular_map = null;
 	this.shininess = 30;
 	this.opacity = 1;
-	this.shading = THREE.PhongShading;
+	this.shading = THREE.SmoothShading;
 	this.blending = THREE.NormalBlending;
 	this.wireframe = false;
 	this.wireframe_linewidth = 1;

+ 1 - 1
src/materials/ParticleBasicMaterial.js

@@ -3,7 +3,7 @@
  *
  * parameters = {
  *  color: <hex>,
- *  map: new THREE.UVMap( <Image> ),
+ *  map: new THREE.Texture( <Image> ),
  *  opacity: <float>,
  *  blending: THREE.NormalBlending
  * }

+ 5 - 5
src/renderers/CanvasRenderer.js

@@ -312,9 +312,9 @@ THREE.CanvasRenderer = function () {
 		var l, ll, light, lightColor,
 		lights = scene.lights;
 
-		_ambientLight.setRGBA( 0, 0, 0, 1 );
-		_directionalLights.setRGBA( 0, 0, 0, 1 );
-		_pointLights.setRGBA( 0, 0, 0, 1 );
+		_ambientLight.setRGB( 0, 0, 0 );
+		_directionalLights.setRGB( 0, 0, 0 );
+		_pointLights.setRGB( 0, 0, 0 );
 
 		for ( l = 0, ll = lights.length; l < ll; l++ ) {
 
@@ -612,7 +612,7 @@ THREE.CanvasRenderer = function () {
 
 			/*
 			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
-			_color.setRGBA( _w, _w, _w, 1 );
+			_color.setRGB( _w, _w, _w );
 			*/
 
 			_2near = material.__2near;
@@ -721,7 +721,7 @@ THREE.CanvasRenderer = function () {
 
 			/*
 			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
-			_color.setRGBA( _w, _w, _w, 1 );
+			_color.setRGB( _w, _w, _w );
 			*/
 
 			_2near = material.__2near;

+ 7 - 7
src/renderers/SVGRenderer.js

@@ -208,9 +208,9 @@ THREE.SVGRenderer = function () {
 		var l, ll, light, lightColor,
 		lights = scene.lights;
 
-		_ambientLight.setRGBA( 0, 0, 0, 1 );
-		_directionalLights.setRGBA( 0, 0, 0, 1 );
-		_pointLights.setRGBA( 0, 0, 0, 1 );
+		_ambientLight.setRGB( 0, 0, 0 );
+		_directionalLights.setRGB( 0, 0, 0 );
+		_pointLights.setRGB( 0, 0, 0 );
 
 		for ( l = 0, ll = lights.length; l < ll; l++ ) {
 
@@ -359,11 +359,11 @@ THREE.SVGRenderer = function () {
 		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
 			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear) );
-			_color.setRGBA( _w, _w, _w, 1 );
+			_color.setRGB( _w, _w, _w );
 
 		} else if ( material instanceof THREE.MeshNormalMaterial ) {
 
-			_color.setRGBA( normalToComponent( element.normalWorld.x ), normalToComponent( element.normalWorld.y ), normalToComponent( element.normalWorld.z ), 1 );
+			_color.setRGB( normalToComponent( element.normalWorld.x ), normalToComponent( element.normalWorld.y ), normalToComponent( element.normalWorld.z ) );
 
 		}
 
@@ -415,11 +415,11 @@ THREE.SVGRenderer = function () {
 		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
 			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear) );
-			_color.setRGBA( _w, _w, _w, 1 );
+			_color.setRGB( _w, _w, _w );
 
 		} else if ( material instanceof THREE.MeshNormalMaterial ) {
 
-			_color.setRGBA( normalToComponent( element.normalWorld.x ), normalToComponent( element.normalWorld.y ), normalToComponent( element.normalWorld.z ), 1 );
+			_color.setRGB( normalToComponent( element.normalWorld.x ), normalToComponent( element.normalWorld.y ), normalToComponent( element.normalWorld.z ) );
 
 		}
 

+ 6 - 6
src/renderers/WebGLRenderer.js

@@ -199,17 +199,17 @@ THREE.WebGLRenderer = function ( scene ) {
 		vertexIndex = 0,
 
 		useSmoothNormals = false;
-		
+
 		// need to find out if there is any material in the object
 		// (among all mesh materials and also face materials)
 		// which would need smooth normals
-		
+
 		function needsSmoothNormals( material ) {
-			
-			return material.shading != undefined && ( material.shading == THREE.GouraudShading || material.shading == THREE.PhongShading );
-			
+
+			return material.shading != undefined && material.shading == THREE.SmoothShading;
+
 		}
-		
+
 		for ( m = 0, ml = object.material.length; m < ml; m++ ) {
 
 			meshMaterial = object.material[ m ];