Figured out why Canvas/SVG wasn't rendering... someone changed camera.near/far...

Figured out why Canvas/SVG wasn't rendering... someone changed camera.near/far to camera.zNear/zFar :P

examples/canvasrenderer_sandbox.html

@@ -114,7 +114,7 @@
 			var debugContext;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			setInterval( render, 1000 / 60 );
 
 			function init() {
 
@@ -259,7 +259,7 @@
 
 			//
 
-			function loop() {
+			function render() {
 
 				if ( moveForward ) camera.position.z -= 5;
 				if ( moveBackwards ) camera.position.z += 5;
@@ -316,6 +316,7 @@
 				renderer.render(scene, camera);
 
 				stats.update();
+
 			}
 
 		</script>

src/cameras/Camera.js

@@ -4,14 +4,9 @@
  */
 
 THREE.Camera = function( FOV, aspect, zNear, zFar, renderer, target ) {
-	
-	// call super
-	
+
 	THREE.Object3D.call( this );
-	
 
-	// set arguments
-	
 	this.FOV              = FOV      || 50;
 	this.aspect           = aspect   || 1.0;
 	this.zNear            = zNear    || 0.1;
@@ -22,14 +17,11 @@ THREE.Camera = function( FOV, aspect, zNear, zFar, renderer, target ) {
 	this.useTarget        = true;
 	this.up               = new THREE.Vector3( 0, 1, 0 );
 
-
-	// init
-	
 	this.inverseMatrix     = new THREE.Matrix4();
 	this.projectionMatrix = null;
 
 	// movement
-	
+
 	this.tmpVec = new THREE.Vector3();
 
 	this.translateX = function ( amount ) {
@@ -58,7 +50,7 @@ THREE.Camera = function( FOV, aspect, zNear, zFar, renderer, target ) {
 	};
 
 	this.updateProjectionMatrix();
-	
+
 }
 
 THREE.Camera.prototype             = new THREE.Object3D();
@@ -73,10 +65,10 @@ THREE.Camera.prototype.supr        = THREE.Object3D.prototype;
 */
 
 THREE.Camera.prototype.updateProjectionMatrix = function() {
-	
+
 	this.projectionMatrix = THREE.Matrix4.makePerspective( this.FOV, this.aspect, this.zNear, this.zFar );
 
-} 
+}
 
 
 /*
@@ -84,38 +76,38 @@ THREE.Camera.prototype.updateProjectionMatrix = function() {
  */
 
 THREE.Camera.prototype.update = function( parentGlobalMatrix, forceUpdate, camera ) {
-	
+
 	if( this.useTarget ) {
-		
+
 		// local
-		
+
 		this.localMatrix.lookAt( this.position, this.target.position, this.up );
-		
-		
+
+
 		// global
-		
+
 		if( parentGlobalMatrix )
 			this.globalMatrix.multiply( parentGlobalMatrix, this.localMatrix );
 		else
 			this.globalMatrix.copy( this.localMatrix );
 
 		THREE.Matrix4.makeInvert( this.globalMatrix, this.inverseMatrix );
-		//THREE.Matrix4.makeInvertTo( this.globalMatrix, this.inverseMatrix );	
-		
+		//THREE.Matrix4.makeInvertTo( this.globalMatrix, this.inverseMatrix );
+
 		forceUpdate = true;
-	
+
 	} else {
-		
+
 		if( this.autoUpdateMatrix )
-			forceUpdate |= this.updateMatrix();			
-			
+			forceUpdate |= this.updateMatrix();
+
 		if( forceUpdate || this.matrixNeedsToUpdate ) {
-			
+
 			if( parentGlobalMatrix )
 				this.globalMatrix.multiply( parentGlobalMatrix, this.localMatrix );
 			else
 				this.globalMatrix.copy( this.localMatrix );
-			
+
 			this.matrixNeedsToUpdate = false;
 			forceUpdate              = true;
 
@@ -125,7 +117,7 @@ THREE.Camera.prototype.update = function( parentGlobalMatrix, forceUpdate, camer
 		}
 
 	}
-	
+
 	// update children
 
 	for( var i = 0; i < this.children.length; i++ )
@@ -145,11 +137,11 @@ THREE.Camera.prototype.frustumContains = function( object3D ) {
 
 	// object pos
 
-	var vx0 = object3D.globalMatrix.n14, 
+	var vx0 = object3D.globalMatrix.n14,
 	    vy0 = object3D.globalMatrix.n24,
 		vz0 = object3D.globalMatrix.n34;
-		
-		
+
+
 	// check z
 
 	var inverse = this.inverseMatrix;
@@ -158,10 +150,10 @@ THREE.Camera.prototype.frustumContains = function( object3D ) {
 
 	if( vz1 - radius > -this.zNear )
 		return false;
-		
+
 	if( vz1 + radius < -this.zFar )
 		return false;
-	
+
 
 	// check x
 
@@ -183,18 +175,18 @@ THREE.Camera.prototype.frustumContains = function( object3D ) {
 	// check y
 
 	var vy1 = ( inverse.n21 * vx0 + inverse.n22 * vy0 + inverse.n23 * vz0 + inverse.n24 ) * perspective.n22 * ooZ * this.screenCenterY;
-		
+
 	if( vy1 + radius < -this.screenCenterY )
 		return false;
-		
+
 	if( vy1 - radius > this.screenCenterY )
-		return false;		
+		return false;
 
 
 	// inside
 
 	object3D.screenPosition.set( vx1, vy1, vz1, radius );
-	
+
 	return true;
 
 };

src/core/Matrix4.js

@@ -17,7 +17,7 @@ THREE.Matrix4 = function ( n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33
 
 	this.flat = new Array( 16 );
 	this.m33 = new THREE.Matrix3();
-	
+
 };
 
 THREE.Matrix4.prototype = {
@@ -86,14 +86,14 @@ THREE.Matrix4.prototype = {
 	},
 
 	multiplyVector3OnlyZ: function( v ) {
-		
+
 		var vx = v.x, vy = v.y, vz = v.z,
 		d = 1 / ( this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 );
 
 		return ( this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 ) * d;
 
 	},
-	
+
 	multiplyVector4: function ( v ) {
 
 		var vx = v.x, vy = v.y, vz = v.z, vw = v.w;
@@ -208,7 +208,7 @@ THREE.Matrix4.prototype = {
 		r[ 13 ] = this.n24;
 		r[ 14 ] = this.n34;
 		r[ 15 ] = this.n44;
-		
+
 		return this;
 
 	},
@@ -338,7 +338,7 @@ THREE.Matrix4.prototype = {
 	flatten: function() {
 
 		var flat = this.flat;
-		
+
 		flat[ 0 ] = this.n11;
 		flat[ 1 ] = this.n21;
 		flat[ 2 ] = this.n31;
@@ -364,7 +364,7 @@ THREE.Matrix4.prototype = {
 	},
 
 	flattenToArray: function( flat ) {
-		
+
 		flat[ 0 ] = this.n11;
 		flat[ 1 ] = this.n21;
 		flat[ 2 ] = this.n31;
@@ -390,7 +390,7 @@ THREE.Matrix4.prototype = {
 	},
 
 	flattenToArrayOffset: function( flat, offset ) {
-		
+
 		flat[ offset ] 	   = this.n11;
 		flat[ offset + 1 ] = this.n21;
 		flat[ offset + 2 ] = this.n31;
@@ -421,7 +421,7 @@ THREE.Matrix4.prototype = {
 				  0, 1, 0, y,
 				  0, 0, 1, z,
 				  0, 0, 0, 1 );
-		 
+
 		return this;
 
 	},
@@ -432,7 +432,7 @@ THREE.Matrix4.prototype = {
 				  0, y, 0, 0,
 				  0, 0, z, 0,
 				  0, 0, 0, 1 );
-		
+
 		return this;
 
 	},
@@ -471,7 +471,7 @@ THREE.Matrix4.prototype = {
 				  s,  c, 0, 0,
 				  0,  0, 1, 0,
 				  0,  0, 0, 1 );
-		
+
 		return this;
 
 	},
@@ -500,82 +500,80 @@ THREE.Matrix4.prototype = {
 		this.n14 = vec3.x;
 		this.n24 = vec3.y;
 		this.n34 = vec3.z;
-		
+
 		return this;
-	
+
 	},
-	
+
 	setRotationFromEuler: function( vec3 ) {
-		
+
 		//var c = Math.PI / 180;
 		var x = vec3.x,// * c;
 			y = vec3.y,// * c;
 			z = vec3.z,// * c;
-		
+
 			ch = Math.cos( y  ),
 			sh = Math.sin( y  ),
 			ca = Math.cos( -z ),
 			sa = Math.sin( -z ),
 			cb = Math.cos( x  ),
 			sb = Math.sin( x  ),
-		
+
 			chsa = ch * sa,
 			shsa = sh * sa;
-	
+
 	    this.n11 = ch * ca;
 	    this.n12 = sh * sb - chsa * cb;
 	    this.n13 = chsa * sb + sh * cb;
-		
+
 	    this.n21 = sa;
 	    this.n22 = ca * cb;
 	    this.n23 = - ca * sb;
-		
+
 	    this.n31 = - sh * ca;
 	    this.n32 = shsa * cb + ch * sb;
 	    this.n33 = - shsa * sb + ch * cb;
-		
+
 	},
 
 	setRotationFromQuaternion: function( quat ) {
 
 		var x = quat.x, y = quat.y, z = quat.z, w = quat.w,
-	
+
 			x2 = x + x,
 			y2 = y + y,
 			z2 = z + z,
-	
+
 			xx = x * x2,
 			xy = x * y2,
 			xz = x * z2,
-	
+
 			yy = y * y2,
 			yz = y * z2,
 			zz = z * z2,
-	
+
 			wx = w * x2,
 			wy = w * y2,
 			wz = w * z2;
-	
+
 		this.n11 = 1 - ( yy + zz );
 		this.n12 = xy - wz;
 		this.n13 = xz + wy;
-	
+
 		this.n21 = xy + wz;
 		this.n22 = 1 - ( xx + zz );
 		this.n23 = yz - wx;
-	
+
 		this.n31 = xz - wy;
 		this.n32 = yz + wx;
 		this.n33 = 1 - ( xx + yy );
-		
+
 	},
-	
+
 	scale: function( vec3 ) {
-		
-		var x = vec3.x,
-			y = vec3.y,
-			z = vec3.z;
-		
+
+		var x = vec3.x, y = vec3.y, z = vec3.z;
+
 		this.n11 *= x; this.n12 *= x; this.n13 *= x;
 		this.n21 *= y; this.n22 *= y; this.n23 *= y;
 		this.n31 *= z; this.n32 *= z; this.n33 *= z;
@@ -583,16 +581,16 @@ THREE.Matrix4.prototype = {
 		return this;
 
 	},
-	
+
 	extractRotationMatrix: function( m ) {
-		
+
 		m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = 0;
 		m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = 0;
 		m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = 0;
-		m.n41 = 0; 		  m.n42 = 0; 		m.n43 = 0; 		  m.n44 = 1;
+		m.n41 = 0; m.n42 = 0; m.n43 = 0; m.n44 = 1;
 
 	},
-	
+
 	toString: function() {
 
 		return  "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n" +

src/objects/Object3D.js

@@ -7,27 +7,27 @@
 THREE.Object3D = function() {
 
 	this.id = THREE.Object3DCounter.value ++;
-	
-	this.visible             = true;
-	this.autoUpdateMatrix    = true;
+
+	this.visible = true;
+	this.autoUpdateMatrix = true;
 	this.matrixNeedsToUpdate = true;
-	
-	this.parent		  		 = undefined;
-	this.children     		 = [];
-
-	this.position            = new THREE.Vector3();
-	this.rotation            = new THREE.Vector3();
-	this.scale               = new THREE.Vector3( 1.0, 1.0, 1.0 );
-	this.localMatrix         = new THREE.Matrix4();
-	this.globalMatrix        = new THREE.Matrix4();
-	this.quaternion          = new THREE.Quaternion();
-	this.useQuaternion       = false;
-	this.screenPosition      = new THREE.Vector4(); // xyzr
-	
-	this.boundRadius         = 0.0;
-	this.boundRadiusScale    = 1.0;
-	
-	this.rotationMatrix 	 = new THREE.Matrix4(); // this is just to cache it when somewhere it's computed somewhere else (stripped down globalMatrix)
+
+	this.parent = undefined;
+	this.children = [];
+
+	this.position = new THREE.Vector3();
+	this.rotation = new THREE.Vector3();
+	this.scale = new THREE.Vector3( 1.0, 1.0, 1.0 );
+	this.localMatrix = new THREE.Matrix4();
+	this.globalMatrix = new THREE.Matrix4();
+	this.quaternion = new THREE.Quaternion();
+	this.useQuaternion = false;
+	this.screenPosition = new THREE.Vector4(); // xyzr
+
+	this.boundRadius = 0.0;
+	this.boundRadiusScale = 1.0;
+
+	this.rotationMatrix = new THREE.Matrix4(); // this is just to cache it when somewhere it's computed somewhere else (stripped down globalMatrix)
 
 };
 
@@ -39,24 +39,24 @@ THREE.Object3D = function() {
 THREE.Object3D.prototype.update = function( parentGlobalMatrix, forceUpdate, camera ) {
 
 	// visible and auto update?
-	
+
 	if( this.visible ) {
 
 		// update local
-		
+
 		if( this.autoUpdateMatrix )
 			forceUpdate |= this.updateMatrix();
 
-	
+
 		// update global
 
 		if( forceUpdate || this.matrixNeedsToUpdate ) {
-			
+
 			if( parentGlobalMatrix )
 				this.globalMatrix.multiply( parentGlobalMatrix, this.localMatrix );
 			else
 				this.globalMatrix.copy( this.localMatrix );
-			
+
 			this.matrixNeedsToUpdate = false;
 			forceUpdate              = true;
 
@@ -64,13 +64,13 @@ THREE.Object3D.prototype.update = function( parentGlobalMatrix, forceUpdate, cam
 
 
 		// update children
-	
+
 		var i, l = this.children.length;
-		
+
 		for( i = 0; i < l; i++ ) {
-			
+
 			this.children[ i ].update( this.globalMatrix, forceUpdate, camera );
-			
+
 		}
 
 	}
@@ -83,39 +83,39 @@ THREE.Object3D.prototype.update = function( parentGlobalMatrix, forceUpdate, cam
  */
 
 THREE.Object3D.prototype.updateMatrix = function() {
-	
+
 	// update position
-		
-	this.localMatrix.setPosition( this.position );	
-	
+
+	this.localMatrix.setPosition( this.position );
+
 	// update quaternion
-	
+
 	if( this.useQuaternion )  {
-		
+
 		if( this.quaternion.isDirty ) {
-			
+
 			this.localMatrix.setRotationFromQuaternion( this.quaternion );
 			this.quaternion.isDirty = false;
 
 		}
-		
+
 	// update rotation
-	
+
 	} else {
-		
+
 		this.localMatrix.setRotationFromEuler( this.rotation );
-	
+
 	}
 
 	// update scale
-	
+
 	if( this.scale.x !== 1 || this.scale.y !== 1 || this.scale.z !== 1 ) {
-		
+
 		this.localMatrix.scale( this.scale );
 		this.boundRadiusScale = Math.max( this.scale.x, Math.max( this.scale.y, this.scale.z ) );
-	
+
 	}
-	
+
 	return true;
 
 };
@@ -126,12 +126,12 @@ THREE.Object3D.prototype.updateMatrix = function() {
  */
 
 THREE.Object3D.prototype.addChild = function( child ) {
-	
+
 	if( this.children.indexOf( child ) === -1 ) {
 
 		if( child.parent !== undefined )
 			child.parent.removeChild( child );
-		
+
 		child.parent = this;
 		this.children.push( child );
 
@@ -145,11 +145,11 @@ THREE.Object3D.prototype.addChild = function( child ) {
  */
 
 THREE.Object3D.prototype.removeChild = function( child ) {
-	
-	var childIndex = this.children.indexOf( child ); 
-	
+
+	var childIndex = this.children.indexOf( child );
+
 	if( childIndex !== -1 )	{
-		
+
 		this.children.splice( childIndex, 1 );
 		child.parent = undefined;
 

src/renderers/CanvasRenderer.js

@@ -153,7 +153,7 @@ THREE.CanvasRenderer = function () {
 		var e, el, element, m, ml, fm, fml, material;
 
 		this.autoClear ? this.clear() : _context.setTransform( 1, 0, 0, - 1, _canvasWidthHalf, _canvasHeightHalf );
-		
+
 		_renderList = _projector.projectScene( scene, camera, this.sortElements );
 
 		/* DEBUG
@@ -546,7 +546,7 @@ THREE.CanvasRenderer = function () {
 
 						}/* else if ( material.env_map.mapping == THREE.RefractionMapping ) {
 
-						
+							
 
 						}*/
 

src/renderers/Projector.js

@@ -52,7 +52,7 @@ THREE.Projector = function() {
 			_objectCount ++;
 
 		}
-		
+
 		sort && renderList.sort( painterSort );
 
 		return renderList;
@@ -63,7 +63,7 @@ THREE.Projector = function() {
 
 	this.projectScene = function ( scene, camera, sort ) {
 
-		var renderList = [], near = camera.near, far = camera.far,
+		var renderList = [], near = camera.zNear, far = camera.zFar,
 		o, ol, v, vl, f, fl, n, nl, objects, object,
 		objectMatrix, objectMaterials, objectOverdraw,
 		objectRotationMatrix,
@@ -73,10 +73,10 @@ THREE.Projector = function() {
 		_face3Count = _lineCount = _particleCount = 0;
 
 		camera.autoUpdateMatrix && camera.update();
-		
+
 		_projScreenMatrix.multiply( camera.projectionMatrix, camera.globalMatrix );
 		computeFrustum( _projScreenMatrix );
-		
+
 		scene.update( undefined, false, camera );
 
 		objects = this.projectObjects( scene, camera, true ); // scene.objects;
@@ -92,7 +92,7 @@ THREE.Projector = function() {
 			objectMatrix = object.globalMatrix;
 			objectMatrix.extractRotationMatrix( object.rotationMatrix );
 			objectRotationMatrix = object.rotationMatrix;
-			
+
 			objectMaterials = object.materials;
 			objectOverdraw = object.overdraw;
 
@@ -419,7 +419,7 @@ THREE.Projector = function() {
 		return true;
 
 	};
-	
+
 	function clipLine( s1, s2 ) {
 
 		var alpha1 = 0, alpha2 = 1,