Added VisibleCamera object and example.

This is for seeing how camera actually looks (frustum, line-of-sight, up), it's not a camera. Not sure about the name.

build/custom/ThreeCanvas.js

@@ -76,7 +76,7 @@ this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRo
 this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x*=-1;this.y*=-1;this.z*=-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var a=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);0===a?this.w=this.z=this.y=this.x=0:(a=1/a,this.x*=a,this.y*=a,this.z*=a,this.w*=a);return this},multiplySelf:function(a){var b=
 this.x,c=this.y,d=this.z,e=this.w,f=a.x,g=a.y,i=a.z,a=a.w;this.x=b*a+e*f+c*i-d*g;this.y=c*a+e*g+d*f-b*i;this.z=d*a+e*i+b*g-c*f;this.w=e*a-b*f-c*g-d*i;return this},multiply:function(a,b){this.x=a.x*b.w+a.y*b.z-a.z*b.y+a.w*b.x;this.y=-a.x*b.z+a.y*b.w+a.z*b.x+a.w*b.y;this.z=a.x*b.y-a.y*b.x+a.z*b.w+a.w*b.z;this.w=-a.x*b.x-a.y*b.y-a.z*b.z+a.w*b.w;return this},multiplyVector3:function(a,b){b||(b=a);var c=a.x,d=a.y,e=a.z,f=this.x,g=this.y,i=this.z,m=this.w,h=m*c+g*e-i*d,l=m*d+i*c-f*e,o=m*e+f*d-g*c,c=-f*
 c-g*d-i*e;b.x=h*m+c*-f+l*-i-o*-g;b.y=l*m+c*-g+o*-f-h*-i;b.z=o*m+c*-i+h*-g-l*-f;return b}};
-THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>e?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,e=-e):c.copy(b);if(1<=Math.abs(e))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var f=Math.acos(e),e=Math.sqrt(1-e*e);if(0.001>Math.abs(e))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
+THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>e?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,e=-e):c.copy(b);if(1<=Math.abs(e))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var f=Math.acos(e),e=Math.sqrt(1-e*e);if(0.0010>Math.abs(e))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
 THREE.Face3=function(a,b,c,d,e,f){this.a=a;this.b=b;this.c=c;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.color=e instanceof THREE.Color?e:new THREE.Color;this.vertexColors=e instanceof Array?e:[];this.vertexTangents=[];this.materialIndex=f;this.centroid=new THREE.Vector3};
 THREE.Face4=function(a,b,c,d,e,f,g){this.a=a;this.b=b;this.c=c;this.d=d;this.normal=e instanceof THREE.Vector3?e:new THREE.Vector3;this.vertexNormals=e instanceof Array?e:[];this.color=f instanceof THREE.Color?f:new THREE.Color;this.vertexColors=f instanceof Array?f:[];this.vertexTangents=[];this.materialIndex=g;this.centroid=new THREE.Vector3};THREE.UV=function(a,b){this.u=a||0;this.v=b||0};
 THREE.UV.prototype={constructor:THREE.UV,set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.u=a.u;this.v=a.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};

build/custom/ThreeDOM.js

@@ -76,7 +76,7 @@ this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRo
 this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x*=-1;this.y*=-1;this.z*=-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var a=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);0===a?this.w=this.z=this.y=this.x=0:(a=1/a,this.x*=a,this.y*=a,this.z*=a,this.w*=a);return this},multiplySelf:function(a){var b=
 this.x,c=this.y,d=this.z,e=this.w,f=a.x,g=a.y,h=a.z,a=a.w;this.x=b*a+e*f+c*h-d*g;this.y=c*a+e*g+d*f-b*h;this.z=d*a+e*h+b*g-c*f;this.w=e*a-b*f-c*g-d*h;return this},multiply:function(a,b){this.x=a.x*b.w+a.y*b.z-a.z*b.y+a.w*b.x;this.y=-a.x*b.z+a.y*b.w+a.z*b.x+a.w*b.y;this.z=a.x*b.y-a.y*b.x+a.z*b.w+a.w*b.z;this.w=-a.x*b.x-a.y*b.y-a.z*b.z+a.w*b.w;return this},multiplyVector3:function(a,b){b||(b=a);var c=a.x,d=a.y,e=a.z,f=this.x,g=this.y,h=this.z,k=this.w,i=k*c+g*e-h*d,j=k*d+h*c-f*e,l=k*e+f*d-g*c,c=-f*
 c-g*d-h*e;b.x=i*k+c*-f+j*-h-l*-g;b.y=j*k+c*-g+l*-f-i*-h;b.z=l*k+c*-h+i*-g-j*-f;return b}};
-THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>e?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,e=-e):c.copy(b);if(1<=Math.abs(e))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var f=Math.acos(e),e=Math.sqrt(1-e*e);if(0.001>Math.abs(e))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
+THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>e?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,e=-e):c.copy(b);if(1<=Math.abs(e))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var f=Math.acos(e),e=Math.sqrt(1-e*e);if(0.0010>Math.abs(e))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
 THREE.Face3=function(a,b,c,d,e,f){this.a=a;this.b=b;this.c=c;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.color=e instanceof THREE.Color?e:new THREE.Color;this.vertexColors=e instanceof Array?e:[];this.vertexTangents=[];this.materialIndex=f;this.centroid=new THREE.Vector3};
 THREE.Face4=function(a,b,c,d,e,f,g){this.a=a;this.b=b;this.c=c;this.d=d;this.normal=e instanceof THREE.Vector3?e:new THREE.Vector3;this.vertexNormals=e instanceof Array?e:[];this.color=f instanceof THREE.Color?f:new THREE.Color;this.vertexColors=f instanceof Array?f:[];this.vertexTangents=[];this.materialIndex=g;this.centroid=new THREE.Vector3};THREE.UV=function(a,b){this.u=a||0;this.v=b||0};
 THREE.UV.prototype={constructor:THREE.UV,set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.u=a.u;this.v=a.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};

build/custom/ThreeSVG.js

@@ -76,7 +76,7 @@ this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRo
 this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x*=-1;this.y*=-1;this.z*=-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var a=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);0===a?this.w=this.z=this.y=this.x=0:(a=1/a,this.x*=a,this.y*=a,this.z*=a,this.w*=a);return this},multiplySelf:function(a){var b=
 this.x,c=this.y,d=this.z,e=this.w,f=a.x,g=a.y,h=a.z,a=a.w;this.x=b*a+e*f+c*h-d*g;this.y=c*a+e*g+d*f-b*h;this.z=d*a+e*h+b*g-c*f;this.w=e*a-b*f-c*g-d*h;return this},multiply:function(a,b){this.x=a.x*b.w+a.y*b.z-a.z*b.y+a.w*b.x;this.y=-a.x*b.z+a.y*b.w+a.z*b.x+a.w*b.y;this.z=a.x*b.y-a.y*b.x+a.z*b.w+a.w*b.z;this.w=-a.x*b.x-a.y*b.y-a.z*b.z+a.w*b.w;return this},multiplyVector3:function(a,b){b||(b=a);var c=a.x,d=a.y,e=a.z,f=this.x,g=this.y,h=this.z,l=this.w,j=l*c+g*e-h*d,i=l*d+h*c-f*e,m=l*e+f*d-g*c,c=-f*
 c-g*d-h*e;b.x=j*l+c*-f+i*-h-m*-g;b.y=i*l+c*-g+m*-f-j*-h;b.z=m*l+c*-h+j*-g-i*-f;return b}};
-THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>e?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,e=-e):c.copy(b);if(1<=Math.abs(e))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var f=Math.acos(e),e=Math.sqrt(1-e*e);if(0.001>Math.abs(e))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
+THREE.Quaternion.slerp=function(a,b,c,d){var e=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>e?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,e=-e):c.copy(b);if(1<=Math.abs(e))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var f=Math.acos(e),e=Math.sqrt(1-e*e);if(0.0010>Math.abs(e))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*f)/e;d=Math.sin(d*f)/e;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
 THREE.Face3=function(a,b,c,d,e,f){this.a=a;this.b=b;this.c=c;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.color=e instanceof THREE.Color?e:new THREE.Color;this.vertexColors=e instanceof Array?e:[];this.vertexTangents=[];this.materialIndex=f;this.centroid=new THREE.Vector3};
 THREE.Face4=function(a,b,c,d,e,f,g){this.a=a;this.b=b;this.c=c;this.d=d;this.normal=e instanceof THREE.Vector3?e:new THREE.Vector3;this.vertexNormals=e instanceof Array?e:[];this.color=f instanceof THREE.Color?f:new THREE.Color;this.vertexColors=f instanceof Array?f:[];this.vertexTangents=[];this.materialIndex=g;this.centroid=new THREE.Vector3};THREE.UV=function(a,b){this.u=a||0;this.v=b||0};
 THREE.UV.prototype={constructor:THREE.UV,set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.u=a.u;this.v=a.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};

build/custom/ThreeWebGL.js

@@ -65,7 +65,7 @@ this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRo
 this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x*=-1;this.y*=-1;this.z*=-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var a=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);0===a?this.w=this.z=this.y=this.x=0:(a=1/a,this.x*=a,this.y*=a,this.z*=a,this.w*=a);return this},multiplySelf:function(a){var b=
 this.x,c=this.y,d=this.z,g=this.w,e=a.x,h=a.y,i=a.z,a=a.w;this.x=b*a+g*e+c*i-d*h;this.y=c*a+g*h+d*e-b*i;this.z=d*a+g*i+b*h-c*e;this.w=g*a-b*e-c*h-d*i;return this},multiply:function(a,b){this.x=a.x*b.w+a.y*b.z-a.z*b.y+a.w*b.x;this.y=-a.x*b.z+a.y*b.w+a.z*b.x+a.w*b.y;this.z=a.x*b.y-a.y*b.x+a.z*b.w+a.w*b.z;this.w=-a.x*b.x-a.y*b.y-a.z*b.z+a.w*b.w;return this},multiplyVector3:function(a,b){b||(b=a);var c=a.x,d=a.y,g=a.z,e=this.x,h=this.y,i=this.z,k=this.w,l=k*c+h*g-i*d,j=k*d+i*c-e*g,n=k*g+e*d-h*c,c=-e*
 c-h*d-i*g;b.x=l*k+c*-e+j*-i-n*-h;b.y=j*k+c*-h+n*-e-l*-i;b.z=n*k+c*-i+l*-h-j*-e;return b}};
-THREE.Quaternion.slerp=function(a,b,c,d){var g=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>g?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,g=-g):c.copy(b);if(1<=Math.abs(g))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var e=Math.acos(g),g=Math.sqrt(1-g*g);if(0.001>Math.abs(g))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*e)/g;d=Math.sin(d*e)/g;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
+THREE.Quaternion.slerp=function(a,b,c,d){var g=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;0>g?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,g=-g):c.copy(b);if(1<=Math.abs(g))return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var e=Math.acos(g),g=Math.sqrt(1-g*g);if(0.0010>Math.abs(g))return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*e)/g;d=Math.sin(d*e)/g;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};
 THREE.Face3=function(a,b,c,d,g,e){this.a=a;this.b=b;this.c=c;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.color=g instanceof THREE.Color?g:new THREE.Color;this.vertexColors=g instanceof Array?g:[];this.vertexTangents=[];this.materialIndex=e;this.centroid=new THREE.Vector3};
 THREE.Face4=function(a,b,c,d,g,e,h){this.a=a;this.b=b;this.c=c;this.d=d;this.normal=g instanceof THREE.Vector3?g:new THREE.Vector3;this.vertexNormals=g instanceof Array?g:[];this.color=e instanceof THREE.Color?e:new THREE.Color;this.vertexColors=e instanceof Array?e:[];this.vertexTangents=[];this.materialIndex=h;this.centroid=new THREE.Vector3};THREE.UV=function(a,b){this.u=a||0;this.v=b||0};
 THREE.UV.prototype={constructor:THREE.UV,set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.u=a.u;this.v=a.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};
