ParticleCircleMaterial working again with CanvasRenderer

examples/particles_floor.html

@@ -23,9 +23,6 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
 			var SEPARATION = 100;
 			var AMOUNTX = 50;
 			var AMOUNTY = 50;
@@ -46,44 +43,44 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			setInterval(loop, 1000 / 60);
+			setInterval( loop, 1000 / 60 );
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				var material = new THREE.ParticleCircleMaterial(0xffffff, 1);
+				var material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 
-				for (var ix = 0; ix < AMOUNTX; ix++) {
+				for ( var ix = 0; ix < AMOUNTX; ix++ ) {
 
-					for(var iy = 0; iy < AMOUNTY; iy++) {
+					for ( var iy = 0; iy < AMOUNTY; iy++ ) {
 
 						particle = new THREE.Particle( material );
-						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
-						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
+						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
+						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
 						scene.addObject( particle );
 					}
 				}
 
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
+				container.appendChild( stats.domElement );
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
-				document.addEventListener('touchstart', onDocumentTouchStart, false);
-				document.addEventListener('touchmove', onDocumentTouchMove, false);
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 			}
 
 			//
@@ -96,23 +93,23 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if(event.touches.length > 1) {
+				if ( event.touches.length > 1 ) {
 
 					event.preventDefault();
 
-					mouseX = event.touches[0].pageX - windowHalfX;
-					mouseY = event.touches[0].pageY - windowHalfY;
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if(event.touches.length == 1) {
+				if ( event.touches.length == 1 ) {
 
 					event.preventDefault();
 
-					mouseX = event.touches[0].pageX - windowHalfX;
-					mouseY = event.touches[0].pageY - windowHalfY;
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
 			}
 
@@ -120,10 +117,10 @@
 
 			function loop() {
 
-				camera.position.x += (mouseX - camera.position.x) * .05;
-				camera.position.y += (-mouseY - camera.position.y) * .05;
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 				stats.update();
 			}

examples/particles_random.html

@@ -61,7 +61,7 @@
 
 				for (var i = 0; i < 1000; i++) {
 
-					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( Math.random() * 0x808008 + 0x808080, 1 ) );
+					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0x808008 + 0x808080, opacity: 1 } ) );
 					particle.position.x = Math.random() * 2000 - 1000;
 					particle.position.y = Math.random() * 2000 - 1000;
 					particle.position.z = Math.random() * 2000 - 1000;

examples/particles_waves.html

@@ -64,7 +64,7 @@
 				particles = new Array();
 
 				var i = 0;
-				var material = new THREE.ParticleCircleMaterial( 0xffffff, 1 );
+				var material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 
 				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
 

src/core/Color.js

@@ -29,7 +29,7 @@ THREE.Color.prototype = {
 
 	setHex: function ( hex ) {
 
-		this.hex = Math.floor( hex ).toString(16).length < 8 ? 0xff << 24 ^ hex : hex;
+		this.hex = ( ~~hex ).toString( 16 ).length < 8 ? 0xff << 24 ^ hex : hex;
 
 		if ( this.autoUpdate ) {
 
@@ -67,7 +67,7 @@ THREE.Color.prototype = {
 
 	updateHex: function () {
 
-		this.hex = Math.floor( this.a * 255 ) << 24 ^ Math.floor( this.r * 255 ) << 16 ^ Math.floor( this.g * 255 ) << 8 ^ Math.floor( this.b * 255 );
+		this.hex = ~~( this.a * 255 ) << 24 ^ ~~( this.r * 255 ) << 16 ^ ~~( this.g * 255 ) << 8 ^ ~~( this.b * 255 );
 
 	},
 
@@ -82,7 +82,7 @@ THREE.Color.prototype = {
 
 	updateStyleString: function () {
 
-		this.__styleString = 'rgba(' + Math.floor( this.r * 255 ) + ',' + Math.floor( this.g * 255 ) + ',' + Math.floor( this.b * 255 ) + ',' + this.a + ')';
+		this.__styleString = 'rgba(' + ~~( this.r * 255 ) + ',' + ~~( this.g * 255 ) + ',' + ~~( this.b * 255 ) + ',' + this.a + ')';
 
 	},
 

src/materials/LineBasicMaterial.js

@@ -4,14 +4,14 @@
  * parameters = {
  *  color: <hex>,
  *  opacity: <float>,
- *  blending: THREE.NormalBlending, 
+ *  blending: THREE.NormalBlending,
  *  linewidth: <float>
  * }
  */
 
 THREE.LineBasicMaterial = function ( parameters ) {
 
-	this.color = new THREE.Color( 0xeeeeee );
+	this.color = new THREE.Color( 0xff0000 );
 	this.opacity = 1;
 	this.blending = THREE.NormalBlending;
 	this.linewidth = 1;
@@ -27,7 +27,12 @@ THREE.LineBasicMaterial = function ( parameters ) {
 
 	this.toString = function () {
 
-		return 'THREE.LineBasicMaterial ( params: ' + this.params + ' )';
+		return 'THREE.LineBasicMaterial (<br/>' +
+			'color: ' + this.color + '<br/>' +
+			'opacity: ' + this.opacity + '<br/>' +
+			'blending: ' + this.blending + '<br/>' +
+			'linewidth: ' + this.linewidth +'<br/>' +
+			')';
 
 	};
 

src/materials/MeshBasicMaterial.js

@@ -16,7 +16,7 @@ THREE.MeshBasicMaterial = function ( parameters ) {
 
 	this.id = THREE.MeshBasicMaterialCounter.value ++;
 
-	this.color = new THREE.Color( 0xeeeeee );
+	this.color = new THREE.Color( 0xff0000 );
 	this.map = null;
 	this.opacity = 1;
 	this.blending = THREE.NormalBlending;

src/materials/MeshPhongMaterial.js

@@ -21,7 +21,7 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 
 	this.id = THREE.MeshPhongMaterialCounter.value ++;
 
-	this.color = new THREE.Color( 0xeeeeee );
+	this.color = new THREE.Color( 0xff0000 );
 	this.map = null;
 	this.ambient = new THREE.Color( 0x050505 );
 	this.specular = new THREE.Color( 0x111111 );

src/materials/ParticleBasicMaterial.js

@@ -1,15 +1,40 @@
 /**
  * @author mr.doob / http://mrdoob.com/
+ *
+ * parameters = {
+ *  color: <hex>,
+ *  map: new THREE.UVMap( <Image> ),
+ *  opacity: <float>,
+ *  blending: THREE.NormalBlending
+ * }
  */
 
-THREE.ParticleBitmapMaterial = function ( bitmap ) {
+THREE.ParticleBasicMaterial = function ( parameters ) {
 
-	this.bitmap = bitmap;
-	this.offset = new THREE.Vector2();
+	this.color = new THREE.Color( 0xff0000 );
+	this.map = null;
+	this.opacity = 1;
+	this.blending = THREE.NormalBlending;
+
+	this.offset = new THREE.Vector2(); // TODO: expose to parameters
+
+	if ( parameters ) {
+
+		if ( parameters.color !== undefined ) this.color.setHex( parameters.color );
+		if ( parameters.map !== undefined ) this.map = parameters.map;
+		if ( parameters.opacity !== undefined ) this.opacity  = parameters.opacity;
+		if ( parameters.blending !== undefined ) this.blending = parameters.blending;
+
+	}
 
 	this.toString = function () {
 
-		return 'THREE.ParticleBitmapMaterial ( bitmap: ' + this.bitmap + ' )';
+		return 'THREE.ParticleBasicMaterial (<br/>' +
+			'color: ' + this.color + '<br/>' +
+			'map: ' + this.map + '<br/>' +
+			'opacity: ' + this.opacity + '<br/>' +
+			'blending: ' + this.blending + '<br/>' +
+			')';
 
 	};
 

src/materials/ParticleCircleMaterial.js

@@ -1,14 +1,34 @@
 /**
  * @author mr.doob / http://mrdoob.com/
+ *
+ * parameters = {
+ *  color: <hex>,
+ *  opacity: <float>,
+ *  blending: THREE.NormalBlending
+ * }
  */
 
-THREE.ParticleCircleMaterial = function ( hex, opacity ) {
+THREE.ParticleCircleMaterial = function ( parameters ) {
 
-	this.color = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ hex );
+	this.color = new THREE.Color( 0xff0000 );
+	this.opacity = 1;
+	this.blending = THREE.NormalBlending;
+
+	if ( parameters ) {
+
+		if ( parameters.color !== undefined ) this.color.setHex( parameters.color );
+		if ( parameters.opacity !== undefined ) this.opacity  = parameters.opacity;
+		if ( parameters.blending !== undefined ) this.blending = parameters.blending;
+
+	}
 
 	this.toString = function () {
 
-		return 'THREE.ParticleCircleMaterial ( color: ' + this.color + ' )';
+		return 'THREE.ParticleCircleMaterial (<br/>' +
+			'color: ' + this.color + '<br/>' +
+			'opacity: ' + this.opacity + '<br/>' +
+			'blending: ' + this.blending + '<br/>' +
+			')';
 
 	};
 

src/renderers/CanvasRenderer.js

@@ -306,6 +306,8 @@ THREE.CanvasRenderer = function () {
 
 	}
 
+	// TODO: This can be done just once
+
 	function calculateLight( scene, element, color ) {
 
 		var l, ll, light, lightColor,
@@ -441,7 +443,7 @@ THREE.CanvasRenderer = function () {
 
 			} else {
 
-				_color = material.color;
+				_color.__styleString = material.color.__styleString;
 
 			}
 
@@ -554,12 +556,20 @@ THREE.CanvasRenderer = function () {
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
-			_light.copyRGB( _ambientLight );
-			calculateFaceLight( scene, element, _light );
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateFaceLight( scene, element, _light );
+
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color.__styleString = material.color.__styleString;
 
-			_color.copyRGBA( material.color );
-			_color.multiplySelfRGB( _light );
-			_color.updateStyleString();
+			}
 
 		}
 
@@ -642,12 +652,20 @@ THREE.CanvasRenderer = function () {
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
-			_light.copyRGB( _ambientLight );
-			calculateFaceLight( scene, element, _light );
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateFaceLight( scene, element, _light );
 
-			_color.copyRGBA( material.color );
-			_color.multiplySelfRGB( _light );
-			_color.updateStyleString();
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color.__styleString = material.color.__styleString;
+
+			}
 
 		}