diff --git a/build/Three.js b/build/Three.js index bebd32fa..b29028b6 100644 --- a/build/Three.js +++ b/build/Three.js @@ -623,15 +623,15 @@ q=F.quaternion;s=F.scale;q=0;ca.length==0&&(ca[0]=new THREE.MeshFaceMaterial);ca if(F.castsShadow)b=new THREE.ShadowVolume(M),V.scene.add(b),b.position=object.position,b.rotation=object.rotation,b.scale=object.scale;F.trigger&&F.trigger.toLowerCase()!="none"&&(b={type:F.trigger,object:F},V.triggers[object.name]=b)}}else D=F.position,r=F.rotation,q=F.quaternion,s=F.scale,q=0,object=new THREE.Object3D,object.name=v,object.position.set(D[0],D[1],D[2]),q?(object.quaternion.set(q[0],q[1],q[2],q[3]),object.useQuaternion=!0):object.rotation.set(r[0],r[1],r[2]),object.scale.set(s[0], s[1],s[2]),object.visible=F.visible!==void 0?F.visible:!1,V.scene.add(object),V.objects[v]=object,V.empties[v]=object,F.trigger&&F.trigger.toLowerCase()!="none"&&(b={type:F.trigger,object:F},V.triggers[object.name]=b)}function p(b){return function(c){V.geometries[b]=c;n();T-=1;e.onLoadComplete();w()}}function t(b){return function(e){V.geometries[b]=e}}function w(){e.callbackProgress({totalModels:o,totalTextures:da,loadedModels:o-T,loadedTextures:da-X},V);e.onLoadProgress();T==0&&X==0&&c(V)}var u, x,v,A,z,y,E,F,D,G,L,M,K,H,B,ca,J,P,Q,T,X,o,da,V;P=b.data;B=new THREE.BinaryLoader;Q=new THREE.JSONLoader;X=T=0;V={scene:new THREE.Scene,geometries:{},materials:{},textures:{},objects:{},cameras:{},lights:{},fogs:{},triggers:{},empties:{}};b=!1;for(v in P.objects)if(F=P.objects[v],F.meshCollider){b=!0;break}if(b)V.scene.collisions=new THREE.CollisionSystem;if(P.transform){b=P.transform.position;G=P.transform.rotation;var la=P.transform.scale;b&&V.scene.position.set(b[0],b[1],b[2]);G&&V.scene.rotation.set(G[0], -G[1],G[2]);la&&V.scene.scale.set(la[0],la[1],la[2]);(b||G||la)&&V.scene.updateMatrix()}b=function(){X-=1;w();e.onLoadComplete()};for(z in P.cameras){G=P.cameras[z];if(G.type=="perspective")K=new THREE.Camera(G.fov,G.aspect,G.near,G.far),K.useTarget=!0;else if(G.type=="ortho")K=new THREE.Camera,K.useTarget=!0,K.projectionMatrix=THREE.Matrix4.makeOrtho(G.left,G.right,G.top,G.bottom,G.near,G.far);D=G.position;G=G.target;K.position.set(D[0],D[1],D[2]);K.target.position.set(G[0],G[1],G[2]);V.cameras[z]= -K}for(A in P.lights)z=P.lights[A],K=z.color!==void 0?z.color:16777215,G=z.intensity!==void 0?z.intensity:1,z.type=="directional"?(D=z.direction,J=new THREE.DirectionalLight(K,G),J.position.set(D[0],D[1],D[2]),J.position.normalize()):z.type=="point"?(D=z.position,d=z.distance,J=new THREE.PointLight(K,G,d),J.position.set(D[0],D[1],D[2])):z.type=="ambient"&&(J=new THREE.AmbientLight(K)),V.scene.add(J),V.lights[A]=J;for(y in P.fogs)A=P.fogs[y],A.type=="linear"?H=new THREE.Fog(0,A.near,A.far):A.type== -"exp2"&&(H=new THREE.FogExp2(0,A.density)),G=A.color,H.color.setRGB(G[0],G[1],G[2]),V.fogs[y]=H;if(V.cameras&&P.defaults.camera)V.currentCamera=V.cameras[P.defaults.camera];if(V.fogs&&P.defaults.fog)V.scene.fog=V.fogs[P.defaults.fog];G=P.defaults.bgcolor;V.bgColor=new THREE.Color;V.bgColor.setRGB(G[0],G[1],G[2]);V.bgColorAlpha=P.defaults.bgalpha;for(u in P.geometries)if(y=P.geometries[u],y.type=="bin_mesh"||y.type=="ascii_mesh")T+=1,e.onLoadStart();o=T;for(u in P.geometries)y=P.geometries[u],y.type== -"cube"?(M=new THREE.CubeGeometry(y.width,y.height,y.depth,y.segmentsWidth,y.segmentsHeight,y.segmentsDepth,null,y.flipped,y.sides),V.geometries[u]=M):y.type=="plane"?(M=new THREE.PlaneGeometry(y.width,y.height,y.segmentsWidth,y.segmentsHeight),V.geometries[u]=M):y.type=="sphere"?(M=new THREE.SphereGeometry(y.radius,y.segmentsWidth,y.segmentsHeight),V.geometries[u]=M):y.type=="cylinder"?(M=new THREE.CylinderGeometry(y.topRad,y.botRad,y.height,y.radSegs,y.heightSegs),V.geometries[u]=M):y.type=="torus"? -(M=new THREE.TorusGeometry(y.radius,y.tube,y.segmentsR,y.segmentsT),V.geometries[u]=M):y.type=="icosahedron"?(M=new THREE.IcosahedronGeometry(y.subdivisions),V.geometries[u]=M):y.type=="bin_mesh"?B.load({model:f(y.url,P.urlBaseType),callback:p(u)}):y.type=="ascii_mesh"?Q.load({model:f(y.url,P.urlBaseType),callback:p(u)}):y.type=="embedded_mesh"&&(y=P.embeds[y.id])&&Q.createModel(y,t(u),"");for(E in P.textures)if(u=P.textures[E],u.url instanceof Array){X+=u.url.length;for(B=0;B=57344&&(c-=2048);c++;for(var b=new Float32Array(8*c),e=1,g=0;g<8;g++){for(var h=0,f=0;f>1^-(k&1);b[8*f+g]=h}e+=c}c=a.length-e;h=new Uint16Array(c);for(g=f=0;g diff --git a/examples/webgl_objconvert_test.html b/examples/webgl_objconvert_test.html index 912b0d11..6774d5b5 100644 --- a/examples/webgl_objconvert_test.html +++ b/examples/webgl_objconvert_test.html @@ -62,10 +62,10 @@ var render_canvas = 1, render_gl = 1; var has_gl = 0; - var bcanvas = document.getElementById("rcanvas"); - var bwebgl = document.getElementById("rwebgl"); + var bcanvas = document.getElementById( "rcanvas" ); + var bwebgl = document.getElementById( "rwebgl" ); - document.addEventListener('mousemove', onDocumentMouseMove, false); + document.addEventListener( 'mousemove', onDocumentMouseMove, false ); init(); animate(); @@ -76,12 +76,11 @@ function init() { - container = document.createElement('div'); - document.body.appendChild(container); + container = document.createElement( 'div' ); + document.body.appendChild( container ); - camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 ); + camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 ); camera.position.z = 500; - camera.useTarget = true; scene = new THREE.Scene(); @@ -122,11 +121,15 @@ for ( var i = 0; i < 10; i ++ ) { mesh = new THREE.Mesh( sphere, material_spheres ); + mesh.position.x = 500 * ( Math.random() - 0.5 ); mesh.position.y = 300 * ( Math.random() - 0 ) + FLOOR; mesh.position.z = 100 * ( Math.random() - 1 ); + mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 ); + mesh.overdraw = true; + scene.add( mesh ); } @@ -138,19 +141,23 @@ scene.add( ambient ); var directionalLight = new THREE.DirectionalLight( 0xffeedd ); - directionalLight.position.set( 0, -70, 100 ); - directionalLight.position.normalize(); + directionalLight.position.set( 0, -70, 100 ).normalize(); scene.add( directionalLight ); + // RENDERER if ( render_gl ) { try { + webglRenderer = new THREE.WebGLRenderer(); webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); webglRenderer.domElement.style.position = "relative"; + container.appendChild( webglRenderer.domElement ); + has_gl = 1; + } catch (e) { } @@ -165,12 +172,16 @@ } + // STATS + stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); + // + bcanvas.addEventListener("click", toggleCanvas, false); bwebgl.addEventListener("click", toggleWebGL, false); @@ -260,6 +271,8 @@ camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; + camera.lookAt( scene.position ); + if ( render_gl && has_gl ) webglRenderer.render( scene, camera ); if ( render_canvas ) canvasRenderer.render( scene, camera ); diff --git a/examples/webgl_panorama_equirectangular.html b/examples/webgl_panorama_equirectangular.html index 4be2bf85..787f61d3 100644 --- a/examples/webgl_panorama_equirectangular.html +++ b/examples/webgl_panorama_equirectangular.html @@ -29,7 +29,7 @@ -
+
three.js webgl - equirectangular panorama demo. photo by Jón Ragnarsson.
@@ -56,8 +56,9 @@ container = document.getElementById( 'container' ); - camera = new THREE.Camera( fov, window.innerWidth / window.innerHeight, 1, 1100 ); - camera.useTarget = true; + camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 ); + + camera.target = new THREE.Vector3( 0, 0, 0 ); scene = new THREE.Scene(); @@ -148,15 +149,17 @@ phi = ( 90 - lat ) * Math.PI / 180; theta = lon * Math.PI / 180; - camera.target.position.x = 500 * Math.sin( phi ) * Math.cos( theta ); - camera.target.position.y = 500 * Math.cos( phi ); - camera.target.position.z = 500 * Math.sin( phi ) * Math.sin( theta ); + camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta ); + camera.target.y = 500 * Math.cos( phi ); + camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta ); + + camera.lookAt( camera.target ); /* // distortion - camera.position.x = - camera.target.position.x; - camera.position.y = - camera.target.position.y; - camera.position.z = - camera.target.position.z; + camera.position.x = - camera.target.x; + camera.position.y = - camera.target.y; + camera.position.z = - camera.target.z; */ renderer.render( scene, camera ); diff --git a/examples/webgl_particles_billboards.html b/examples/webgl_particles_billboards.html index a3ba0f0a..f8898a61 100644 --- a/examples/webgl_particles_billboards.html +++ b/examples/webgl_particles_billboards.html @@ -61,16 +61,15 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 55, window.innerWidth / window.innerHeight, 1, 3000 ); + camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 3000 ); camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.001 ); geometry = new THREE.Geometry(); - sprite = THREE.ImageUtils.loadTexture( "textures/sprites/circle.png" ); + sprite = THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ); for ( i = 0; i < 10000; i++ ) { @@ -88,24 +87,23 @@ particles = new THREE.ParticleSystem( geometry, material ); particles.sortParticles = true; - particles.updateMatrix(); scene.add( particles ); - var light = new THREE.DirectionalLight( 0xffffff ); - light.position.x = 0; - light.position.y = 0; - light.position.z = 1; - scene.add( light ); + // renderer = new THREE.WebGLRenderer( { clearAlpha: 1 }); renderer.setSize( window.innerWidth, window.innerHeight ); 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 ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); @@ -162,6 +160,8 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; + camera.lookAt( scene.position ); + /* for( i = 0; i < scene.objects.length; i++ ) { diff --git a/examples/webgl_particles_billboards_colors.html b/examples/webgl_particles_billboards_colors.html index 9493b7c0..b6378278 100644 --- a/examples/webgl_particles_billboards_colors.html +++ b/examples/webgl_particles_billboards_colors.html @@ -61,9 +61,8 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 3000 ); + camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 ); camera.position.z = 1400; - camera.useTarget = true; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.0009 ); @@ -77,6 +76,7 @@ x = 2000 * Math.random() - 1000; y = 2000 * Math.random() - 1000; z = 2000 * Math.random() - 1000; + vector = new THREE.Vector3( x, y, z ); geometry.vertices.push( new THREE.Vertex( vector ) ); @@ -92,24 +92,24 @@ particles = new THREE.ParticleSystem( geometry, material ); particles.sortParticles = true; - particles.updateMatrix(); + scene.add( particles ); - var light = new THREE.DirectionalLight( 0xffffff ); - light.position.x = 0; - light.position.y = 0; - light.position.z = 1; - scene.add( light ); + // renderer = new THREE.WebGLRenderer( { clearAlpha: 1 } ); renderer.setSize( window.innerWidth, window.innerHeight ); 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 ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); @@ -176,6 +176,8 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; + camera.lookAt( scene.position ); + h = ( 360 * ( 1.0 + time ) % 360 ) / 360; material.color.setHSV( h, 0.8, 1.0 ); diff --git a/examples/webgl_particles_dynamic.html b/examples/webgl_particles_dynamic.html index 64d9baba..c62771c6 100644 --- a/examples/webgl_particles_dynamic.html +++ b/examples/webgl_particles_dynamic.html @@ -82,18 +82,16 @@ container = document.getElementById( 'container' ); - camera = new THREE.Camera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 50000 ); - camera.position.z = 7000; - camera.position.y = 200; + camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 50000 ); + camera.position.set( 0, 700, 7000 ); 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.add( directionalLight ); + camera.lookAt( scene.position ); + + // aloader = new THREE.JSONLoader( ); bloader = new THREE.BinaryLoader( true ); @@ -192,6 +190,8 @@ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); + camera.lookAt( scene.position ); + composer.reset(); effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth; diff --git a/examples/webgl_particles_random.html b/examples/webgl_particles_random.html index 3c9b861b..4d23ad08 100644 --- a/examples/webgl_particles_random.html +++ b/examples/webgl_particles_random.html @@ -61,9 +61,8 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 ); + camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 ); camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.0007 ); @@ -92,9 +91,11 @@ materials[i].color.setHSV( color[0], color[1], color[2] ); particles = new THREE.ParticleSystem( geometry, materials[i] ); + particles.rotation.x = Math.random() * 6; particles.rotation.y = Math.random() * 6; particles.rotation.z = Math.random() * 6; + scene.add( particles ); } @@ -164,6 +165,8 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; + camera.lookAt( scene.position ); + for( i = 0; i < scene.objects.length; i++ ) { scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) ); diff --git a/examples/webgl_particles_shapes.html b/examples/webgl_particles_shapes.html index 2cc21055..2d14ab7c 100644 --- a/examples/webgl_particles_shapes.html +++ b/examples/webgl_particles_shapes.html @@ -7,6 +7,7 @@