@@ -337,7 +337,7 @@ b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,b.NEAREST);0>=b.getParameter(b
 "color");m.scale=b.getUniformLocation(j,"scale");m.rotation=b.getUniformLocation(j,"rotation");m.screenPosition=b.getUniformLocation(j,"screenPosition");o=!1};this.render=function(a,d,g,v){var a=a.__webglFlares,F=a.length;if(F){var A=new THREE.Vector3,K=v/g,y=0.5*g,J=0.5*v,H=16/v,I=new THREE.Vector2(H*K,H),M=new THREE.Vector3(1,1,0),G=new THREE.Vector2(1,1),L=m,H=n;b.useProgram(j);o||(b.enableVertexAttribArray(n.vertex),b.enableVertexAttribArray(n.uv),o=!0);b.uniform1i(L.occlusionMap,0);b.uniform1i(L.map,
 1);b.bindBuffer(b.ARRAY_BUFFER,e);b.vertexAttribPointer(H.vertex,2,b.FLOAT,!1,16,0);b.vertexAttribPointer(H.uv,2,b.FLOAT,!1,16,8);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,h);b.disable(b.CULL_FACE);b.depthMask(!1);var ka,T,la,ca,z;for(ka=0;ka<F;ka++)if(H=16/v,I.set(H*K,H),ca=a[ka],A.set(ca.matrixWorld.n14,ca.matrixWorld.n24,ca.matrixWorld.n34),d.matrixWorldInverse.multiplyVector3(A),d.projectionMatrix.multiplyVector3(A),M.copy(A),G.x=M.x*y+y,G.y=M.y*J+J,l||0<G.x&&G.x<g&&0<G.y&&G.y<v){b.activeTexture(b.TEXTURE1);
 b.bindTexture(b.TEXTURE_2D,i);b.copyTexImage2D(b.TEXTURE_2D,0,b.RGB,G.x-8,G.y-8,16,16,0);b.uniform1i(L.renderType,0);b.uniform2f(L.scale,I.x,I.y);b.uniform3f(L.screenPosition,M.x,M.y,M.z);b.disable(b.BLEND);b.enable(b.DEPTH_TEST);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0);b.activeTexture(b.TEXTURE0);b.bindTexture(b.TEXTURE_2D,k);b.copyTexImage2D(b.TEXTURE_2D,0,b.RGBA,G.x-8,G.y-8,16,16,0);b.uniform1i(L.renderType,1);b.disable(b.DEPTH_TEST);b.activeTexture(b.TEXTURE1);b.bindTexture(b.TEXTURE_2D,
-i);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0);ca.positionScreen.copy(M);ca.customUpdateCallback?ca.customUpdateCallback(ca):ca.updateLensFlares();b.uniform1i(L.renderType,2);b.enable(b.BLEND);for(T=0,la=ca.lensFlares.length;T<la;T++)if(z=ca.lensFlares[T],0.001<z.opacity&&0.001<z.scale)M.x=z.x,M.y=z.y,M.z=z.z,H=z.size*z.scale/v,I.x=H*K,I.y=H,b.uniform3f(L.screenPosition,M.x,M.y,M.z),b.uniform2f(L.scale,I.x,I.y),b.uniform1f(L.rotation,z.rotation),b.uniform1f(L.opacity,z.opacity),b.uniform3f(L.color,
+i);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0);ca.positionScreen.copy(M);ca.customUpdateCallback?ca.customUpdateCallback(ca):ca.updateLensFlares();b.uniform1i(L.renderType,2);b.enable(b.BLEND);for(T=0,la=ca.lensFlares.length;T<la;T++)if(z=ca.lensFlares[T],0.0010<z.opacity&&0.0010<z.scale)M.x=z.x,M.y=z.y,M.z=z.z,H=z.size*z.scale/v,I.x=H*K,I.y=H,b.uniform3f(L.screenPosition,M.x,M.y,M.z),b.uniform2f(L.scale,I.x,I.y),b.uniform1f(L.rotation,z.rotation),b.uniform1f(L.opacity,z.opacity),b.uniform3f(L.color,
 z.color.r,z.color.g,z.color.b),c.setBlending(z.blending),c.setTexture(z.texture,1),b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0)}b.enable(b.CULL_FACE);b.enable(b.DEPTH_TEST);b.depthMask(!0)}}};
 THREE.ShadowMapPlugin=function(){var a,b,c,d,g,e=new THREE.Frustum,h=new THREE.Matrix4;this.shadowMatrix=[];this.shadowMap=[];this.init=function(c){a=c.context;b=c;var c=THREE.ShaderLib.depthRGBA,e=THREE.UniformsUtils.clone(c.uniforms);d=new THREE.ShaderMaterial({fragmentShader:c.fragmentShader,vertexShader:c.vertexShader,uniforms:e});g=new THREE.ShaderMaterial({fragmentShader:c.fragmentShader,vertexShader:c.vertexShader,uniforms:e,morphTargets:!0});d._shadowPass=!0;g._shadowPass=!0};this.render=
 function(a,c){b.shadowMapEnabled&&b.shadowMapAutoUpdate&&this.update(a,c)};this.update=function(i){var k,l,j,n,m,o,p,r,t=0,v=i.lights;c||(c=new THREE.PerspectiveCamera(b.shadowCameraFov,b.shadowMapWidth/b.shadowMapHeight,b.shadowCameraNear,b.shadowCameraFar));a.clearColor(1,1,1,1);a.disable(a.BLEND);b.shadowMapCullFrontFaces&&a.cullFace(a.FRONT);b.setDepthTest(!0);for(k=0,l=v.length;k<l;k++)if(p=v[k],p.castShadow&&p instanceof THREE.SpotLight){this.shadowMap[t]||(this.shadowMap[t]=new THREE.WebGLRenderTarget(b.shadowMapWidth,

examples/webgl_camera.html

+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - camera</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				color: #808080;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index: 100;
+			}
+
+			a {
+
+				color: #0080ff;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - camera</div>
+
+		<script src="../build/Three.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script>
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+
+			var container, stats;
+			var camera, scene, renderer, mesh;
+
+			var r = 0;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera.position.z = 2500;
+				scene.add( camera );
+
+				camera2 = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 150, 1000 );
+				scene.add( camera2 );
+
+				var visibleCamera = new THREE.VisibleCamera( camera2 );
+				camera2.add( visibleCamera );
+
+				//
+
+				mesh = new THREE.Mesh( new THREE.SphereGeometry( 100, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } ) );
+				scene.add( mesh );
+
+				var mesh2 = new THREE.Mesh( new THREE.SphereGeometry( 50, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } ) );
+				mesh2.position.y = 150;
+				mesh.add( mesh2 );
+
+				//
+
+				var x, y, z, geo = new THREE.Geometry();
+
+				for ( var i = 0; i < 10000; i ++ ) {
+
+					x = THREE.Math.randFloatSpread( 2000 );
+					y = THREE.Math.randFloatSpread( 2000 );
+					z = THREE.Math.randFloatSpread( 2000 );
+
+					var p = new THREE.Vector3( x, y, z );
+					geo.vertices.push( new THREE.Vertex( p ) );
+
+				}
+
+				var particles = new THREE.ParticleSystem( geo, new THREE.ParticleBasicMaterial( { color: 0x888888 } ) );
+				scene.add( particles );
+
+				//
+
+
+				renderer = new THREE.WebGLRenderer( { antialias: true, clearColor: 0x000000, clearAlpha: 1 } );
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.domElement.style.position = "relative";
+				container.appendChild( renderer.domElement );
+
+				renderer.autoClear = false;
+
+				//
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+
+				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#666";
+				stats.domElement.children[ 0 ].style.background = "transparent";
+				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
+
+				container.appendChild( stats.domElement );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize( event ) {
+
+				SCREEN_WIDTH = window.innerWidth;
+				SCREEN_HEIGHT = window.innerHeight;
+
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+				camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.updateProjectionMatrix();
+
+				camera2.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera2.updateProjectionMatrix();
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+
+			function render() {
+
+				mesh.position.x = 700 * Math.cos( r );
+				mesh.position.z = 700 * Math.sin( r );
+				mesh.position.y = 700 * Math.sin( r );
+
+				mesh.children[ 0 ].position.x = 70 * Math.cos( 2 * r );
+				mesh.children[ 0 ].position.z = 70 * Math.sin( r );
+
+				camera2.fov = 35 + 30 * Math.sin( 0.5 * r );
+				camera2.far = mesh.position.length();
+				camera2.updateProjectionMatrix();
+				camera2.children[ 0 ].update( camera2 );
+
+				camera2.lookAt( mesh.position );
+
+				renderer.clear();
+
+				renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
+				renderer.render( scene, camera2 );
+
+				renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
+				renderer.render( scene, camera );
+
+				r += 0.01;
+
+			}
+
+
+		</script>
+
+	</body>
+</html>

src/extras/objects/VisibleCamera.js

+/**
+ * @author alteredq / http://alteredqualia.com/
+ *
+ *	- shows frustum, line of sight and up of the camera
+ *	- suitable for fast updates
+ * 	- based on frustum visualization in lightgl.js shadowmap example
+ *		http://evanw.github.com/lightgl.js/tests/shadowmap.html
+ */
+
+THREE.VisibleCamera = function ( camera ) {
+
+	THREE.Object3D.call( this );
+
+	var _this = this;
+
+	this.lineGeometry = new THREE.Geometry();
+	this.lineMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
+
+	this.pointMap = {};
+
+	// colors
+
+	var hexFrustum = 0xffaa00,
+	hexCone	   	   = 0xff0000,
+	hexUp	   	   = 0x00aaff,
+	hexTarget  	   = 0xffffff,
+	hexCross   	   = 0x333333;
+
+	// near
+
+	addLine( "n1", "n2", hexFrustum );
+	addLine( "n2", "n4", hexFrustum );
+	addLine( "n4", "n3", hexFrustum );
+	addLine( "n3", "n1", hexFrustum );
+
+	// far
+
+	addLine( "f1", "f2", hexFrustum );
+	addLine( "f2", "f4", hexFrustum );
+	addLine( "f4", "f3", hexFrustum );
+	addLine( "f3", "f1", hexFrustum );
+
+	// sides
+
+	addLine( "n1", "f1", hexFrustum );
+	addLine( "n2", "f2", hexFrustum );
+	addLine( "n3", "f3", hexFrustum );
+	addLine( "n4", "f4", hexFrustum );
+
+	// cone
+
+	addLine( "p", "n1", hexCone );
+	addLine( "p", "n2", hexCone );
+	addLine( "p", "n3", hexCone );
+	addLine( "p", "n4", hexCone );
+
+	// up
+
+	addLine( "u1", "u2", hexUp );
+	addLine( "u2", "u3", hexUp );
+	addLine( "u3", "u1", hexUp );
+
+	// target
+
+	addLine( "c", "t", hexTarget );
+	addLine( "p", "c", hexCross );
+
+	// cross
+
+	addLine( "cn1", "cn2", hexCross );
+	addLine( "cn3", "cn4", hexCross );
+
+	addLine( "cf1", "cf2", hexCross );
+	addLine( "cf3", "cf4", hexCross );
+
+	function addLine( a, b, hex ) {
+
+		addPoint( a, hex );
+		addPoint( b, hex );
+
+	}
+
+	function addPoint( id, hex ) {
+
+		_this.lineGeometry.vertices.push( new THREE.Vertex( new THREE.Vector3() ) );
+		_this.lineGeometry.colors.push( new THREE.Color( hex ) );
+
+		if ( _this.pointMap[ id ] === undefined ) _this.pointMap[ id ] = [];
+		_this.pointMap[ id ].push( _this.lineGeometry.vertices.length - 1 );
+
+	}
+
+	this.update( camera );
+
+	var lines = new THREE.Line( this.lineGeometry, this.lineMaterial, THREE.LinePieces );
+	this.add( lines );
+
+};
+
+THREE.VisibleCamera.prototype = new THREE.Object3D();
+THREE.VisibleCamera.prototype.constructor = THREE.VisibleCamera;
+
+THREE.VisibleCamera.prototype.update = function ( camera ) {
+
+	var w = 1;
+	var h = 1;
+
+	var _this = this;
+
+	// we need just camera projection matrix
+	// world matrix must be identity
+
+	THREE.VisibleCamera.__c.projectionMatrix.copy( camera.projectionMatrix );
+
+	// center / target
+
+	setPoint( "c", 0, 0, 0 );
+	setPoint( "t", 0, 0, 1 );
+
+	// near
+
+	setPoint( "n1", -w, -h, 0 );
+	setPoint( "n2",  w, -h, 0 );
+	setPoint( "n3", -w,  h, 0 );
+	setPoint( "n4",  w,  h, 0 );
+
+	// far
+
+	setPoint( "f1", -w, -h, 1 );
+	setPoint( "f2",  w, -h, 1 );
+	setPoint( "f3", -w,  h, 1 );
+	setPoint( "f4",  w,  h, 1 );
+
+	// up
+
+	setPoint( "u1",  w * 0.7, h * 1.1, 0 );
+	setPoint( "u2", -w * 0.7, h * 1.1, 0 );
+	setPoint( "u3",        0, h * 2,   0 );
+
+	// cross
+
+	setPoint( "cf1", -w,  0, 1 );
+	setPoint( "cf2",  w,  0, 1 );
+	setPoint( "cf3",  0, -h, 1 );
+	setPoint( "cf4",  0,  h, 1 );
+
+	setPoint( "cn1", -w,  0, 0 );
+	setPoint( "cn2",  w,  0, 0 );
+	setPoint( "cn3",  0, -h, 0 );
+	setPoint( "cn4",  0,  h, 0 );
+
+	function setPoint( point, x, y, z ) {
+
+		THREE.VisibleCamera.__v.set( x, y, z );
+		THREE.VisibleCamera.__projector.unprojectVector( THREE.VisibleCamera.__v, THREE.VisibleCamera.__c );
+
+		var points = _this.pointMap[ point ];
+
+		if ( points !== undefined ) {
+
+			for ( var i = 0, il = points.length; i < il; i ++ ) {
+
+				var j = points[ i ];
+				_this.lineGeometry.vertices[ j ].position.copy( THREE.VisibleCamera.__v );
+
+			}
+
+		}
+
+	}
+
+	this.lineGeometry.__dirtyVertices = true;
+
+};
+
+THREE.VisibleCamera.__projector = new THREE.Projector();
+THREE.VisibleCamera.__v = new THREE.Vector3();
+THREE.VisibleCamera.__c = new THREE.Camera();
+

utils/build.py

@@ -133,6 +133,7 @@ EXTRAS_FILES = [
 'extras/objects/Axes.js',
 'extras/objects/MarchingCubes.js',
 'extras/objects/LensFlare.js',
+'extras/objects/VisibleCamera.js',
 'extras/plugins/LensFlarePlugin.js',
 'extras/plugins/ShadowMapPlugin.js',
 'extras/plugins/SpritePlugin.js',