Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 17547a2e 编写于 作者: M Mr.doob
浏览文件
操作

Changed addChild()s to add()s in ColladaLoader. 

Cleaned up some more examples.
上级 71c2df16
展开全部 隐藏空白更改
内联 并排
Showing with 668 addition and 669 deletion
build/Three.js
浏览文件 @ 17547a2e
此差异已折叠。
build/custom/ThreeCanvas.js
浏览文件 @ 17547a2e
......@@ -69,7 +69,7 @@ THREE.Quaternion.prototype={constructor:THREE.Quaternion,set:function(a,b,c,d){t
this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRotationMatrix:function(a){var b=Math.pow(a.determinant(),1/3);this.w=Math.sqrt(Math.max(0,b+a.n11+a.n22+a.n33))/2;this.x=Math.sqrt(Math.max(0,b+a.n11-a.n22-a.n33))/2;this.y=Math.sqrt(Math.max(0,b-a.n11+a.n22-a.n33))/2;this.z=Math.sqrt(Math.max(0,b-a.n11-a.n22+a.n33))/2;this.x=a.n32-a.n23<0?-Math.abs(this.x):Math.abs(this.x);this.y=a.n13-a.n31<0?-Math.abs(this.y):Math.abs(this.y);this.z=a.n21-a.n12<0?-Math.abs(this.z):Math.abs(this.z);
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);a==0?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,g=a.x,f=a.y,h=a.z,a=a.w;this.x=b*a+e*g+c*h-d*f;this.y=c*a+e*f+d*g-b*h;this.z=d*a+e*h+b*f-c*g;this.w=e*a-b*g-c*f-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,g=this.x,f=this.y,h=this.z,l=this.w,j=l*c+f*e-h*d,n=l*d+h*c-g*e,i=l*e+g*d-f*c,c=-g*
c-f*d-h*e;b.x=j*l+c*-g+n*-h-i*-f;b.y=n*l+c*-f+i*-g-j*-h;b.z=i*l+c*-h+j*-f-n*-g;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;if(Math.abs(e)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var g=Math.acos(e),f=Math.sqrt(1-e*e);if(Math.abs(f)<0.0010)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;e=Math.sin((1-d)*g)/f;d=Math.sin(d*g)/f;c.w=a.w*e+b.w*d;c.x=a.x*e+b.x*d;c.y=a.y*e+b.y*d;c.z=a.z*e+b.z*d;return c};
c-f*d-h*e;b.x=j*l+c*-g+n*-h-i*-f;b.y=n*l+c*-f+i*-g-j*-h;b.z=i*l+c*-h+j*-f-n*-g;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;if(Math.abs(e)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var g=Math.acos(e),f=Math.sqrt(1-e*e);if(Math.abs(f)<0.001)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;e=Math.sin((1-d)*g)/f;d=Math.sin(d*g)/f;c.w=a.w*e+b.w*d;c.x=a.x*e+b.x*d;c.y=a.y*e+b.y*d;c.z=a.z*e+b.z*d;return c};
THREE.Vertex=function(a){this.position=a||new THREE.Vector3};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.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
浏览文件 @ 17547a2e
......@@ -69,7 +69,7 @@ THREE.Quaternion.prototype={constructor:THREE.Quaternion,set:function(a,b,c,d){t
this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRotationMatrix:function(a){var b=Math.pow(a.determinant(),1/3);this.w=Math.sqrt(Math.max(0,b+a.n11+a.n22+a.n33))/2;this.x=Math.sqrt(Math.max(0,b+a.n11-a.n22-a.n33))/2;this.y=Math.sqrt(Math.max(0,b-a.n11+a.n22-a.n33))/2;this.z=Math.sqrt(Math.max(0,b-a.n11-a.n22+a.n33))/2;this.x=a.n32-a.n23<0?-Math.abs(this.x):Math.abs(this.x);this.y=a.n13-a.n31<0?-Math.abs(this.y):Math.abs(this.y);this.z=a.n21-a.n12<0?-Math.abs(this.z):Math.abs(this.z);
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);a==0?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,g=a.x,f=a.y,h=a.z,a=a.w;this.x=b*a+e*g+c*h-d*f;this.y=c*a+e*f+d*g-b*h;this.z=d*a+e*h+b*f-c*g;this.w=e*a-b*g-c*f-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,g=this.x,f=this.y,h=this.z,j=this.w,i=j*c+f*e-h*d,k=j*d+h*c-g*e,l=j*e+g*d-f*c,c=-g*
c-f*d-h*e;b.x=i*j+c*-g+k*-h-l*-f;b.y=k*j+c*-f+l*-g-i*-h;b.z=l*j+c*-h+i*-f-k*-g;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;if(Math.abs(e)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var g=Math.acos(e),f=Math.sqrt(1-e*e);if(Math.abs(f)<0.0010)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;e=Math.sin((1-d)*g)/f;d=Math.sin(d*g)/f;c.w=a.w*e+b.w*d;c.x=a.x*e+b.x*d;c.y=a.y*e+b.y*d;c.z=a.z*e+b.z*d;return c};
c-f*d-h*e;b.x=i*j+c*-g+k*-h-l*-f;b.y=k*j+c*-f+l*-g-i*-h;b.z=l*j+c*-h+i*-f-k*-g;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;if(Math.abs(e)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var g=Math.acos(e),f=Math.sqrt(1-e*e);if(Math.abs(f)<0.001)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;e=Math.sin((1-d)*g)/f;d=Math.sin(d*g)/f;c.w=a.w*e+b.w*d;c.x=a.x*e+b.x*d;c.y=a.y*e+b.y*d;c.z=a.z*e+b.z*d;return c};
THREE.Vertex=function(a){this.position=a||new THREE.Vector3};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.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)}};THREE.Camera=function(a,b,c,d,e){THREE.Object3D.call(this);this.fov=a||50;this.aspect=b||1;this.near=c!==void 0?c:0.1;this.far=d!==void 0?d:2E3;this.target=e||new THREE.Object3D;this.useTarget=!0;this.matrixWorldInverse=new THREE.Matrix4;this.projectionMatrix=null;this.updateProjectionMatrix()};
......
build/custom/ThreeExtras.js
浏览文件 @ 17547a2e
此差异已折叠。
build/custom/ThreeSVG.js
浏览文件 @ 17547a2e
......@@ -69,7 +69,7 @@ THREE.Quaternion.prototype={constructor:THREE.Quaternion,set:function(a,b,c,d){t
this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRotationMatrix:function(a){var b=Math.pow(a.determinant(),1/3);this.w=Math.sqrt(Math.max(0,b+a.n11+a.n22+a.n33))/2;this.x=Math.sqrt(Math.max(0,b+a.n11-a.n22-a.n33))/2;this.y=Math.sqrt(Math.max(0,b-a.n11+a.n22-a.n33))/2;this.z=Math.sqrt(Math.max(0,b-a.n11-a.n22+a.n33))/2;this.x=a.n32-a.n23<0?-Math.abs(this.x):Math.abs(this.x);this.y=a.n13-a.n31<0?-Math.abs(this.y):Math.abs(this.y);this.z=a.n21-a.n12<0?-Math.abs(this.z):Math.abs(this.z);
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);a==0?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,g=a.x,f=a.y,h=a.z,a=a.w;this.x=b*a+e*g+c*h-d*f;this.y=c*a+e*f+d*g-b*h;this.z=d*a+e*h+b*f-c*g;this.w=e*a-b*g-c*f-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,g=this.x,f=this.y,h=this.z,k=this.w,i=k*c+f*e-h*d,l=k*d+h*c-g*e,j=k*e+g*d-f*c,c=-g*
c-f*d-h*e;b.x=i*k+c*-g+l*-h-j*-f;b.y=l*k+c*-f+j*-g-i*-h;b.z=j*k+c*-h+i*-f-l*-g;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;if(Math.abs(e)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var g=Math.acos(e),f=Math.sqrt(1-e*e);if(Math.abs(f)<0.0010)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;e=Math.sin((1-d)*g)/f;d=Math.sin(d*g)/f;c.w=a.w*e+b.w*d;c.x=a.x*e+b.x*d;c.y=a.y*e+b.y*d;c.z=a.z*e+b.z*d;return c};
c-f*d-h*e;b.x=i*k+c*-g+l*-h-j*-f;b.y=l*k+c*-f+j*-g-i*-h;b.z=j*k+c*-h+i*-f-l*-g;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;if(Math.abs(e)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var g=Math.acos(e),f=Math.sqrt(1-e*e);if(Math.abs(f)<0.001)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;e=Math.sin((1-d)*g)/f;d=Math.sin(d*g)/f;c.w=a.w*e+b.w*d;c.x=a.x*e+b.x*d;c.y=a.y*e+b.y*d;c.z=a.z*e+b.z*d;return c};
THREE.Vertex=function(a){this.position=a||new THREE.Vector3};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.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
浏览文件 @ 17547a2e
......@@ -69,7 +69,7 @@ THREE.Quaternion.prototype={constructor:THREE.Quaternion,set:function(b,c,d,f){t
this.x=b.x*f;this.y=b.y*f;this.z=b.z*f;this.w=Math.cos(d);return this},setFromRotationMatrix:function(b){var c=Math.pow(b.determinant(),1/3);this.w=Math.sqrt(Math.max(0,c+b.n11+b.n22+b.n33))/2;this.x=Math.sqrt(Math.max(0,c+b.n11-b.n22-b.n33))/2;this.y=Math.sqrt(Math.max(0,c-b.n11+b.n22-b.n33))/2;this.z=Math.sqrt(Math.max(0,c-b.n11-b.n22+b.n33))/2;this.x=b.n32-b.n23<0?-Math.abs(this.x):Math.abs(this.x);this.y=b.n13-b.n31<0?-Math.abs(this.y):Math.abs(this.y);this.z=b.n21-b.n12<0?-Math.abs(this.z):Math.abs(this.z);
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 b=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);b==0?this.w=this.z=this.y=this.x=0:(b=1/b,this.x*=b,this.y*=b,this.z*=b,this.w*=b);return this},multiplySelf:function(b){var c=
this.x,d=this.y,f=this.z,i=this.w,h=b.x,j=b.y,k=b.z,b=b.w;this.x=c*b+i*h+d*k-f*j;this.y=d*b+i*j+f*h-c*k;this.z=f*b+i*k+c*j-d*h;this.w=i*b-c*h-d*j-f*k;return this},multiply:function(b,c){this.x=b.x*c.w+b.y*c.z-b.z*c.y+b.w*c.x;this.y=-b.x*c.z+b.y*c.w+b.z*c.x+b.w*c.y;this.z=b.x*c.y-b.y*c.x+b.z*c.w+b.w*c.z;this.w=-b.x*c.x-b.y*c.y-b.z*c.z+b.w*c.w;return this},multiplyVector3:function(b,c){c||(c=b);var d=b.x,f=b.y,i=b.z,h=this.x,j=this.y,k=this.z,p=this.w,n=p*d+j*i-k*f,t=p*f+k*d-h*i,q=p*i+h*f-j*d,d=-h*
d-j*f-k*i;c.x=n*p+d*-h+t*-k-q*-j;c.y=t*p+d*-j+q*-h-n*-k;c.z=q*p+d*-k+n*-j-t*-h;return c}};THREE.Quaternion.slerp=function(b,c,d,f){var i=b.w*c.w+b.x*c.x+b.y*c.y+b.z*c.z;if(Math.abs(i)>=1)return d.w=b.w,d.x=b.x,d.y=b.y,d.z=b.z,d;var h=Math.acos(i),j=Math.sqrt(1-i*i);if(Math.abs(j)<0.0010)return d.w=0.5*(b.w+c.w),d.x=0.5*(b.x+c.x),d.y=0.5*(b.y+c.y),d.z=0.5*(b.z+c.z),d;i=Math.sin((1-f)*h)/j;f=Math.sin(f*h)/j;d.w=b.w*i+c.w*f;d.x=b.x*i+c.x*f;d.y=b.y*i+c.y*f;d.z=b.z*i+c.z*f;return d};
d-j*f-k*i;c.x=n*p+d*-h+t*-k-q*-j;c.y=t*p+d*-j+q*-h-n*-k;c.z=q*p+d*-k+n*-j-t*-h;return c}};THREE.Quaternion.slerp=function(b,c,d,f){var i=b.w*c.w+b.x*c.x+b.y*c.y+b.z*c.z;if(Math.abs(i)>=1)return d.w=b.w,d.x=b.x,d.y=b.y,d.z=b.z,d;var h=Math.acos(i),j=Math.sqrt(1-i*i);if(Math.abs(j)<0.001)return d.w=0.5*(b.w+c.w),d.x=0.5*(b.x+c.x),d.y=0.5*(b.y+c.y),d.z=0.5*(b.z+c.z),d;i=Math.sin((1-f)*h)/j;f=Math.sin(f*h)/j;d.w=b.w*i+c.w*f;d.x=b.x*i+c.x*f;d.y=b.y*i+c.y*f;d.z=b.z*i+c.z*f;return d};
THREE.Vertex=function(b){this.position=b||new THREE.Vector3};THREE.Face3=function(b,c,d,f,i,h){this.a=b;this.b=c;this.c=d;this.normal=f instanceof THREE.Vector3?f:new THREE.Vector3;this.vertexNormals=f instanceof Array?f:[];this.color=i instanceof THREE.Color?i:new THREE.Color;this.vertexColors=i instanceof Array?i:[];this.vertexTangents=[];this.materials=h instanceof Array?h:[h];this.centroid=new THREE.Vector3};
THREE.Face4=function(b,c,d,f,i,h,j){this.a=b;this.b=c;this.c=d;this.d=f;this.normal=i instanceof THREE.Vector3?i:new THREE.Vector3;this.vertexNormals=i instanceof Array?i:[];this.color=h instanceof THREE.Color?h:new THREE.Color;this.vertexColors=h instanceof Array?h:[];this.vertexTangents=[];this.materials=j instanceof Array?j:[j];this.centroid=new THREE.Vector3};THREE.UV=function(b,c){this.u=b||0;this.v=c||0};
THREE.UV.prototype={constructor:THREE.UV,set:function(b,c){this.u=b;this.v=c;return this},copy:function(b){this.u=b.u;this.v=b.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};
......
examples/webgl_collisions_mesh.html
浏览文件 @ 17547a2e
<html>
<head>
<title>three.js webgl - intersection: ray with mesh (through box)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie { background-color: #ddd !important }
#info {
position: absolute;
top: 30px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
#options {
position: absolute;
top: 10px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, loader, stats;
var meshes = [];
var theta = 0;
var camdist = 1500;
var totalFaces = 0, totalColliders = 0;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
info = document.getElementById("info");
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = camdist;
loader = new THREE.JSONLoader( );
scene = new THREE.Scene();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
sun = new THREE.DirectionalLight( 0xffffff );
sun.position = camera.position.clone();
scene.add( sun );
loadCube();
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
}
function loadCube(p) {
var onGeometry = function( geometry ) {
var sx = 300;
var sy = 240;
var sz = 300;
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - intersection: ray with mesh (through box)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie { background-color: #ddd !important }
#info {
position: absolute;
top: 30px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
#options {
position: absolute;
top: 10px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, loader, stats;
var meshes = [];
var theta = 0;
var camdist = 1500;
var totalFaces = 0, totalColliders = 0;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
info = document.getElementById("info");
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = camdist;
loader = new THREE.JSONLoader( );
scene = new THREE.Scene();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
sun = new THREE.DirectionalLight( 0xffffff );
sun.position = camera.position.clone();
scene.add( sun );
loadCube();
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
}
function loadCube(p) {
var onGeometry = function( geometry ) {
var sx = 300;
var sy = 240;
var sz = 300;
addCube( new THREE.Vector3(-sx, 0, 0), geometry );
addCube( new THREE.Vector3( 0, 0, 0), geometry );
addCube( new THREE.Vector3( sx, 0, 0), geometry );
addCube( new THREE.Vector3(-sx, 0, 0), geometry );
addCube( new THREE.Vector3( 0, 0, 0), geometry );
addCube( new THREE.Vector3( sx, 0, 0), geometry );
addCube( new THREE.Vector3(-sx, sy, 0), geometry );
addCube( new THREE.Vector3( 0, sy, 0), geometry );
addCube( new THREE.Vector3( sx, sy, 0), geometry );
addCube( new THREE.Vector3(-sx, sy, 0), geometry );
addCube( new THREE.Vector3( 0, sy, 0), geometry );
addCube( new THREE.Vector3( sx, sy, 0), geometry );
addCube( new THREE.Vector3(-sx,-sy, 0), geometry );
addCube( new THREE.Vector3( 0, -sy, 0), geometry );
addCube( new THREE.Vector3( sx,-sy, 0), geometry );
addCube( new THREE.Vector3(-sx,-sy, 0), geometry );
addCube( new THREE.Vector3( 0, -sy, 0), geometry );
addCube( new THREE.Vector3( sx,-sy, 0), geometry );
addCube( new THREE.Vector3(-sx, 0, sz), geometry );
addCube( new THREE.Vector3( 0, 0, sz), geometry );
addCube( new THREE.Vector3( sx, 0, sz), geometry );
addCube( new THREE.Vector3(-sx, 0, sz), geometry );
addCube( new THREE.Vector3( 0, 0, sz), geometry );
addCube( new THREE.Vector3( sx, 0, sz), geometry );
addCube( new THREE.Vector3(-sx, sy, sz), geometry );
addCube( new THREE.Vector3( 0, sy, sz), geometry );
addCube( new THREE.Vector3( sx, sy, sz), geometry );
addCube( new THREE.Vector3(-sx, sy, sz), geometry );
addCube( new THREE.Vector3( 0, sy, sz), geometry );
addCube( new THREE.Vector3( sx, sy, sz), geometry );
addCube( new THREE.Vector3(-sx,-sy, sz), geometry );
addCube( new THREE.Vector3( 0, -sy, sz), geometry );
addCube( new THREE.Vector3( sx,-sy, sz), geometry );
addCube( new THREE.Vector3(-sx,-sy, sz), geometry );
addCube( new THREE.Vector3( 0, -sy, sz), geometry );
addCube( new THREE.Vector3( sx,-sy, sz), geometry );
addCube( new THREE.Vector3(-sx, 0, -sz), geometry );
addCube( new THREE.Vector3( 0, 0, -sz), geometry );
addCube( new THREE.Vector3( sx, 0, -sz), geometry );
addCube( new THREE.Vector3(-sx, 0, -sz), geometry );
addCube( new THREE.Vector3( 0, 0, -sz), geometry );
addCube( new THREE.Vector3( sx, 0, -sz), geometry );
addCube( new THREE.Vector3(-sx, sy, -sz), geometry );
addCube( new THREE.Vector3( 0, sy, -sz), geometry );
addCube( new THREE.Vector3( sx, sy, -sz), geometry );
addCube( new THREE.Vector3(-sx, sy, -sz), geometry );
addCube( new THREE.Vector3( 0, sy, -sz), geometry );
addCube( new THREE.Vector3( sx, sy, -sz), geometry );
addCube( new THREE.Vector3(-sx,-sy, -sz), geometry );
addCube( new THREE.Vector3( 0, -sy, -sz), geometry );
addCube( new THREE.Vector3( sx,-sy, -sz), geometry );
addCube( new THREE.Vector3(-sx,-sy, -sz), geometry );
addCube( new THREE.Vector3( 0, -sy, -sz), geometry );
addCube( new THREE.Vector3( sx,-sy, -sz), geometry );
addCube( new THREE.Vector3(-sx, 0, -sz*2), geometry );
addCube( new THREE.Vector3( 0, 0, -sz*2), geometry );
addCube( new THREE.Vector3( sx, 0, -sz*2), geometry );
addCube( new THREE.Vector3(-sx, 0, -sz*2), geometry );
addCube( new THREE.Vector3( 0, 0, -sz*2), geometry );
addCube( new THREE.Vector3( sx, 0, -sz*2), geometry );
addCube( new THREE.Vector3(-sx, sy, -sz*2), geometry );
addCube( new THREE.Vector3( 0, sy, -sz*2), geometry );
addCube( new THREE.Vector3( sx, sy, -sz*2), geometry );
addCube( new THREE.Vector3(-sx, sy, -sz*2), geometry );
addCube( new THREE.Vector3( 0, sy, -sz*2), geometry );
addCube( new THREE.Vector3( sx, sy, -sz*2), geometry );
addCube( new THREE.Vector3(-sx,-sy, -sz*2), geometry );
addCube( new THREE.Vector3( 0, -sy, -sz*2), geometry );
addCube( new THREE.Vector3( sx,-sy, -sz*2), geometry );
addCube( new THREE.Vector3(-sx,-sy, -sz*2), geometry );
addCube( new THREE.Vector3( 0, -sy, -sz*2), geometry );
addCube( new THREE.Vector3( sx,-sy, -sz*2), geometry );
// info.innerHTML = "Total colliders: " + totalColliders + " (Faces: " + totalFaces + ")<br>";
// info.innerHTML = "Total colliders: " + totalColliders + " (Faces: " + totalFaces + ")<br>";
};
};
loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );
}
loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );
}
function addCube( p, g) {
function addCube( p, g) {
totalFaces += g.faces.length;
totalColliders++;
totalFaces += g.faces.length;
totalColliders++;
var mesh = new THREE.Mesh( g, new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
mesh.position = p;
var mesh = new THREE.Mesh( g, new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
mesh.position = p;
//mesh.rotation.x = Math.random() * Math.PI;
//mesh.rotation.y = Math.random() * Math.PI;
//mesh.rotation.z = Math.random() * Math.PI;
//mesh.rotation.x = Math.random() * Math.PI;
//mesh.rotation.y = Math.random() * Math.PI;
//mesh.rotation.z = Math.random() * Math.PI;
//mesh.scale.x = Math.random() + 0.5;
//mesh.scale.y = Math.random() + 0.5;
//mesh.scale.z = Math.random() + 0.5;
//mesh.scale.x = Math.random() + 0.5;
//mesh.scale.y = Math.random() + 0.5;
//mesh.scale.z = Math.random() + 0.5;
scene.add( mesh );
var mc = THREE.CollisionUtils.MeshColliderWBox(mesh);
THREE.Collisions.colliders.push( mc );
meshes.push( mesh );
scene.add( mesh );
var mc = THREE.CollisionUtils.MeshColliderWBox(mesh);
THREE.Collisions.colliders.push( mc );
meshes.push( mesh );
};
};
function onDocumentMouseMove( event ) {
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
};
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
if( meshes.length == 0 ) return;
if( meshes.length == 0 ) return;
var i, l = meshes.length;
var i, l = meshes.length;
for ( i = 0; i < l; i++ ) {
for ( i = 0; i < l; i++ ) {
meshes[ i ].materials[ 0 ].color.setHex( 0x003300 );
meshes[ i ].materials[ 0 ].color.setHex( 0x003300 );
}
}
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var c = THREE.Collisions.rayCastNearest( ray );
var c = THREE.Collisions.rayCastNearest( ray );
if( c ) {
if( c ) {
//info.innerHTML += "Found @ distance " + c.distance;
c.mesh.materials[ 0 ].color.setHex( 0xbb0000 );
//info.innerHTML += "Found @ distance " + c.distance;
c.mesh.materials[ 0 ].color.setHex( 0xbb0000 );
} else {
} else {
//info.innerHTML += "No intersection";
//info.innerHTML += "No intersection";
}
}
camera.position.x = camdist * Math.cos( theta );
camera.position.z = camdist * Math.sin( theta );
camera.position.y = camdist/2 * Math.sin( theta * 2) ;
camera.position.x = camdist * Math.cos( theta );
camera.position.z = camdist * Math.sin( theta );
camera.position.y = camdist/2 * Math.sin( theta * 2) ;
sun.position.copy( camera.position );
sun.position.normalize();
sun.position.copy( camera.position );
sun.position.normalize();
theta += 0.005;
theta += 0.005;
renderer.render( scene, camera );
renderer.render( scene, camera );
stats.update();
stats.update();
};
};
function vts(v) {
function vts(v) {
if(!v) return "undefined<br>";
else return v.x + " , " + v.y + " , " + v.z + "<br>";
if(!v) return "undefined<br>";
else return v.x + " , " + v.y + " , " + v.z + "<br>";
};
};
</script>
</script>
</head>
</head>
<body onload="init();">
<div id="info"></div>
<div id="options"></div>
</body>
<body onload="init();">
<div id="info"></div>
<div id="options"></div>
</body>
</html>
examples/webgl_collisions_normal.html
浏览文件 @ 17547a2e
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - intersection: ray/mesh readinf normal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie { background-color: #ddd !important }
<html>
<head>
<title>three.js webgl - intersection: ray/mesh readinf normal</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#info {
position: absolute;
top: 30px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie { background-color: #ddd !important }
#options {
position: absolute;
top: 10px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
#info {
position: absolute;
top: 30px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
<script type="text/javascript">
#options {
position: absolute;
top: 10px; left: 10px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index:100;
}
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, loader, stats, line;
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
var meshes = [];
<script type="text/javascript">
var theta = 0;
var camdist = 500;
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, loader, stats, line;
var totalFaces = 0, totalColliders = 0;
var meshes = [];
function init() {
var theta = 0;
var camdist = 500;
var totalFaces = 0, totalColliders = 0;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
container = document.createElement( 'div' );
document.body.appendChild( container );
info = document.getElementById("info");
info = document.getElementById("info");
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = camdist;
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = camdist;
loader = new THREE.JSONLoader( );
loader = new THREE.JSONLoader( );
scene = new THREE.Scene();
scene = new THREE.Scene();
projector = new THREE.Projector();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
sun = new THREE.DirectionalLight( 0xffffff );
sun.position = camera.position.clone();
scene.add( sun );
sun = new THREE.DirectionalLight( 0xffffff );
sun.position = camera.position.clone();
scene.add( sun );
loadCube();
loadCube();
var lineMat = new THREE.LineBasicMaterial( { color: 0xff0000, opacity: 1, linewidth: 3 } );
var lineMat = new THREE.LineBasicMaterial( { color: 0xff0000, opacity: 1, linewidth: 3 } );
var geom = new THREE.Geometry();
geom.vertices.push( new THREE.Vertex( new THREE.Vector3(-100, 0, 0) ) );
geom.vertices.push( new THREE.Vertex( new THREE.Vector3( 100, 0, 0) ) );
var geom = new THREE.Geometry();
geom.vertices.push( new THREE.Vertex( new THREE.Vector3(-100, 0, 0) ) );
geom.vertices.push( new THREE.Vertex( new THREE.Vector3( 100, 0, 0) ) );
line = new THREE.Line(geom, lineMat);
scene.add( line );
line = new THREE.Line(geom, lineMat);
scene.add( line );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
container.onmousemove = onDocumentMouseMove;
animate();
}
}
function loadCube(p) {
function loadCube(p) {
var onGeometry = function( geometry ) {
var onGeometry = function( geometry ) {
var sx = 300;
var sy = 240;
var sz = 300;
var sx = 300;
var sy = 240;
var sz = 300;
addCube( new THREE.Vector3( 0, 0, 0), geometry );
addCube( new THREE.Vector3( 0, 0, 0), geometry );
};
};
loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );
}
loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );
}
function addCube( p, g) {
function addCube( p, g) {
totalFaces += g.faces.length;
totalColliders++;
totalFaces += g.faces.length;
totalColliders++;
var mesh = new THREE.Mesh( g, new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
mesh.position = p;
var mesh = new THREE.Mesh( g, new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
mesh.position = p;
scene.add( mesh );
var mc = THREE.CollisionUtils.MeshColliderWBox(mesh);
THREE.Collisions.colliders.push( mc );
meshes.push( mesh );
scene.add( mesh );
var mc = THREE.CollisionUtils.MeshColliderWBox(mesh);
THREE.Collisions.colliders.push( mc );
meshes.push( mesh );
};
};
function onDocumentMouseMove( event ) {
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
};
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
if ( meshes.length == 0 ) return;
if ( meshes.length == 0 ) return;
var i, l = meshes.length;
var i, l = meshes.length;
for ( i = 0; i < l; i++ ) {
meshes[ i ].materials[ 0 ].color.setHex( 0x003300 );
}
for ( i = 0; i < l; i++ ) {
meshes[ i ].materials[ 0 ].color.setHex( 0x003300 );
}
info.innerHTML = "";
info.innerHTML = "";
var c = THREE.Collisions.rayCastNearest( ray );
var c = THREE.Collisions.rayCastNearest( ray );
if( c ) {
if( c ) {
info.innerHTML += "Found @ normal " + vts(c.normal);
info.innerHTML += "Found @ normal " + vts(c.normal);
var poi = ray.origin.clone().addSelf( ray.direction.clone().multiplyScalar(c.distance) );
line.geometry.vertices[0].position = poi;
line.geometry.vertices[1].position = poi.clone().addSelf(c.normal.multiplyScalar(100));
line.geometry.__dirtyVertices = true;
line.geometry.__dirtyElements = true;
var poi = ray.origin.clone().addSelf( ray.direction.clone().multiplyScalar(c.distance) );
line.geometry.vertices[0].position = poi;
line.geometry.vertices[1].position = poi.clone().addSelf(c.normal.multiplyScalar(100));
line.geometry.__dirtyVertices = true;
line.geometry.__dirtyElements = true;
c.mesh.materials[ 0 ].color.setHex( 0xbb0000 );
c.mesh.materials[ 0 ].color.setHex( 0xbb0000 );
} else {
} else {
info.innerHTML += "No intersection";
info.innerHTML += "No intersection";
}
}
camera.position.x = camdist * Math.cos( theta );
camera.position.z = camdist * Math.sin( theta );
camera.position.y = camdist/2 * Math.sin( theta * 2) ;
camera.position.x = camdist * Math.cos( theta );
camera.position.z = camdist * Math.sin( theta );
camera.position.y = camdist/2 * Math.sin( theta * 2) ;
sun.position.copy( camera.position );
sun.position.normalize();
sun.position.copy( camera.position );
sun.position.normalize();
theta += 0.005;
theta += 0.005;
renderer.render( scene, camera );
renderer.render( scene, camera );
stats.update();
stats.update();
};
};
function vts(v) {
function vts(v) {
if(!v) return "undefined<br>";
else return v.x.toFixed(2) + " , " + v.y.toFixed(2) + " , " + v.z.toFixed(2) + "<br>";
if(!v) return "undefined<br>";
else return v.x.toFixed(2) + " , " + v.y.toFixed(2) + " , " + v.z.toFixed(2) + "<br>";
};
};
</script>
</script>
</head>
</head>
<body onload="init();">
<div id="info"></div>
<div id="options"></div>
</body>
<body onload="init();">
<div id="info"></div>
<div id="options"></div>
</body>
</html>
examples/webgl_collisions_primitives.html
浏览文件 @ 17547a2e
<html>
<head>
<title>three.js webgl - intersection: ray with sphere/AABB/plane</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie {
background-color: #ddd !important
}
#info {
position: absolute;
top: 30px;
left: 150px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
#options {
position: absolute;
top: 10px;
left: 150px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - intersection: ray with sphere/AABB/plane</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie {
background-color: #ddd !important
}
#info {
position: absolute;
top: 30px;
left: 150px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
#options {
position: absolute;
top: 10px;
left: 150px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun;
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun;
var theta = 0;
var camdist = 1500;
var geoms = [];
var theta = 0;
var camdist = 1500;
var geoms = [];
function init () {
function init () {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement('div');
document.body.appendChild(container);
info = document.getElementById("info");
info = document.getElementById("info");
camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 10000);
scene = new THREE.Scene();
scene = new THREE.Scene();
projector = new THREE.Projector();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
var ambientLight = new THREE.AmbientLight(0x606060);
scene.add(ambientLight);
var ambientLight = new THREE.AmbientLight(0x606060);
scene.add(ambientLight);
sun = new THREE.DirectionalLight(0xffffff);
scene.add(sun);
sun = new THREE.DirectionalLight(0xffffff);
scene.add(sun);
//makeWall(480);
//makeWall(360);
makeWall(240);
makeWall(120);
makeWall(0);
makeWall(-120);
makeWall(-240);
//makeWall(-360);
//makeWall(-480);
//makeWall(480);
//makeWall(360);
makeWall(240);
makeWall(120);
makeWall(0);
makeWall(-120);
makeWall(-240);
//makeWall(-360);
//makeWall(-480);
plane = new THREE.Mesh( new THREE.PlaneGeometry( 30000, 30000, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
plane.position.y = - 480;
plane.rotation.x = Math.PI / - 2;
scene.add( plane );
geoms.push( plane );
plane = new THREE.Mesh( new THREE.PlaneGeometry( 30000, 30000, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
plane.position.y = - 480;
plane.rotation.x = Math.PI / - 2;
scene.add( plane );
geoms.push( plane );
var cplane = new THREE.PlaneCollider( plane.position, new THREE.Vector3( 0, 1, 0 ) );
cplane.mesh = plane;
THREE.Collisions.colliders.push( cplane );
var cplane = new THREE.PlaneCollider( plane.position, new THREE.Vector3( 0, 1, 0 ) );
cplane.mesh = plane;
THREE.Collisions.colliders.push( cplane );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
container.onmousemove = onDocumentMouseMove;
animate();
}
}
function makeWall(z){
var mx = 120 * 2;
for (var i = -mx; i <= mx; i += 120) {
for (var j = -mx; j <= mx; j += 120) {
if (Math.random() > 0.5)
createCube(100, new THREE.Vector3(j, i, z));
else
createSphere(50, new THREE.Vector3(j, i, z));
}
}
}
function makeWall(z){
var mx = 120 * 2;
for (var i = -mx; i <= mx; i += 120) {
for (var j = -mx; j <= mx; j += 120) {
if (Math.random() > 0.5)
createCube(100, new THREE.Vector3(j, i, z));
else
createSphere(50, new THREE.Vector3(j, i, z));
}
}
}
function createCube(s, p){
var cube = new THREE.Mesh(new THREE.CubeGeometry( s, s, s ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
cube.position = p;
scene.add(cube);
geoms.push(cube);
THREE.Collisions.colliders.push(THREE.CollisionUtils.MeshAABB(cube, p));
}
function createCube(s, p){
var cube = new THREE.Mesh(new THREE.CubeGeometry( s, s, s ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
cube.position = p;
scene.add(cube);
geoms.push(cube);
THREE.Collisions.colliders.push(THREE.CollisionUtils.MeshAABB(cube, p));
}
function createSphere(rad, p){
var sphere = new THREE.Mesh( new THREE.SphereGeometry( rad, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
sphere.position = p;
scene.add(sphere);
geoms.push(sphere);
function createSphere(rad, p){
var sphere = new THREE.Mesh( new THREE.SphereGeometry( rad, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
sphere.position = p;
scene.add(sphere);
geoms.push(sphere);
var sc = new THREE.SphereCollider(p, rad);
sc.mesh = sphere;
THREE.Collisions.colliders.push(sc);
}
var sc = new THREE.SphereCollider(p, rad);
sc.mesh = sphere;
THREE.Collisions.colliders.push(sc);
}
function onDocumentMouseMove(event){
function onDocumentMouseMove(event){
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
function animate(){
}
requestAnimationFrame( animate );
function animate(){
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
requestAnimationFrame( animate );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
for ( var i = 0; i < geoms.length; i++) {
geoms[i].materials[0].color = new THREE.Color(0x007700);
}
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
if ( !document.getElementById( "nearest" ).checked ) {
for ( var i = 0; i < geoms.length; i++) {
geoms[i].materials[0].color = new THREE.Color(0x007700);
}
// Raycast all
if ( !document.getElementById( "nearest" ).checked ) {
ts = new Date().getTime();
var cs = THREE.Collisions.rayCastAll( ray );
tt = new Date().getTime() - ts;
// Raycast all
if ( cs.length > 0 ) {
ts = new Date().getTime();
var cs = THREE.Collisions.rayCastAll( ray );
tt = new Date().getTime() - ts;
info.innerHTML = cs.length + " colliders found in " + tt;
if ( cs.length > 0 ) {
for ( var i = 0; i < cs.length; i ++ ) {
info.innerHTML = cs.length + " colliders found in " + tt;
cs[ i ].mesh.materials[ 0 ].color.setHex( 0xaa0000 );
for ( var i = 0; i < cs.length; i ++ ) {
}
cs[ i ].mesh.materials[ 0 ].color.setHex( 0xaa0000 );
} else {
}
info.innerHTML = "No intersection";
} else {
}
info.innerHTML = "No intersection";
} else {
}
// Raycast nearest
} else {
ts = new Date().getTime();
var c = THREE.Collisions.rayCastNearest( ray );
tt = new Date().getTime() - ts;
// Raycast nearest
if ( c ) {
ts = new Date().getTime();
var c = THREE.Collisions.rayCastNearest( ray );
tt = new Date().getTime() - ts;
info.innerHTML = "Found in " + tt + " @ distance " + c.distance;
c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
if ( c ) {
} else {
info.innerHTML = "Found in " + tt + " @ distance " + c.distance;
c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
info.innerHTML = "No intersection";
} else {
}
info.innerHTML = "No intersection";
}
}
camera.position.x = camdist * Math.cos(theta);
camera.position.z = camdist * Math.sin(theta);
camera.position.y = camdist / 2 * Math.sin(theta * 2);
sun.position = camera.position.clone();
sun.position.normalize();
theta += 0.005;
}
renderer.render( scene, camera );
camera.position.x = camdist * Math.cos(theta);
camera.position.z = camdist * Math.sin(theta);
camera.position.y = camdist / 2 * Math.sin(theta * 2);
sun.position = camera.position.clone();
sun.position.normalize();
theta += 0.005;
stats.update();
renderer.render( scene, camera );
}
stats.update();
function vts(v){
if (!v)
return "undefined<br>";
else
return v.x + " , " + v.y + " , " + v.z + "<br>";
}
}
function vts(v){
if (!v)
return "undefined<br>";
else
return v.x + " , " + v.y + " , " + v.z + "<br>";
}
</script>
</head>
<body onload="init();">
<div id="info">
</div>
<div id="options">
<input type="checkbox" id="nearest" checked/> Nearest collider only
<br/>
</div>
</body>
</script>
</head>
<body onload="init();">
<div id="info">
</div>
<div id="options">
<input type="checkbox" id="nearest" checked/> Nearest collider only
<br/>
</div>
</body>
</html>
examples/webgl_collisions_reaction.html
浏览文件 @ 17547a2e
<html>
<head>
<title>three.js webgl - collision reaction</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie {
background-color: #ddd !important
}
#info {
position: absolute;
top: 30px;
left: 10px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
#options {
position: absolute;
top: 10px;
left: 10px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
</style>
<script type="text/javascript" src="../build/Three.js">
</script>
<script type="text/javascript" src="js/RequestAnimationFrame.js">
</script>
<script type="text/javascript">
var camera, scene, renderer, info, mouse2d, sun, loader, sphere, debugNormal;
var range = 400;
var speed = 1;
var sphereSize = 4;
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - collision reaction</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#oldie {
background-color: #ddd !important
}
#info {
position: absolute;
top: 30px;
left: 10px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
#options {
position: absolute;
top: 10px;
left: 10px;
width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: left;
z-index: 100;
}
</style>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
var camera, scene, renderer, info, mouse2d, sun, loader, sphere, debugNormal;
var range = 400;
var speed = 1;
var sphereSize = 4;
var cubes = [];
function init(){
function init(){
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement('div');
document.body.appendChild(container);
info = document.getElementById("info");
info = document.getElementById("info");
camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y = 120;
camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y = 120;
camera.position.x = 300;
camera.position.z = 0;
mouse2d = new THREE.Vector3(0, 0, 1);
mouse2d = new THREE.Vector3(0, 0, 1);
loader = new THREE.Loader(true);
loader = new THREE.Loader(true);
scene = new THREE.Scene();
scene = new THREE.Scene();
sphere = new THREE.Mesh( new THREE.SphereGeometry( sphereSize, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
scene.add( sphere );
sphere = new THREE.Mesh( new THREE.SphereGeometry( sphereSize, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
scene.add( sphere );
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
var ambientLight = new THREE.AmbientLight(0xdddddd);
scene.add(ambientLight);
var ambientLight = new THREE.AmbientLight(0xdddddd);
scene.add(ambientLight);
sun = new THREE.DirectionalLight(0xffffff);
sun.position = new THREE.Vector3(1, -1, 1).normalize();
scene.add(sun);
sun = new THREE.DirectionalLight(0xffffff);
sun.position = new THREE.Vector3(1, -1, 1).normalize();
scene.add(sun);
createObstacles();
createObstacles();
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) );
......@@ -95,36 +93,43 @@
debugNormal = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xff0000 } ) );
scene.add( debugNormal );
container.onmousemove = onDocumentMouseMove;
animate();
}
container.onmousemove = onDocumentMouseMove;
animate();
function createObstacles(){
createCube(100, 50, 10, new THREE.Vector3( 20, 0, 100), Math.PI / 4);
}
function createObstacles(){
createCube(100, 50, 10, new THREE.Vector3( 20, 0, 100), Math.PI / 4);
camera.target = createCube(100, 50, 10, new THREE.Vector3(-20, 0, 200), -Math.PI / 4);
createCube(100, 50, 10, new THREE.Vector3( 20, 0, 300), Math.PI / 4);
}
function createCube(sx, sy, sz, p, ry){
var cube = new THREE.Mesh( new THREE.CubeGeometry( sx, sy, sz ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
cube.position = p;
cube.rotation.y = ry;
scene.add(cube);
THREE.Collisions.colliders.push( THREE.CollisionUtils.MeshOBB(cube) );
createCube(100, 50, 10, new THREE.Vector3( 20, 0, 300), Math.PI / 4);
}
function createCube(sx, sy, sz, p, ry){
var cube = new THREE.Mesh( new THREE.CubeGeometry( sx, sy, sz ), new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
cube.position = p;
cube.rotation.y = ry;
scene.add(cube);
THREE.Collisions.colliders.push( THREE.CollisionUtils.MeshOBB(cube) );
cubes.push(cube);
return cube;
}
function onDocumentMouseMove(event){
event.preventDefault();
mouse2d.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse2d.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse2d.z = 1;
}
}
function onDocumentMouseMove(event){
event.preventDefault();
mouse2d.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse2d.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse2d.z = 1;
}
function animate(){
requestAnimationFrame(animate);
function animate(){
requestAnimationFrame(animate);
for (var i = 0; i < cubes.length; i++) {
cubes[i].materials[0].color = new THREE.Color(0x003300);
......@@ -149,31 +154,31 @@
debugNormal.geometry.vertices[1].position = poi.clone().addSelf( c.normal.clone() );
}
if(sphere.position.z > range) sphere.position = new THREE.Vector3(0,0,0);
if (sphere.position.z > range) sphere.position = new THREE.Vector3(0,0,0);
camera.position.x = Math.cos(mouse2d.x * Math.PI) * 300;
camera.position.y = Math.cos(mouse2d.y * Math.PI) * 300;
camera.position.z = 200 + Math.sin(mouse2d.x * Math.PI) * 300 + Math.sin(mouse2d.y * Math.PI) * 300;
renderer.render(scene, camera);
}
function vts(v){
if (!v)
return "undefined<br>";
else
return v.x + " , " + v.y + " , " + v.z + "<br>";
}
</script>
</head>
<body onload="init();">
<div id="info">
</div>
<div id="options">
</div>
</body>
renderer.render(scene, camera);
}
function vts(v) {
if (!v)
return "undefined<br>";
else
return v.x + " , " + v.y + " , " + v.z + "<br>";
}
</script>
</head>
<body onload="init();">
<div id="info">
</div>
<div id="options">
</div>
</body>
</html>
src/extras/loaders/ColladaLoader.js
浏览文件 @ 17547a2e
......@@ -106,7 +106,7 @@ THREE.ColladaLoader = function () {
for ( var i = 0; i < daeScene.nodes.length; i ++ ) {
scene.addChild( createSceneGraph( daeScene.nodes[ i ] ) );
scene.add( createSceneGraph( daeScene.nodes[ i ] ) );
}
......@@ -675,7 +675,7 @@ THREE.ColladaLoader = function () {
}
obj.addChild( mesh );
obj.add( mesh );
}
......@@ -683,7 +683,7 @@ THREE.ColladaLoader = function () {
for ( i = 0; i < node.nodes.length; i ++ ) {
obj.addChild(createSceneGraph(node.nodes[i], node));
obj.add( createSceneGraph( node.nodes[i], node ) );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或