提交 49833270 编写于 作者: Z zz85

Fixes for holes first characters

因为 它太大了无法显示 source diff 。你可以改为 查看blob
此差异已折叠。
......@@ -41,8 +41,8 @@ e*k*l-g*i*l+g*f*j-c*k*j-e*f*m+c*i*m;b.n31=h*m*p-k*n*p+k*l*q-f*m*q-h*l*r+f*n*r;b.
THREE.Matrix4.makeInvert3x3=function(a){var b=a.m33,c=b.m,d=a.n33*a.n22-a.n32*a.n23,e=-a.n33*a.n21+a.n31*a.n23,g=a.n32*a.n21-a.n31*a.n22,f=-a.n33*a.n12+a.n32*a.n13,h=a.n33*a.n11-a.n31*a.n13,i=-a.n32*a.n11+a.n31*a.n12,k=a.n23*a.n12-a.n22*a.n13,l=-a.n23*a.n11+a.n21*a.n13,n=a.n22*a.n11-a.n21*a.n12,a=a.n11*d+a.n21*f+a.n31*k;a==0&&console.error("THREE.Matrix4.makeInvert3x3: Matrix not invertible.");a=1/a;c[0]=a*d;c[1]=a*e;c[2]=a*g;c[3]=a*f;c[4]=a*h;c[5]=a*i;c[6]=a*k;c[7]=a*l;c[8]=a*n;return b};
THREE.Matrix4.makeFrustum=function(a,b,c,d,e,g){var f;f=new THREE.Matrix4;f.n11=2*e/(b-a);f.n12=0;f.n13=(b+a)/(b-a);f.n14=0;f.n21=0;f.n22=2*e/(d-c);f.n23=(d+c)/(d-c);f.n24=0;f.n31=0;f.n32=0;f.n33=-(g+e)/(g-e);f.n34=-2*g*e/(g-e);f.n41=0;f.n42=0;f.n43=-1;f.n44=0;return f};THREE.Matrix4.makePerspective=function(a,b,c,d){var e,a=c*Math.tan(a*Math.PI/360);e=-a;return THREE.Matrix4.makeFrustum(e*b,a*b,e,a,c,d)};
THREE.Matrix4.makeOrtho=function(a,b,c,d,e,g){var f,h,i,k;f=new THREE.Matrix4;h=b-a;i=c-d;k=g-e;f.n11=2/h;f.n12=0;f.n13=0;f.n14=-((b+a)/h);f.n21=0;f.n22=2/i;f.n23=0;f.n24=-((c+d)/i);f.n31=0;f.n32=0;f.n33=-2/k;f.n34=-((g+e)/k);f.n41=0;f.n42=0;f.n43=0;f.n44=1;return f};THREE.Matrix4.__v1=new THREE.Vector3;THREE.Matrix4.__v2=new THREE.Vector3;THREE.Matrix4.__v3=new THREE.Vector3;
THREE.Object3D=function(){this.parent=void 0;this.children=[];this.up=new THREE.Vector3(0,1,0);this.position=new THREE.Vector3;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.dynamic=!1;this.rotationAutoUpdate=!0;this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixWorldNeedsUpdate=this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=0;this.boundRadiusScale=1;
this.visible=!0;this._vector=new THREE.Vector3;this.name=""};
THREE.Object3D=function(){this.parent=void 0;this.children=[];this.up=new THREE.Vector3(0,1,0);this.position=new THREE.Vector3;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.flipSided=this.doubleSided=this.dynamic=!1;this.rotationAutoUpdate=!0;this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixWorldNeedsUpdate=this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=
0;this.boundRadiusScale=1;this.visible=!0;this._vector=new THREE.Vector3;this.name=""};
THREE.Object3D.prototype={translate:function(a,b){this.matrix.rotateAxis(b);this.position.addSelf(b.multiplyScalar(a))},translateX:function(a){this.translate(a,this._vector.set(1,0,0))},translateY:function(a){this.translate(a,this._vector.set(0,1,0))},translateZ:function(a){this.translate(a,this._vector.set(0,0,1))},lookAt:function(a){this.matrix.lookAt(a,this.position,this.up);this.rotationAutoUpdate&&this.rotation.setRotationFromMatrix(this.matrix)},addChild:function(a){if(this.children.indexOf(a)===
-1){a.parent!==void 0&&a.parent.removeChild(a);a.parent=this;this.children.push(a);for(var b=this;b.parent!==void 0;)b=b.parent;b!==void 0&&b instanceof THREE.Scene&&b.addChildRecurse(a)}},removeChild:function(a){var b=this.children.indexOf(a);if(b!==-1)a.parent=void 0,this.children.splice(b,1)},getChildByName:function(a,b){var c,d,e;c=0;for(d=this.children.length;c<d;c++){e=this.children[c];if(e.name===a)return e;if(b&&(e=e.getChildByName(a,b),e!==void 0))return e}},updateMatrix:function(){this.matrix.setPosition(this.position);
this.useQuaternion?this.matrix.setRotationFromQuaternion(this.quaternion):this.matrix.setRotationFromEuler(this.rotation);if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1)this.matrix.scale(this.scale),this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z));this.matrixWorldNeedsUpdate=!0},update:function(a,b,c){this.matrixAutoUpdate&&this.updateMatrix();if(this.matrixWorldNeedsUpdate||b)a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix),this.matrixRotationWorld.extractRotation(this.matrixWorld,
......@@ -55,7 +55,9 @@ 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;i
THREE.Face3=function(a,b,c,d,e,g){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.materials=g instanceof Array?g:[g];this.centroid=new THREE.Vector3};
THREE.Face4=function(a,b,c,d,e,g,f){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=g instanceof THREE.Color?g:new THREE.Color;this.vertexColors=g instanceof Array?g:[];this.vertexTangents=[];this.materials=f instanceof Array?f:[f];this.centroid=new THREE.Vector3};THREE.UV=function(a,b){this.set(a||0,b||0)};
THREE.UV.prototype={set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.set(a.u,a.v);return this}};THREE.Camera=function(a,b,c,d,e){THREE.Object3D.call(this);this.fov=a||50;this.aspect=b||1;this.near=c||0.1;this.far=d||2E3;this.target=e||new THREE.Object3D;this.useTarget=!0;this.matrixWorldInverse=new THREE.Matrix4;this.projectionMatrix=null;this.updateProjectionMatrix()};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;
THREE.Camera.prototype.supr=THREE.Object3D.prototype;THREE.Camera.prototype.translate=function(a,b){this.matrix.rotateAxis(b);b.multiplyScalar(a);this.position.addSelf(b);this.target.position.addSelf(b)};THREE.Camera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
THREE.Camera.prototype.supr=THREE.Object3D.prototype;THREE.Camera.prototype.translate=function(a,b){this.matrix.rotateAxis(b);b.multiplyScalar(a);this.position.addSelf(b);this.target.position.addSelf(b)};
THREE.Camera.prototype.updateProjectionMatrix=function(){if(this.fullWidth){var a=this.fullWidth/this.fullHeight,b=Math.tan(this.fov*Math.PI/360)*this.near,c=-b,d=a*c,a=Math.abs(a*b-d),c=Math.abs(b-c);this.projectionMatrix=THREE.Matrix4.makeFrustum(d+this.x*a/this.fullWidth,d+(this.x+this.width)*a/this.fullWidth,b-(this.y+this.height)*c/this.fullHeight,b-this.y*c/this.fullHeight,this.near,this.far)}else this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
THREE.Camera.prototype.setViewOffset=function(a,b,c,d,e,g){this.fullWidth=a;this.fullHeight=b;this.x=c;this.y=d;this.width=e;this.height=g;this.updateProjectionMatrix()};
THREE.Camera.prototype.update=function(a,b,c){if(this.useTarget)this.matrix.lookAt(this.position,this.target.position,this.up),this.matrix.setPosition(this.position),a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix),THREE.Matrix4.makeInvert(this.matrixWorld,this.matrixWorldInverse),b=!0;else if(this.matrixAutoUpdate&&this.updateMatrix(),b||this.matrixWorldNeedsUpdate)a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix),this.matrixWorldNeedsUpdate=
!1,b=!0,THREE.Matrix4.makeInvert(this.matrixWorld,this.matrixWorldInverse);for(a=0;a<this.children.length;a++)this.children[a].update(this.matrixWorld,b,c)};THREE.ParticleDOMMaterial=function(a){THREE.Material.call(this);this.domElement=a};THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a]};THREE.Particle.prototype=new THREE.Object3D;THREE.Particle.prototype.constructor=THREE.Particle;
THREE.Bone=function(a){THREE.Object3D.call(this);this.skin=a;this.skinMatrix=new THREE.Matrix4;this.hasNoneBoneChildren=!1};THREE.Bone.prototype=new THREE.Object3D;THREE.Bone.prototype.constructor=THREE.Bone;THREE.Bone.prototype.supr=THREE.Object3D.prototype;
......@@ -70,7 +72,7 @@ THREE.Scene=function(){THREE.Object3D.call(this);this.matrixAutoUpdate=!1;this.c
THREE.Scene.prototype.addChildRecurse=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(a instanceof THREE.Sound)this.sounds.indexOf(a)===-1&&this.sounds.push(a);else if(!(a instanceof THREE.Camera||a instanceof THREE.Bone)&&this.objects.indexOf(a)===-1)this.objects.push(a),this.__objectsAdded.push(a);for(var b=0;b<a.children.length;b++)this.addChildRecurse(a.children[b])};
THREE.Scene.prototype.removeChild=function(a){this.supr.removeChild.call(this,a);this.removeChildRecurse(a)};THREE.Scene.prototype.removeChildRecurse=function(a){if(a instanceof THREE.Light){var b=this.lights.indexOf(a);b!==-1&&this.lights.splice(b,1)}else a instanceof THREE.Sound?(b=this.sounds.indexOf(a),b!==-1&&this.sounds.splice(b,1)):a instanceof THREE.Camera||(b=this.objects.indexOf(a),b!==-1&&(this.objects.splice(b,1),this.__objectsRemoved.push(a)));for(b=0;b<a.children.length;b++)this.removeChildRecurse(a.children[b])};
THREE.Scene.prototype.addObject=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeObject=THREE.Scene.prototype.removeChild;THREE.Scene.prototype.addLight=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeLight=THREE.Scene.prototype.removeChild;
THREE.Projector=function(){function a(){var a=i[h]=i[h]||new THREE.RenderableVertex;h++;return a}function b(a,b){return b.z-a.z}function c(a,b){var c=0,d=1,f=a.z+a.w,e=b.z+b.w,g=-a.z+a.w,h=-b.z+b.w;return f>=0&&e>=0&&g>=0&&h>=0?!0:f<0&&e<0||g<0&&h<0?!1:(f<0?c=Math.max(c,f/(f-e)):e<0&&(d=Math.min(d,f/(f-e))),g<0?c=Math.max(c,g/(g-h)):h<0&&(d=Math.min(d,g/(g-h))),d<c?!1:(a.lerpSelf(b,c),b.lerpSelf(a,1-d),!0))}var d,e,g=[],f,h,i=[],k,l,n=[],j,m=[],p,q,t=[],r,H,K=[],A=new THREE.Vector4,v=new THREE.Vector4,
THREE.Projector=function(){function a(){var a=i[h]=i[h]||new THREE.RenderableVertex;h++;return a}function b(a,b){return b.z-a.z}function c(a,b){var c=0,d=1,e=a.z+a.w,f=b.z+b.w,g=-a.z+a.w,h=-b.z+b.w;return e>=0&&f>=0&&g>=0&&h>=0?!0:e<0&&f<0||g<0&&h<0?!1:(e<0?c=Math.max(c,e/(e-f)):f<0&&(d=Math.min(d,e/(e-f))),g<0?c=Math.max(c,g/(g-h)):h<0&&(d=Math.min(d,g/(g-h))),d<c?!1:(a.lerpSelf(b,c),b.lerpSelf(a,1-d),!0))}var d,e,g=[],f,h,i=[],k,l,n=[],j,m=[],p,q,t=[],r,H,K=[],A=new THREE.Vector4,v=new THREE.Vector4,
o=new THREE.Matrix4,I=new THREE.Matrix4,z=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],D=new THREE.Vector4,E=new THREE.Vector4;this.projectVector=function(a,b){o.multiply(b.projectionMatrix,b.matrixWorldInverse);o.multiplyVector3(a);return a};this.unprojectVector=function(a,b){o.multiply(b.matrixWorld,THREE.Matrix4.makeInvert(b.projectionMatrix));o.multiplyVector3(a);return a};this.projectObjects=function(a,c,f){var c=[],h,k,i;e=0;k=
a.objects;a=0;for(h=k.length;a<h;a++){i=k[a];var j;if(!(j=!i.visible))if(j=i instanceof THREE.Mesh){a:{j=void 0;for(var l=i.matrixWorld,n=-i.geometry.boundingSphere.radius*Math.max(i.scale.x,Math.max(i.scale.y,i.scale.z)),m=0;m<6;m++)if(j=z[m].x*l.n14+z[m].y*l.n24+z[m].z*l.n34+z[m].w,j<=n){j=!1;break a}j=!0}j=!j}if(!j)j=g[e]=g[e]||new THREE.RenderableObject,e++,d=j,A.copy(i.position),o.multiplyVector3(A),d.object=i,d.z=A.z,c.push(d)}f&&c.sort(b);return c};this.projectScene=function(d,e,g){var A=[],
V=e.near,W=e.far,M,G,x,C,s,y,w,B,F,u,J,R,T,U,L,S,N;H=q=j=l=0;e.matrixAutoUpdate&&e.update(void 0,!0);d.update(void 0,!1,e);o.multiply(e.projectionMatrix,e.matrixWorldInverse);z[0].set(o.n41-o.n11,o.n42-o.n12,o.n43-o.n13,o.n44-o.n14);z[1].set(o.n41+o.n11,o.n42+o.n12,o.n43+o.n13,o.n44+o.n14);z[2].set(o.n41+o.n21,o.n42+o.n22,o.n43+o.n23,o.n44+o.n24);z[3].set(o.n41-o.n21,o.n42-o.n22,o.n43-o.n23,o.n44-o.n24);z[4].set(o.n41-o.n31,o.n42-o.n32,o.n43-o.n33,o.n44-o.n34);z[5].set(o.n41+o.n31,o.n42+o.n32,o.n43+
......
此差异已折叠。
......@@ -41,8 +41,8 @@ e*l*k-g*i*k+g*f*j-c*l*j-e*f*o+c*i*o;b.n31=h*o*p-l*n*p+l*k*q-f*o*q-h*k*u+f*n*u;b.
THREE.Matrix4.makeInvert3x3=function(a){var b=a.m33,c=b.m,d=a.n33*a.n22-a.n32*a.n23,e=-a.n33*a.n21+a.n31*a.n23,g=a.n32*a.n21-a.n31*a.n22,f=-a.n33*a.n12+a.n32*a.n13,h=a.n33*a.n11-a.n31*a.n13,i=-a.n32*a.n11+a.n31*a.n12,l=a.n23*a.n12-a.n22*a.n13,k=-a.n23*a.n11+a.n21*a.n13,n=a.n22*a.n11-a.n21*a.n12,a=a.n11*d+a.n21*f+a.n31*l;a==0&&console.error("THREE.Matrix4.makeInvert3x3: Matrix not invertible.");a=1/a;c[0]=a*d;c[1]=a*e;c[2]=a*g;c[3]=a*f;c[4]=a*h;c[5]=a*i;c[6]=a*l;c[7]=a*k;c[8]=a*n;return b};
THREE.Matrix4.makeFrustum=function(a,b,c,d,e,g){var f;f=new THREE.Matrix4;f.n11=2*e/(b-a);f.n12=0;f.n13=(b+a)/(b-a);f.n14=0;f.n21=0;f.n22=2*e/(d-c);f.n23=(d+c)/(d-c);f.n24=0;f.n31=0;f.n32=0;f.n33=-(g+e)/(g-e);f.n34=-2*g*e/(g-e);f.n41=0;f.n42=0;f.n43=-1;f.n44=0;return f};THREE.Matrix4.makePerspective=function(a,b,c,d){var e,a=c*Math.tan(a*Math.PI/360);e=-a;return THREE.Matrix4.makeFrustum(e*b,a*b,e,a,c,d)};
THREE.Matrix4.makeOrtho=function(a,b,c,d,e,g){var f,h,i,l;f=new THREE.Matrix4;h=b-a;i=c-d;l=g-e;f.n11=2/h;f.n12=0;f.n13=0;f.n14=-((b+a)/h);f.n21=0;f.n22=2/i;f.n23=0;f.n24=-((c+d)/i);f.n31=0;f.n32=0;f.n33=-2/l;f.n34=-((g+e)/l);f.n41=0;f.n42=0;f.n43=0;f.n44=1;return f};THREE.Matrix4.__v1=new THREE.Vector3;THREE.Matrix4.__v2=new THREE.Vector3;THREE.Matrix4.__v3=new THREE.Vector3;
THREE.Object3D=function(){this.parent=void 0;this.children=[];this.up=new THREE.Vector3(0,1,0);this.position=new THREE.Vector3;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.dynamic=!1;this.rotationAutoUpdate=!0;this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixWorldNeedsUpdate=this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=0;this.boundRadiusScale=1;
this.visible=!0;this._vector=new THREE.Vector3;this.name=""};
THREE.Object3D=function(){this.parent=void 0;this.children=[];this.up=new THREE.Vector3(0,1,0);this.position=new THREE.Vector3;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.flipSided=this.doubleSided=this.dynamic=!1;this.rotationAutoUpdate=!0;this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixWorldNeedsUpdate=this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=
0;this.boundRadiusScale=1;this.visible=!0;this._vector=new THREE.Vector3;this.name=""};
THREE.Object3D.prototype={translate:function(a,b){this.matrix.rotateAxis(b);this.position.addSelf(b.multiplyScalar(a))},translateX:function(a){this.translate(a,this._vector.set(1,0,0))},translateY:function(a){this.translate(a,this._vector.set(0,1,0))},translateZ:function(a){this.translate(a,this._vector.set(0,0,1))},lookAt:function(a){this.matrix.lookAt(a,this.position,this.up);this.rotationAutoUpdate&&this.rotation.setRotationFromMatrix(this.matrix)},addChild:function(a){if(this.children.indexOf(a)===
-1){a.parent!==void 0&&a.parent.removeChild(a);a.parent=this;this.children.push(a);for(var b=this;b.parent!==void 0;)b=b.parent;b!==void 0&&b instanceof THREE.Scene&&b.addChildRecurse(a)}},removeChild:function(a){var b=this.children.indexOf(a);if(b!==-1)a.parent=void 0,this.children.splice(b,1)},getChildByName:function(a,b){var c,d,e;c=0;for(d=this.children.length;c<d;c++){e=this.children[c];if(e.name===a)return e;if(b&&(e=e.getChildByName(a,b),e!==void 0))return e}},updateMatrix:function(){this.matrix.setPosition(this.position);
this.useQuaternion?this.matrix.setRotationFromQuaternion(this.quaternion):this.matrix.setRotationFromEuler(this.rotation);if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1)this.matrix.scale(this.scale),this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z));this.matrixWorldNeedsUpdate=!0},update:function(a,b,c){this.matrixAutoUpdate&&this.updateMatrix();if(this.matrixWorldNeedsUpdate||b)a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix),this.matrixRotationWorld.extractRotation(this.matrixWorld,
......@@ -66,7 +66,9 @@ if(this.vertices.length>0){this.boundingBox={x:[this.vertices[0].position.x,this
else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=0,b=0,c=this.vertices.length;b<c;b++)a=Math.max(a,this.vertices[b].position.length());this.boundingSphere={radius:a}},computeEdgeFaces:function(){function a(a,b){return Math.min(a,b)+"_"+Math.max(a,b)}function b(a,b,c){a[b]===
void 0?(a[b]={set:{},array:[]},a[b].set[c]=1,a[b].array.push(c)):a[b].set[c]===void 0&&(a[b].set[c]=1,a[b].array.push(c))}var c,d,e,g,f,h={};c=0;for(d=this.faces.length;c<d;c++)f=this.faces[c],f instanceof THREE.Face3?(e=a(f.a,f.b),b(h,e,c),e=a(f.b,f.c),b(h,e,c),e=a(f.a,f.c),b(h,e,c)):f instanceof THREE.Face4&&(e=a(f.b,f.d),b(h,e,c),e=a(f.a,f.b),b(h,e,c),e=a(f.a,f.d),b(h,e,c),e=a(f.b,f.c),b(h,e,c),e=a(f.c,f.d),b(h,e,c));c=0;for(d=this.edges.length;c<d;c++){f=this.edges[c];e=f.vertexIndices[0];g=f.vertexIndices[1];
f.faceIndices=h[a(e,g)].array;for(e=0;e<f.faceIndices.length;e++)g=f.faceIndices[e],f.faces.push(this.faces[g])}}};THREE.GeometryIdCounter=0;THREE.Camera=function(a,b,c,d,e){THREE.Object3D.call(this);this.fov=a||50;this.aspect=b||1;this.near=c||0.1;this.far=d||2E3;this.target=e||new THREE.Object3D;this.useTarget=!0;this.matrixWorldInverse=new THREE.Matrix4;this.projectionMatrix=null;this.updateProjectionMatrix()};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;
THREE.Camera.prototype.supr=THREE.Object3D.prototype;THREE.Camera.prototype.translate=function(a,b){this.matrix.rotateAxis(b);b.multiplyScalar(a);this.position.addSelf(b);this.target.position.addSelf(b)};THREE.Camera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
THREE.Camera.prototype.supr=THREE.Object3D.prototype;THREE.Camera.prototype.translate=function(a,b){this.matrix.rotateAxis(b);b.multiplyScalar(a);this.position.addSelf(b);this.target.position.addSelf(b)};
THREE.Camera.prototype.updateProjectionMatrix=function(){if(this.fullWidth){var a=this.fullWidth/this.fullHeight,b=Math.tan(this.fov*Math.PI/360)*this.near,c=-b,d=a*c,a=Math.abs(a*b-d),c=Math.abs(b-c);this.projectionMatrix=THREE.Matrix4.makeFrustum(d+this.x*a/this.fullWidth,d+(this.x+this.width)*a/this.fullWidth,b-(this.y+this.height)*c/this.fullHeight,b-this.y*c/this.fullHeight,this.near,this.far)}else this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
THREE.Camera.prototype.setViewOffset=function(a,b,c,d,e,g){this.fullWidth=a;this.fullHeight=b;this.x=c;this.y=d;this.width=e;this.height=g;this.updateProjectionMatrix()};
THREE.Camera.prototype.update=function(a,b,c){if(this.useTarget)this.matrix.lookAt(this.position,this.target.position,this.up),this.matrix.setPosition(this.position),a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix),THREE.Matrix4.makeInvert(this.matrixWorld,this.matrixWorldInverse),b=!0;else if(this.matrixAutoUpdate&&this.updateMatrix(),b||this.matrixWorldNeedsUpdate)a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix),this.matrixWorldNeedsUpdate=
!1,b=!0,THREE.Matrix4.makeInvert(this.matrixWorld,this.matrixWorldInverse);for(a=0;a<this.children.length;a++)this.children[a].update(this.matrixWorld,b,c)};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=new THREE.Object3D;THREE.Light.prototype.constructor=THREE.Light;THREE.Light.prototype.supr=THREE.Object3D.prototype;THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;
THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;THREE.DirectionalLight=function(a,b,c,d){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=b||1;this.distance=c||0;this.castShadow=d!==void 0?d:!1};THREE.DirectionalLight.prototype=new THREE.Light;THREE.DirectionalLight.prototype.constructor=THREE.DirectionalLight;THREE.PointLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3;this.intensity=b||1;this.distance=c||0};
......@@ -86,8 +88,8 @@ THREE.MeshDepthMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.sha
THREE.MeshNormalMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.shading=a.shading?a.shading:THREE.FlatShading;this.wireframe=a.wireframe?a.wireframe:!1;this.wireframeLinewidth=a.wireframeLinewidth?a.wireframeLinewidth:1};THREE.MeshNormalMaterial.prototype=new THREE.Material;THREE.MeshNormalMaterial.prototype.constructor=THREE.MeshNormalMaterial;THREE.MeshFaceMaterial=function(){};
THREE.ParticleBasicMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.map=a.map!==void 0?a.map:null;this.size=a.size!==void 0?a.size:1;this.sizeAttenuation=a.sizeAttenuation!==void 0?a.sizeAttenuation:!0;this.vertexColors=a.vertexColors!==void 0?a.vertexColors:!1};THREE.ParticleBasicMaterial.prototype=new THREE.Material;THREE.ParticleBasicMaterial.prototype.constructor=THREE.ParticleBasicMaterial;
THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a]};THREE.Particle.prototype=new THREE.Object3D;THREE.Particle.prototype.constructor=THREE.Particle;THREE.Line=function(a,b,c){THREE.Object3D.call(this);this.geometry=a;this.materials=b instanceof Array?b:[b];this.type=c!=void 0?c:THREE.LineStrip};THREE.LineStrip=0;THREE.LinePieces=1;THREE.Line.prototype=new THREE.Object3D;THREE.Line.prototype.constructor=THREE.Line;
THREE.Mesh=function(a,b){THREE.Object3D.call(this);this.geometry=a;this.materials=b&&b.length?b:[b];this.overdraw=this.doubleSided=this.flipSided=!1;if(this.geometry&&(this.geometry.boundingSphere||this.geometry.computeBoundingSphere(),this.boundRadius=a.boundingSphere.radius,this.geometry.morphTargets.length)){this.morphTargetBase=-1;this.morphTargetForcedOrder=[];this.morphTargetInfluences=[];this.morphTargetDictionary={};for(var c=0;c<this.geometry.morphTargets.length;c++)this.morphTargetInfluences.push(0),
this.morphTargetDictionary[this.geometry.morphTargets[c].name]=c}};THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.Mesh.prototype.supr=THREE.Object3D.prototype;THREE.Mesh.prototype.getMorphTargetIndexByName=function(a){if(this.morphTargetDictionary[a]!==void 0)return this.morphTargetDictionary[a];console.log("THREE.Mesh.getMorphTargetIndexByName: morph target "+a+" does not exist. Returning 0.");return 0};
THREE.Mesh=function(a,b){THREE.Object3D.call(this);this.geometry=a;this.materials=b&&b.length?b:[b];this.overdraw=!1;if(this.geometry&&(this.geometry.boundingSphere||this.geometry.computeBoundingSphere(),this.boundRadius=a.boundingSphere.radius,this.geometry.morphTargets.length)){this.morphTargetBase=-1;this.morphTargetForcedOrder=[];this.morphTargetInfluences=[];this.morphTargetDictionary={};for(var c=0;c<this.geometry.morphTargets.length;c++)this.morphTargetInfluences.push(0),this.morphTargetDictionary[this.geometry.morphTargets[c].name]=
c}};THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.Mesh.prototype.supr=THREE.Object3D.prototype;THREE.Mesh.prototype.getMorphTargetIndexByName=function(a){if(this.morphTargetDictionary[a]!==void 0)return this.morphTargetDictionary[a];console.log("THREE.Mesh.getMorphTargetIndexByName: morph target "+a+" does not exist. Returning 0.");return 0};
THREE.Bone=function(a){THREE.Object3D.call(this);this.skin=a;this.skinMatrix=new THREE.Matrix4;this.hasNoneBoneChildren=!1};THREE.Bone.prototype=new THREE.Object3D;THREE.Bone.prototype.constructor=THREE.Bone;THREE.Bone.prototype.supr=THREE.Object3D.prototype;
THREE.Bone.prototype.update=function(a,b,c){this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixWorldNeedsUpdate)a?this.skinMatrix.multiply(a,this.matrix):this.skinMatrix.copy(this.matrix),this.matrixWorldNeedsUpdate=!1,b=!0;var d,e=this.children.length;if(this.hasNoneBoneChildren){this.matrixWorld.multiply(this.skin.matrixWorld,this.skinMatrix);for(d=0;d<e;d++)a=this.children[d],a instanceof THREE.Bone?a.update(this.skinMatrix,b,c):a.update(this.matrixWorld,!0,c)}else for(d=0;d<e;d++)this.children[d].update(this.skinMatrix,
b,c)};THREE.Bone.prototype.addChild=function(a){if(this.children.indexOf(a)===-1&&(a.parent!==void 0&&a.parent.removeChild(a),a.parent=this,this.children.push(a),!(a instanceof THREE.Bone)))this.hasNoneBoneChildren=!0};
......@@ -100,7 +102,7 @@ THREE.Scene=function(){THREE.Object3D.call(this);this.matrixAutoUpdate=!1;this.c
THREE.Scene.prototype.addChildRecurse=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(a instanceof THREE.Sound)this.sounds.indexOf(a)===-1&&this.sounds.push(a);else if(!(a instanceof THREE.Camera||a instanceof THREE.Bone)&&this.objects.indexOf(a)===-1)this.objects.push(a),this.__objectsAdded.push(a);for(var b=0;b<a.children.length;b++)this.addChildRecurse(a.children[b])};
THREE.Scene.prototype.removeChild=function(a){this.supr.removeChild.call(this,a);this.removeChildRecurse(a)};THREE.Scene.prototype.removeChildRecurse=function(a){if(a instanceof THREE.Light){var b=this.lights.indexOf(a);b!==-1&&this.lights.splice(b,1)}else a instanceof THREE.Sound?(b=this.sounds.indexOf(a),b!==-1&&this.sounds.splice(b,1)):a instanceof THREE.Camera||(b=this.objects.indexOf(a),b!==-1&&(this.objects.splice(b,1),this.__objectsRemoved.push(a)));for(b=0;b<a.children.length;b++)this.removeChildRecurse(a.children[b])};
THREE.Scene.prototype.addObject=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeObject=THREE.Scene.prototype.removeChild;THREE.Scene.prototype.addLight=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeLight=THREE.Scene.prototype.removeChild;
THREE.Projector=function(){function a(){var a=i[h]=i[h]||new THREE.RenderableVertex;h++;return a}function b(a,b){return b.z-a.z}function c(a,b){var c=0,d=1,f=a.z+a.w,e=b.z+b.w,g=-a.z+a.w,h=-b.z+b.w;return f>=0&&e>=0&&g>=0&&h>=0?!0:f<0&&e<0||g<0&&h<0?!1:(f<0?c=Math.max(c,f/(f-e)):e<0&&(d=Math.min(d,f/(f-e))),g<0?c=Math.max(c,g/(g-h)):h<0&&(d=Math.min(d,g/(g-h))),d<c?!1:(a.lerpSelf(b,c),b.lerpSelf(a,1-d),!0))}var d,e,g=[],f,h,i=[],l,k,n=[],j,o=[],p,q,t=[],u,G,y=[],E=new THREE.Vector4,r=new THREE.Vector4,
THREE.Projector=function(){function a(){var a=i[h]=i[h]||new THREE.RenderableVertex;h++;return a}function b(a,b){return b.z-a.z}function c(a,b){var c=0,d=1,e=a.z+a.w,f=b.z+b.w,g=-a.z+a.w,h=-b.z+b.w;return e>=0&&f>=0&&g>=0&&h>=0?!0:e<0&&f<0||g<0&&h<0?!1:(e<0?c=Math.max(c,e/(e-f)):f<0&&(d=Math.min(d,e/(e-f))),g<0?c=Math.max(c,g/(g-h)):h<0&&(d=Math.min(d,g/(g-h))),d<c?!1:(a.lerpSelf(b,c),b.lerpSelf(a,1-d),!0))}var d,e,g=[],f,h,i=[],l,k,n=[],j,o=[],p,q,t=[],u,G,y=[],E=new THREE.Vector4,r=new THREE.Vector4,
m=new THREE.Matrix4,z=new THREE.Matrix4,A=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],C=new THREE.Vector4,v=new THREE.Vector4;this.projectVector=function(a,b){m.multiply(b.projectionMatrix,b.matrixWorldInverse);m.multiplyVector3(a);return a};this.unprojectVector=function(a,b){m.multiply(b.matrixWorld,THREE.Matrix4.makeInvert(b.projectionMatrix));m.multiplyVector3(a);return a};this.projectObjects=function(a,c,f){var c=[],h,l,j;e=0;l=
a.objects;a=0;for(h=l.length;a<h;a++){j=l[a];var i;if(!(i=!j.visible))if(i=j instanceof THREE.Mesh){a:{i=void 0;for(var k=j.matrixWorld,o=-j.geometry.boundingSphere.radius*Math.max(j.scale.x,Math.max(j.scale.y,j.scale.z)),n=0;n<6;n++)if(i=A[n].x*k.n14+A[n].y*k.n24+A[n].z*k.n34+A[n].w,i<=o){i=!1;break a}i=!0}i=!i}if(!i)i=g[e]=g[e]||new THREE.RenderableObject,e++,d=i,E.copy(j.position),m.multiplyVector3(E),d.object=j,d.z=E.z,c.push(d)}f&&c.sort(b);return c};this.projectScene=function(d,e,g){var B=[],
E=e.near,S=e.far,N,P,H,M,x,I,D,K,O,s,w,U,W,X,R,V,T;G=q=j=k=0;e.matrixAutoUpdate&&e.update(void 0,!0);d.update(void 0,!1,e);m.multiply(e.projectionMatrix,e.matrixWorldInverse);A[0].set(m.n41-m.n11,m.n42-m.n12,m.n43-m.n13,m.n44-m.n14);A[1].set(m.n41+m.n11,m.n42+m.n12,m.n43+m.n13,m.n44+m.n14);A[2].set(m.n41+m.n21,m.n42+m.n22,m.n43+m.n23,m.n44+m.n24);A[3].set(m.n41-m.n21,m.n42-m.n22,m.n43-m.n23,m.n44-m.n24);A[4].set(m.n41-m.n31,m.n42-m.n32,m.n43-m.n33,m.n44-m.n34);A[5].set(m.n41+m.n31,m.n42+m.n32,m.n43+
......
此差异已折叠。
......@@ -22,6 +22,7 @@
<script type="text/javascript" src="js/Stats.js"></script>
<!-- load the font file from canvas-text -->
<script type="text/javascript" src="js/helvetiker-normal-normal.js"></script>
......@@ -55,10 +56,10 @@
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the text<br/>Simple Dynamic 3D Text Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a>';
info.innerHTML = 'Simple Dynamic 3D Text Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin the text';
container.appendChild( info );
camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
camera.target.position.y = 150;
......@@ -66,41 +67,49 @@
scene = new THREE.Scene();
// Get text from hash
var theText = "Hello three.js! :)";
var hash = document.location.hash.substr(1);
if (hash.length === 0) {
} else {
theText = hash;
}
var hash = document.location.hash.substr( 1 );
if ( hash.length !== 0 ) {
theText = hash;
}
var text3d = new THREE.Text(theText, {
var text3d = new THREE.Text( theText, {
size: 80,
height:40,
curveSegments:2,
height: 20,
curveSegments: 2,
font: "helvetiker"
});
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe:false });
text = new THREE.Mesh( text3d, textMaterial);
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe:false } );
text = new THREE.Mesh( text3d, textMaterial );
text.doubleSided = false;
text.position.y = 0;
text.position.y = 0;
text.position.y = 100;
text.position.z = 0;
text.rotation.x = 0;
text.rotation.y = Math.PI*2;
text.overdraw = true;
scene.addObject( text );
// Plane
plane = new THREE.Mesh( new THREE.Plane( 800, 800 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0, wireframe:true}) );
plane = new THREE.Mesh( new THREE.Plane( 800, 800 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0, wireframe:true }) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.position.x = 0;
plane.overdraw = true;
scene.addObject( plane );
//scene.addObject( plane );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
......@@ -115,6 +124,7 @@
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
//
......@@ -129,6 +139,7 @@
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
......@@ -136,6 +147,7 @@
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
......@@ -143,6 +155,7 @@
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
......@@ -150,6 +163,7 @@
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
......@@ -162,6 +176,7 @@
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
......@@ -174,6 +189,7 @@
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
//
......
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - materials - cube reflection [camaro]</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#000;
color:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
h1 { }
a { color:skyblue }
canvas { pointer-events:none; z-index:10; position:relative; }
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
#d { text-align:center; margin:1em 0 -2.5em 0; z-index:0; position:relative; display:block }
#buttons { margin:0.5em 0 0 0 }
button { font-family:georgia; border:0; background:#222; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px }
button:hover { background:#333 }
</style>
</head>
<body>
<div id="d">
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a>
- O, P : change eye separation
</div>
<div id="buttons"></div>
</div>
<div id="log"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, webglRenderer;
var lightMesh;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 1000;
camera.updateMatrix();
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x555555 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 0.5;
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00 );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
scene.addLight( pointLight );
sphere = new THREE.Sphere( 100, 16, 8, 1 );
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;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 20, antialias: true } );
webglRenderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( webglRenderer.domElement );
webglRenderer.setFaceCulling( 0 );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'keydown', onKeyDown, false );
var r = "textures/cube/SwedishRoyalCastle/";
var urls = [ r + "px.jpg", r + "nx.jpg",
r + "py.jpg", r + "ny.jpg",
r + "pz.jpg", r + "nz.jpg" ];
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
var camaroMaterials = {
body: [],
chrome: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
glass: new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, combine: THREE.MixOperation, reflectivity: 0.25, transparent: true } ),
tire: new THREE.MeshLambertMaterial( { color: 0x050505 } ),
interior: new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
black: new THREE.MeshLambertMaterial( { color: 0x000000 } )
}
camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
var loader = new THREE.BinaryLoader();
loader.load( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
}
function $( id ) { return document.getElementById( id ) }
function createButtons( materials, geometry ) {
var i, src = "", parent = $( "buttons" );
for( i = 0; i < materials.length; i++ ) {
src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
}
parent.innerHTML = src;
for( i = 0; i < materials.length; i++ ) {
$( "m" + i ).counter = i;
$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
}
}
function createScene( geometry, materials ) {
var s = 75, m = new THREE.MeshFaceMaterial();
geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; // car body
geometry.materials[ 1 ][ 0 ] = materials.chrome; // wheels chrome
geometry.materials[ 2 ][ 0 ] = materials.chrome; // grille chrome
geometry.materials[ 3 ][ 0 ] = materials.darkchrome; // door lines
geometry.materials[ 4 ][ 0 ] = materials.glass; // windshield
geometry.materials[ 5 ][ 0 ] = materials.interior; // interior
geometry.materials[ 6 ][ 0 ] = materials.tire; // tire
geometry.materials[ 7 ][ 0 ] = materials.black; // tireling
geometry.materials[ 8 ][ 0 ] = materials.black; // behind grille
THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
createButtons( materials.body, geometry );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function onKeyDown ( event ) {
switch( event.keyCode ) {
/* O */
case 79: webglRenderer.separation -= 0.5; break;
/* P */
case 80: webglRenderer.separation += 0.5; break;
}
console.log( webglRenderer.separation );
};
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = - new Date().getTime() * 0.0002;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
lightMesh.position.x = 1500 * Math.cos( timer );
lightMesh.position.z = 1500 * Math.sin( timer );
webglRenderer.render( scene, camera );
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - materials - cube refraction [balls]</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#777;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
z-index:1000;
}
a {
color: #ffffff;
}
#oldie a { color:#da0 }
</style>
</head>
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>
- O, P : change eye separation
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, timer;
var camera, scene, webglRenderer;
var mesh, zmesh, lightMesh, geometry;
var spheres = [];
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.z = 3200;
scene = new THREE.Scene();
var geometry = new THREE.Sphere( 100, 32, 16 );
var path = "textures/cube/skybox/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 10000 - 5000;
mesh.position.y = Math.random() * 10000 - 5000;
mesh.position.z = Math.random() * 10000 - 5000;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
scene.addObject( mesh );
spheres.push( mesh );
}
THREE.SceneUtils.addPanoramaCubeWebGL( scene, 100000, textureCube );
webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 90 } );
webglRenderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( webglRenderer.domElement );
document.addEventListener( 'keydown', onKeyDown, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
}
function onKeyDown ( event ) {
switch( event.keyCode ) {
/* O */
case 79: webglRenderer.separation -= 0.5; break;
/* P */
case 80: webglRenderer.separation += 0.5; break;
}
console.log( webglRenderer.separation );
};
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
timer = new Date().getTime() * 0.0001;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
for ( var i = 0, il = spheres.length; i < il; i ++ ) {
var sphere = spheres[ i ];
sphere.position.x = 5000 * Math.cos( timer + i );
sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );
}
webglRenderer.render( scene, camera );
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - multiple-canvaes - complex</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
#container1, #container2, #container3 {
position: relative;
border: 1px solid red;
}
#container1 {
width: 300px;
height: 200px;
}
#container2 {
width: 400px;
height: 100px;
left: 150px;
}
#container3 {
width: 200px;
height: 300px;
left: 75px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container">
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var apps = [];
init();
animate();
function init() {
var container1 = document.getElementById( 'container1' );
var container2 = document.getElementById( 'container2' );
var container3 = document.getElementById( 'container3' );
var fullWidth = 550;
var fullHeight = 600;
apps.push( new App( 'container1', fullWidth, fullHeight, 0, 0, container1.clientWidth, container1.clientHeight ) );
apps.push( new App( 'container2', fullWidth, fullHeight, 150, 200, container2.clientWidth, container2.clientHeight ) );
apps.push( new App( 'container3', fullWidth, fullHeight, 75, 300, container3.clientWidth, container3.clientHeight ) );
}
function animate() {
for ( var i = 0; i < apps.length; ++i ) {
apps[ i ].animate();
}
requestAnimationFrame( animate );
}
function App( containerId, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight ) {
var container, stats;
var camera, scene, renderer;
var mesh, mesh2, mesh3, light;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
function init() {
container = document.getElementById( containerId );
camera = new THREE.Camera( 20, container.clientWidth / container.clientHeight, 1, 10000 );
camera.setViewOffset(fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight);
camera.position.z = 1800;
scene = new THREE.Scene();
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
light.position.normalize();
scene.addLight( light );
var shadowMaterial = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ) } );
var shadowGeo = new THREE.Plane( 300, 300, 1, 1 );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.position.x = - 400;
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.position.x = 400;
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
var faceIndices = [ 'a', 'b', 'c', 'd' ];
var color, f, f2, f3, p, n, vertexIndex,
geometry = new THREE.Icosahedron( 1 ),
geometry2 = new THREE.Icosahedron( 1 ),
geometry3 = new THREE.Icosahedron( 1 );
for ( var i = 0; i < geometry.faces.length; i++ ) {
f = geometry.faces[ i ];
f2 = geometry2.faces[ i ];
f3 = geometry3.faces[ i ];
n = ( f instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < n; j++ ) {
vertexIndex = f[ faceIndices[ j ] ];
p = geometry.vertices[ vertexIndex ].position;
color = new THREE.Color( 0xffffff );
color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
f.vertexColors[ j ] = color;
color = new THREE.Color( 0xffffff );
color.setHSV( 0.0, ( p.y + 1 ) / 2, 1.0 );
f2.vertexColors[ j ] = color;
color = new THREE.Color( 0xffffff );
color.setHSV( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 1.0 );
f3.vertexColors[ j ] = color;
}
}
var materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
];
mesh = new THREE.Mesh( geometry, materials );
mesh.position.x = -400;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
mesh.rotation.x = -1.87;
scene.addObject( mesh );
mesh2 = new THREE.Mesh( geometry2, materials );
mesh2.position.x = 400;
mesh2.rotation.x = 0;
mesh2.scale = mesh.scale;
scene.addObject( mesh2 );
mesh3 = new THREE.Mesh( geometry3, materials );
mesh3.position.x = 0;
mesh3.rotation.x = 0;
mesh3.scale = mesh.scale;
scene.addObject( mesh3 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( container.clientWidth, container.clientHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
this.animate = function() {
render();
stats.update();
};
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render( scene, camera );
}
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - multiple canvases - grid</title>
<meta charset="utf-8">
<style type="text/css">
html, body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
margin: 0px;
overflow: hidden;
width: 100%;
height: 100%;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
#centerer {
display: table;
width: 100%;
height: 100%;
}
#centerer-cell {
display: table-cell;
vertical-align: middle;
}
#container {
margin-left: auto;
margin-right: auto;
width: 604px; // 300*2 + border;
}
#container div {
float: left;
}
#container1, #container2, #container3, #container4 {
width: 300px;
height: 200px;
position: relative;
border: 1px solid red;
float:left;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="centerer">
<div id="centerer-cell">
<div id="container">
<div class="container-row">
<div id="container1"></div>
<div id="container2"></div>
</div>
<div class="container-row">
<div id="container3"></div>
<div id="container4"></div>
</div>
</div>
</div>
</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var apps = [];
init();
animate();
function init() {
var w = 300;
var h = 200;
var fullWidth = w * 2;
var fullHeight = h * 2;
apps.push( new App( 'container1', fullWidth, fullHeight, w * 0, h * 0, w, h ) );
apps.push( new App( 'container2', fullWidth, fullHeight, w * 1, h * 0, w, h ) );
apps.push( new App( 'container3', fullWidth, fullHeight, w * 0, h * 1, w, h ) );
apps.push( new App( 'container4', fullWidth, fullHeight, w * 1, h * 1, w, h ) );
}
function animate() {
for ( var i = 0; i < apps.length; ++i ) {
apps[ i ].animate();
}
requestAnimationFrame( animate );
}
function App( containerId, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight ) {
var container, stats;
var camera, scene, renderer;
var mesh, mesh2, mesh3, light;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
function init() {
container = document.getElementById( containerId );
camera = new THREE.Camera( 20, container.clientWidth / container.clientHeight, 1, 10000 );
camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
camera.position.z = 1800;
scene = new THREE.Scene();
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
light.position.normalize();
scene.addLight( light );
var shadowMaterial = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ) } );
var shadowGeo = new THREE.Plane( 300, 300, 1, 1 );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.position.x = - 400;
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.position.x = 400;
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
var faceIndices = [ 'a', 'b', 'c', 'd' ];
var color, f, f2, f3, p, n, vertexIndex,
geometry = new THREE.Icosahedron( 1 ),
geometry2 = new THREE.Icosahedron( 1 ),
geometry3 = new THREE.Icosahedron( 1 );
for ( var i = 0; i < geometry.faces.length; i++ ) {
f = geometry.faces[ i ];
f2 = geometry2.faces[ i ];
f3 = geometry3.faces[ i ];
n = ( f instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < n; j++ ) {
vertexIndex = f[ faceIndices[ j ] ];
p = geometry.vertices[ vertexIndex ].position;
color = new THREE.Color( 0xffffff );
color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
f.vertexColors[ j ] = color;
color = new THREE.Color( 0xffffff );
color.setHSV( 0.0, ( p.y + 1 ) / 2, 1.0 );
f2.vertexColors[ j ] = color;
color = new THREE.Color( 0xffffff );
color.setHSV( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 1.0 );
f3.vertexColors[ j ] = color;
}
}
var materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
];
mesh = new THREE.Mesh( geometry, materials );
mesh.position.x = -400;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
mesh.rotation.x = -1.87;
scene.addObject( mesh );
mesh2 = new THREE.Mesh( geometry2, materials );
mesh2.position.x = 400;
mesh2.rotation.x = 0;
mesh2.scale = mesh.scale;
scene.addObject( mesh2 );
mesh3 = new THREE.Mesh( geometry3, materials );
mesh3.position.x = 0;
mesh3.rotation.x = 0;
mesh3.scale = mesh.scale;
scene.addObject( mesh3 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( container.clientWidth, container.clientHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
this.animate = function() {
render();
stats.update();
};
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render( scene, camera );
}
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - particles - dynamic - postprocessing</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000;
margin: 0px;
overflow: hidden;
}
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a { color: red; }
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl dynamic particles + postprocessing
- models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1" target="_blank">Reallusion</a>
<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255" target="_blank">iClone</a>,
<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_HEIGHT = window.innerHeight;
var SCREEN_WIDTH = window.innerWidth;
var container, stats;
var camera, scene, renderer, mesh, directionalLight;
var parent,
meshes = [], clonemeshes = [];
var p;
var aloader, bloader;
var total = 0, totaln = 0;
var postprocessing1 = {};
var postprocessing2 = {};
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.Camera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 50000 );
camera.position.z = 7000;
camera.position.y = 700;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 0, 1 );
directionalLight.position.normalize();
scene.addLight( directionalLight );
initPostprocessingBloom( postprocessing1 );
initPostprocessingFocus( postprocessing2 );
aloader = new THREE.JSONLoader( );
bloader = new THREE.BinaryLoader( true );
document.body.appendChild( bloader.statusDomElement );
aloader.load( { model: "obj/terrain.js", callback: function( geometry ) {
createMesh( geometry, scene, 16.8, -11000, -200, -5000, 0x00ff44, false );
createMesh( geometry, scene, 16.8, 11000, -200, -15000, 0x00ff33, false );
createMesh( geometry, scene, 16.8, 0, -200, -15000, 0x00ff33, false );
createMesh( geometry, scene, 16.8, 0, -200, 15000, 0x00ff33, false );
createMesh( geometry, scene, 16.8, 11000, -200, 15000, 0x00ff22, false );
createMesh( geometry, scene, 16.8, -11000, -200, 5000, 0x00ff11, false );
createMesh( geometry, scene, 16.8, 13000, -200, 5000, 0x00ff55, false );
createMesh( geometry, scene, 16.8, 13000, -200, -5000, 0x00ff66, false );
} } );
bloader.load( { model: "obj/veyron/VeyronNoUv_bin.js", callback: function( geometry ) { createMesh( geometry, scene, 6.8, 2200, -200, -100, 0x0055ff, false ) } } );
bloader.load( { model: "obj/female02/Female02_bin.js", callback: function( geometry ) {
createMesh( geometry, scene, 4.05, -1000, -350, 0, 0xffdd44, true );
createMesh( geometry, scene, 4.05, 0, -350, 0, 0xffffff, true );
createMesh( geometry, scene, 4.05, 1000, -350, 400, 0xff4422, true );
createMesh( geometry, scene, 4.05, 250, -350, 1500, 0xff9955, true );
createMesh( geometry, scene, 4.05, 250, -350, 2500, 0xff77dd, true );
} } );
bloader.load( { model: "obj/male02/Male02_bin.js", callback: function( geometry ) {
createMesh( geometry, scene, 4.05, -500, -350, 600, 0xff7744, true );
createMesh( geometry, scene, 4.05, 500, -350, 0, 0xff5522, true );
createMesh( geometry, scene, 4.05, -250, -350, 1500, 0xff9922, true );
createMesh( geometry, scene, 4.05, -250, -350, -1500, 0xff99ff, true );
} } );
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
parent = new THREE.Object3D();
scene.addObject( parent );
var grid = new THREE.ParticleSystem( new THREE.Plane( 15000, 15000, 64, 64 ), new THREE.ParticleBasicMaterial( { color: 0xff0000, size: 10 } ) );
grid.rotation.x = 1.57;
grid.position.y = -400;
parent.addChild( grid );
totaln += 1;
total += grid.geometry.vertices.length;
}
function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
var i, c;
var vertices = originalGeometry.vertices;
var vl = vertices.length;
var geometry = new THREE.Geometry();
var vertices_tmp = [];
for( i = 0; i < vl; i++ ) {
p = vertices[ i ].position;
geometry.vertices[ i ] = new THREE.Vertex( p.clone() );
vertices_tmp[ i ] = [ p.x, p.y, p.z, 0, 0 ];
}
var clones = [
[ 6000, 0, -4000 ],
[ 5000, 0, 0 ],
[ 1000, 0, 5000 ],
[ 1000, 0, -5000 ],
[ 4000, 0, 2000 ],
[ -4000, 0, 1000 ],
[ -5000, 0, -5000 ],
[ 0, 0, 0 ]
];
if ( dynamic ) {
for( i = 0; i < clones.length; i++ ) {
c = ( i < clones.length -1 ) ? 0x252525 : color;
mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: c } ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x + clones[ i ][ 0 ];
mesh.position.y = y + clones[ i ][ 1 ];
mesh.position.z = z + clones[ i ][ 2 ];
parent.addChild( mesh );
clonemeshes.push( { mesh: mesh, speed: 0.5 + Math.random() } );
}
totaln += clones.length;
total += clones.length * vl;
} else {
mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: color } ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
parent.addChild( mesh );
totaln += 1;
total += vl;
}
bloader.statusDomElement.style.display = "none";
meshes.push( { mesh: mesh, vertices: geometry.vertices, vertices_tmp: vertices_tmp, vl: vl,
down: 0, up: 0, direction: 0, speed: 35, delay: Math.floor( 200 + 200 * Math.random() ),
started: false, start: Math.floor( 100 + 200 * Math.random() ),
dynamic: dynamic,
bb: geometry.boundingBox } );
console.log( total, totaln );
}
function initPostprocessingFocus( effect ) {
effect.type = "focus";
effect.scene = new THREE.Scene();
effect.camera = new THREE.Camera();
effect.camera.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
effect.camera.position.z = 100;
effect.texture = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
var heatUniforms = {
"map": { type: "t", value:0, texture: effect.texture },
"screenWidth": { type: "f", value: SCREEN_WIDTH },
"screenHeight": { type: "f", value: SCREEN_HEIGHT },
"sampleDistance": { type: "f", value: 0.94 },
"waveFactor": { type: "f", value: 0.00125 }
};
effect.materialHeat = new THREE.MeshShaderMaterial( {
uniforms: heatUniforms,
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float screenWidth;",
"uniform float screenHeight;",
"uniform float sampleDistance;",
"uniform float waveFactor;",
"uniform sampler2D map;",
"varying vec2 vUv;",
"void main() {",
"vec4 color, org, tmp, add;",
"float sample_dist, f;",
"vec2 vin;",
"vec2 uv = vUv;",
"add += color = org = texture2D( map, uv );",
"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
"sample_dist = dot( vin, vin ) * 2.0;",
"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
"vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",
"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
"}"
].join("\n")
} );
effect.quad = new THREE.Mesh( new THREE.Plane( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialHeat );
effect.quad.position.z = -500;
effect.scene.addObject( effect.quad );
}
function initPostprocessingBloom( effect ) {
effect.type = "bloomnoise";
effect.scene = new THREE.Scene();
effect.camera = new THREE.Camera();
effect.camera.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
effect.camera.position.z = 100;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
effect.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, pars );
effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
screen_uniforms["opacity"].value = 0.75;
effect.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
effect.blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
convolution_uniforms["uImageIncrement"].value = effect.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
effect.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
var film_shader = THREE.ShaderUtils.lib["film"];
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = effect.rtTexture1;
effect.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
effect.materialFilm.uniforms.grayscale.value = 0;
effect.materialFilm.uniforms.nIntensity.value = 0.5;
effect.materialFilm.uniforms.sIntensity.value = 0.5;
effect.materialFilm.uniforms.sCount.value = 1448;
effect.quad = new THREE.Mesh( new THREE.Plane( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialConvolution );
effect.quad.position.z = -500;
effect.scene.addObject( effect.quad );
}
var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt,
time, oldTime, delta;
function animate() {
requestAnimationFrame( animate );
render();
//stats.update();
}
function render() {
if ( ! oldTime ) {
oldTime = new Date().getTime();
}
time = new Date().getTime();
delta = 0.01 * ( time - oldTime );
oldTime = time;
delta = delta < 2 ? delta : 2;
parent.rotation.y += -0.02 * delta;
for( j = 0, jl = clonemeshes.length; j < jl; j++ ) {
cm = clonemeshes[ j ];
cm.mesh.rotation.y += -0.1 * delta * cm.speed;
}
for( j = 0, jl = meshes.length; j < jl; j++ ) {
data = meshes[ j ];
mesh = data.mesh;
vertices = data.vertices;
vertices_tmp = data.vertices_tmp;
vl = data.vl;
if ( ! data.dynamic ) continue;
if ( data.start > 0 ) {
data.start -= 1;
} else {
if ( !data.started ) {
data.direction = -1;
data.started = true;
}
}
for ( i = 0; i < vl; i ++ ) {
p = vertices[ i ].position;
vt = vertices_tmp[ i ];
// falling down
if ( data.direction < 0 ) {
// var d = Math.abs( p.x - vertices_tmp[ i ][ 0 ] ) + Math.abs( p.y - vertices_tmp[ i ][ 1 ] ) + Math.abs( p.z - vertices_tmp[ i ][ 2 ] );
// if ( d < 200 ) {
if ( p.y > 0 ) {
// p.y += data.direction * data.speed * delta;
p.x += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;
p.y += 3.0 * ( 0.25 - Math.random() ) * data.speed * delta;
p.z += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;
} else {
if ( ! vt[ 3 ] ) {
vt[ 3 ] = 1;
data.down += 1;
}
}
}
// rising up
if ( data.direction > 0 ) {
//if ( p.y < vertices_tmp[ i ][ 1 ] ) {
// p.y += data.direction * data.speed * delta;
d = Math.abs( p.x - vt[ 0 ] ) + Math.abs( p.y - vt[ 1 ] ) + Math.abs( p.z - vt[ 2 ] );
if ( d > 1 ) {
p.x += - ( p.x - vt[ 0 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
p.y += - ( p.y - vt[ 1 ] ) / d * data.speed * delta * ( 1 + Math.random() );
p.z += - ( p.z - vt[ 2 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
} else {
if ( ! vt[ 4 ] ) {
vt[ 4 ] = 1;
data.up += 1;
}
}
}
}
// all down
if ( data.down == vl ) {
if ( data.delay == 0 ) {
data.direction = 1;
data.speed = 10;
data.down = 0;
data.delay = 320;
for ( i = 0; i < vl; i ++ ) {
vertices_tmp[ i ][ 3 ] = 0;
}
} else {
data.delay -= 1;
}
}
// all up
if ( data.up == vl ) {
if ( data.delay == 0 ) {
data.direction = -1;
data.speed = 35;
data.up = 0;
data.delay = 120;
for ( i = 0; i < vl; i ++ ) {
vertices_tmp[ i ][ 4 ] = 0;
}
} else {
data.delay -= 1;
}
}
mesh.geometry.__dirtyVertices = true;
}
renderer.clear();
// BLOOM
// Render scene into texture
renderer.render( scene, camera, postprocessing1.rtTexture1, true );
// Render quad with blured scene into texture (convolution pass 1)
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialConvolution;
postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture1;
postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blurx;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture2, true );
// Render quad with blured scene into texture (convolution pass 2)
postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture2;
postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blury;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture3, true );
// Render original scene with superimposed blur to texture
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialScreen;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture1, false );
// NOISE + SCANLINES
postprocessing1.materialFilm.uniforms.time.value += 0.01;
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialFilm;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing2.texture, true );
// FOCUS
renderer.render( postprocessing2.scene, postprocessing2.camera );
}
</script>
</body>
</html>
/**
* @author mr.doob / http://mrdoob.com/
* @author mikael emtinger / http://gomo.se/
* @author greggman / http://games.greggman.com/
*/
THREE.Camera = function ( fov, aspect, near, far, target ) {
......@@ -41,7 +42,78 @@ THREE.Camera.prototype.translate = function ( distance, axis ) {
THREE.Camera.prototype.updateProjectionMatrix = function () {
this.projectionMatrix = THREE.Matrix4.makePerspective( this.fov, this.aspect, this.near, this.far );
if ( this.fullWidth ) {
var aspect = this.fullWidth / this.fullHeight;
var top = Math.tan( this.fov * Math.PI / 360 ) * this.near;
var bottom = -top;
var left = aspect * bottom;
var right = aspect * top;
var width = Math.abs( right - left );
var height = Math.abs( top - bottom );
this.projectionMatrix = THREE.Matrix4.makeFrustum(
left + this.x * width / this.fullWidth,
left + ( this.x + this.width ) * width / this.fullWidth,
top - ( this.y + this.height ) * height / this.fullHeight,
top - this.y * height / this.fullHeight,
this.near,
this.far );
} else {
this.projectionMatrix = THREE.Matrix4.makePerspective( this.fov, this.aspect, this.near, this.far );
}
};
/**
* Sets an offset in a larger frustum. This is useful for multi-window or
* multi-monitor/multi-machine setups.
*
* For example, if you have 3x2 monitors and each monitor is 1920x1080 and
* the monitors are in grid like this
*
* +---+---+---+
* | A | B | C |
* +---+---+---+
* | D | E | F |
* +---+---+---+
*
* then for monitor each monitor you would call it like this
*
* var w = 1920;
* var h = 1080;
* var fullWidth = w * 3;
* var fullHeight = h * 2;
*
* --A--
* camera.setOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
* --B--
* camera.setOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
* --C--
* camera.setOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
* --D--
* camera.setOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
* --E--
* camera.setOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
* --F--
* camera.setOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
*
* Note there is no reason monitors have to be the same size or in a grid.
*/
THREE.Camera.prototype.setViewOffset = function( fullWidth, fullHeight, x, y, width, height ) {
this.fullWidth = fullWidth;
this.fullHeight = fullHeight;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.updateProjectionMatrix();
};
......
......@@ -16,6 +16,9 @@ THREE.Object3D = function() {
this.scale = new THREE.Vector3( 1, 1, 1 );
this.dynamic = false; // when true it retains arrays so they can be updated with __dirty*
this.doubleSided = false;
this.flipSided = false;
this.rotationAutoUpdate = true;
......
......@@ -157,17 +157,21 @@ THREE.Vector2.prototype = {
},
// deprecated: same as normalize
unit : function () {
return this.normalize();
// this.multiplyScalar( 1 / this.length() );
// return this;
},
equals : function(v) {
return ( (v.x == this.x) && (v.y == this.y) );
// danger, works only on numbers which are exactly the same
// (which may be not what is expected thanks to floating point precision)
// (should be probably using some tiny epsilon instead of equality)
equals : function( v ) {
return ( ( v.x == this.x ) && ( v.y == this.y ) );
}
};
......@@ -344,10 +344,8 @@ THREE.FontUtils = {
}
}
// you would not wish to reach this point of code, because thing else is then wrong.
if (!found) {
// you would not wish to reach this point of code, because thing else is then wrong.
console.log("warning...");
points.push(verts[l]);
face.push(points.length-1);
}
......
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.CrosseyedWebGLRenderer = function ( parameters ) {
THREE.WebGLRenderer.call( this, parameters );
this.autoClear = false;
var _this = this, _setSize = this.setSize, _render = this.render;
var _width, _height;
var _cameraL = new THREE.Camera(),
_cameraR = new THREE.Camera();
_this.separation = 10;
if ( parameters && parameters.separation !== undefined ) _this.separation = parameters.separation;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var _camera = new THREE.Camera( 53, HALF_WIDTH / SCREEN_HEIGHT, 1, 10000 );
_camera.position.z = -10;
this.setSize = function ( width, height ) {
_setSize.call( _this, width, height );
_width = width/2;
_height = height;
};
this.render = function ( scene, camera, renderTarget, forceClear ) {
this.clear();
_cameraL.fov = camera.fov;
_cameraL.aspect = 0.5 * camera.aspect;
_cameraL.near = camera.near;
_cameraL.far = camera.far;
_cameraL.updateProjectionMatrix();
_cameraL.position.copy( camera.position );
_cameraL.target.position.copy( camera.target.position );
_cameraL.translateX( _this.separation );
_cameraR.projectionMatrix = _cameraL.projectionMatrix;
_cameraR.position.copy( camera.position );
_cameraR.target.position.copy( camera.target.position );
_cameraR.translateX( - _this.separation );
this.setViewport( 0, 0, _width, _height );
_render.call( _this, scene, _cameraL );
this.setViewport( _width, 0, _width, _height );
_render.call( _this, scene, _cameraR, false );
};
};
THREE.CrosseyedWebGLRenderer.prototype = new THREE.WebGLRenderer();
THREE.CrosseyedWebGLRenderer.prototype.constructor = THREE.CrosseyedWebGLRenderer;
......@@ -11,9 +11,6 @@ THREE.Mesh = function ( geometry, materials ) {
this.geometry = geometry;
this.materials = materials && materials.length ? materials : [ materials ];
this.flipSided = false;
this.doubleSided = false;
this.overdraw = false; // TODO: Move to material?
......
......@@ -9,9 +9,6 @@ THREE.Ribbon = function ( geometry, materials ) {
this.geometry = geometry;
this.materials = materials instanceof Array ? materials : [ materials ];
this.flipSided = false;
this.doubleSided = false;
};
THREE.Ribbon.prototype = new THREE.Object3D();
......
......@@ -826,7 +826,7 @@ THREE.WebGLRenderer = function ( parameters ) {
obj_skinVerticesB = geometry.skinVerticesB,
obj_skinIndices = geometry.skinIndices,
obj_skinWeights = geometry.skinWeights,
obj_edgeFaces = object instanceof THREE.ShadowVolume ? geometry.edgeFaces : undefined;
obj_edgeFaces = object instanceof THREE.ShadowVolume ? geometry.edgeFaces : undefined,
morphTargets = geometry.morphTargets;
......@@ -4343,9 +4343,9 @@ THREE.WebGLRenderer = function ( parameters ) {
//
program = _gl.createProgram(),
program = _gl.createProgram();
prefix_fragment = [
var prefix_fragment = [
"#ifdef GL_ES",
"precision highp float;",
......@@ -4366,9 +4366,9 @@ THREE.WebGLRenderer = function ( parameters ) {
"uniform vec3 cameraPosition;",
""
].join("\n"),
].join("\n");
prefix_vertex = [
var prefix_vertex = [
_supportsVertexTextures ? "#define VERTEX_TEXTURES" : "",
......
......@@ -111,7 +111,8 @@ EXTRAS_FILES = [
'extras/objects/Trident.js',
'extras/physics/Collisions.js',
'extras/physics/CollisionUtils.js',
'extras/renderers/AnaglyphWebGLRenderer.js'
'extras/renderers/AnaglyphWebGLRenderer.js',
'extras/renderers/CrosseyedWebGLRenderer.js'
]
CANVAS_FILES = [
......
python build.py --all
python build.py --all --includes
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册