diff --git a/examples/canvas_materials_depth.html b/examples/canvas_materials_depth.html index cfa1eacb..026b19e1 100644 --- a/examples/canvas_materials_depth.html +++ b/examples/canvas_materials_depth.html @@ -26,7 +26,7 @@ var camera, scene, renderer; - var cube, plane; + var cube, plane, target = new THREE.Vector3(); var targetRotation = 0; var targetRotationOnMouseDown = 0; @@ -61,11 +61,10 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); + camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.x = 1000; camera.position.y = 1000; camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); @@ -208,12 +207,14 @@ if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 ); if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 ); - if ( yawLeft ) camera.target.position.x -= 10; // camera.rotation.y += 0.01; // camera.rotateY( 1 ); - if ( yawRight ) camera.target.position.x += 10; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 ); + if ( yawLeft ) target.x -= 10; // camera.rotation.y += 0.01; // camera.rotateY( 1 ); + if ( yawRight ) target.x += 10; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 ); if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 ); if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 ); + camera.lookAt( target ); + debugContext.clearRect( - 256, - 256, 512, 512 ); debugContext.beginPath(); @@ -227,9 +228,9 @@ // camera debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 ); - debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 ); + debugContext.lineTo( target.x * 0.1, target.z * 0.1 ); debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 ); - debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 ); + debugContext.rect( target.x * 0.1 - 5, target.z * 0.1 - 5, 10, 10 ); debugContext.rect( - 50, - 50, 100, 100 ); for ( var i = 1; i < scene.objects.length; i++ ) { diff --git a/examples/canvas_materials_normal.html b/examples/canvas_materials_normal.html index 87d6295e..30b8c547 100644 --- a/examples/canvas_materials_normal.html +++ b/examples/canvas_materials_normal.html @@ -56,7 +56,7 @@ var container = document.getElementById( 'container' ); - camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 2000 ); + camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.z = 1000; scene = new THREE.Scene(); diff --git a/examples/canvas_materials_reflection.html b/examples/canvas_materials_reflection.html index 36ef687f..e27dd10a 100644 --- a/examples/canvas_materials_reflection.html +++ b/examples/canvas_materials_reflection.html @@ -59,7 +59,7 @@ var container = document.getElementById( 'container' ); - camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 ); + camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 100; scene = new THREE.Scene(); diff --git a/examples/canvas_materials_video.html b/examples/canvas_materials_video.html index e64f2cad..ed4d062e 100644 --- a/examples/canvas_materials_video.html +++ b/examples/canvas_materials_video.html @@ -61,9 +61,8 @@ info.innerHTML = 'three.js - video demo. playing sintel trailer'; container.appendChild(info); - camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); + camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); @@ -190,11 +189,12 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; + camera.lookAt( scene.origin ); if ( video.readyState === video.HAVE_ENOUGH_DATA ) { imageContext.drawImage( video, 0, 0 ); - + if ( texture ) texture.needsUpdate = true; if ( textureReflection ) textureReflection.needsUpdate = true; diff --git a/examples/canvas_particles_floor.html b/examples/canvas_particles_floor.html index e38546e8..944e840c 100644 --- a/examples/canvas_particles_floor.html +++ b/examples/canvas_particles_floor.html @@ -44,9 +44,8 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); + camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); @@ -135,6 +134,7 @@ camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; + camera.lookAt( scene.origin ); renderer.render( scene, camera ); diff --git a/examples/canvas_particles_random.html b/examples/canvas_particles_random.html index 81eacfb3..28041db4 100644 --- a/examples/canvas_particles_random.html +++ b/examples/canvas_particles_random.html @@ -40,9 +40,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(); @@ -128,6 +127,7 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; + camera.lookAt( scene.origin ); group.rotation.x += 0.01; group.rotation.y += 0.02; diff --git a/examples/canvas_particles_shapes.html b/examples/canvas_particles_shapes.html index 9740cb94..52052b95 100644 --- a/examples/canvas_particles_shapes.html +++ b/examples/canvas_particles_shapes.html @@ -62,10 +62,10 @@ info.style.top = '10px'; info.style.width = '100%'; info.style.textAlign = 'center'; - info.innerHTML = 'Three.js with Love. Simple Particle Systems with Shapes by zz85
Move your mouse. Click to pause/resume.'; + info.innerHTML = 'Three.js with Love. Simple Particle Systems with Shapes by zz85
Move your mouse.'; container.appendChild( info ); - camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 1000 ); + camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.y = 150; camera.position.z = 700; @@ -73,17 +73,16 @@ // Get text from hash - var theText = "THREE.JS"; - + var string = "THREE.JS"; var hash = document.location.hash.substr( 1 ); if ( hash.length !== 0 ) { - theText = hash; + string = hash; } - var text3d = new THREE.TextGeometry( theText, { + var text3d = new THREE.TextGeometry( string, { size: 80, height: 20, @@ -95,35 +94,36 @@ text3d.computeBoundingBox(); var centerOffset = -0.5 * ( text3d.boundingBox.x[ 1 ] - text3d.boundingBox.x[ 0 ] ); - var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } ); - + var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } ); + text = new THREE.Mesh( text3d, textMaterial ); + // Potentially, we can extract the vertices or faces of the text to generate particles too. // Geo > Vertices > Position - - text.doubleSided = false; - text.position.x = centerOffset; - text.position.y = 100; - text.position.z = 0; + text.doubleSided = false; - text.rotation.x = 0; - text.rotation.y = Math.PI * 2; + text.position.x = centerOffset; + text.position.y = 100; + text.position.z = 0; + + text.rotation.x = 0; + text.rotation.y = Math.PI * 2; text.overdraw = true; parent = new THREE.Object3D(); - parent.add( text ); + parent.add( text ); + - particleCloud = new THREE.Object3D(); // Just a group particleCloud.y = 800; parent.add( particleCloud ); - + scene.add( parent ); - - + + // Create Particle Systems - + // Heart var x = 0, y = 0; @@ -137,20 +137,20 @@ heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 ); heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y ); heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 ); - - var circleLines = function ( context ) { - context.lineWidth = 0.05; //0.05 + + var circleLines = function ( context ) { + context.lineWidth = 0.05; context.beginPath(); context.arc( 0, 0, 1, 0, Math.PI*2, true ); context.closePath(); context.stroke(); - + context.globalAlpha = 0.2; context.fill(); } - + var hue = 0; - + var hearts = function ( context ) { context.globalAlpha = 0.5; var x = 0, y = 0; @@ -168,16 +168,16 @@ context.lineWidth = 0.5; //0.05 context.stroke(); } - + var setTargetParticle = function() { - + //hearts circleLines var material = new THREE.ParticleCanvasMaterial( { program: hearts, blending:THREE.AdditiveBlending } ); - + material.color.setHSV(hue, 0.5, 1); hue += 0.001; if (hue>1) hue-=1; - + particle = new THREE.Particle( material ); particle.scale.x = particle.scale.y = Math.random() * 20 +20; @@ -185,45 +185,43 @@ return particle; }; - + var onParticleCreated = function(p) { var position = p.position; p.target.position = position; }; - + var onParticleDead = function(particle) { particle.target.visible = false; particleCloud.remove(particle.target); }; - - + sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160)); - emitterpos = new THREE.Vector3(0,0,0); - + emitterpos = new THREE.Vector3(); + sparksEmitter.addInitializer(new SPARKS.Position( new SPARKS.PointZone( emitterpos ) ) ); sparksEmitter.addInitializer(new SPARKS.Lifetime(0,2)); sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle)); - - + sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0,-50,10)))); + // TOTRY Set velocity to move away from centroid - + sparksEmitter.addAction(new SPARKS.Age()); //sparksEmitter.addAction(new SPARKS.Accelerate(0.2)); sparksEmitter.addAction(new SPARKS.Move()); sparksEmitter.addAction(new SPARKS.RandomDrift(50,50,2000)); - - + sparksEmitter.addCallback("created", onParticleCreated); sparksEmitter.addCallback("dead", onParticleDead); sparksEmitter.start(); - + // End Particles - + renderer = new THREE.CanvasRenderer(); - renderer.setSize( window.innerWidth, window.innerHeight ); + renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); @@ -239,9 +237,8 @@ } // - + document.addEventListener( 'mousemove', onDocumentMouseMove, false ); - function onDocumentMouseDown( event ) { @@ -249,7 +246,7 @@ mouseXOnMouseDown = event.clientX - windowHalfX; targetRotationOnMouseDown = targetRotation; - + if (sparksEmitter.isRunning()) { sparksEmitter.stop(); } else { @@ -302,26 +299,24 @@ stats.update(); } - - function render() { + timeOnShapePath += 0.0337; + if (timeOnShapePath > 1) timeOnShapePath -= 1; - + // TODO Create a PointOnShape Action/Zone in the particle engine - var pointOnShape = heartShape.getPointAt(timeOnShapePath); - + var pointOnShape = heartShape.getPointAt( timeOnShapePath ); + emitterpos.x = pointOnShape.x * 5 - 100; emitterpos.y = -pointOnShape.y * 5 + 400; - + // Pretty cool effect if you enable this //particleCloud.rotation.y += 0.05; parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05; renderer.render( scene, camera ); - - } diff --git a/examples/canvas_particles_sprites.html b/examples/canvas_particles_sprites.html index 31ef777a..2d057d82 100644 --- a/examples/canvas_particles_sprites.html +++ b/examples/canvas_particles_sprites.html @@ -41,9 +41,8 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 ); + camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 ); camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); @@ -174,6 +173,7 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; + camera.lookAt( scene.origin ); renderer.render( scene, camera ); diff --git a/examples/canvas_particles_waves.html b/examples/canvas_particles_waves.html index 49d95886..543bb369 100644 --- a/examples/canvas_particles_waves.html +++ b/examples/canvas_particles_waves.html @@ -44,9 +44,8 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); + camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); @@ -146,6 +145,7 @@ camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; + camera.lookAt( scene.origin ); var i = 0; diff --git a/examples/canvas_performance.html b/examples/canvas_performance.html index 3766f29f..ac8c5747 100644 --- a/examples/canvas_performance.html +++ b/examples/canvas_performance.html @@ -45,11 +45,9 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); - camera.position.z = 1000; + camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.y = 1000; camera.position.z = 1000; - camera.useTarget = true; scene = new THREE.Scene(); @@ -130,6 +128,8 @@ function render() { + camera.lookAt( scene.origin ); + renderer.render( scene, camera ); } diff --git a/examples/canvas_sandbox.html b/examples/canvas_sandbox.html index f0b15c8d..fe846d54 100644 --- a/examples/canvas_sandbox.html +++ b/examples/canvas_sandbox.html @@ -46,6 +46,8 @@ pitchUp = false, pitchDown = false, rollLeft = false, rollRight = false; + var target = new THREE.Vector3( 0, 150, 0 ); + var debugContext; init(); @@ -56,11 +58,9 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); + camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.y = 150; camera.position.z = 400; - camera.useTarget = true; - camera.target.position.y = 150; scene = new THREE.Scene(); @@ -218,12 +218,14 @@ if ( pitchUp ) camera.rotation.x += 0.01; if ( pitchDown ) camera.rotation.x -= 0.01; - if ( yawLeft ) camera.target.position.x -= 5; - if ( yawRight ) camera.target.position.x += 5; + if ( yawLeft ) target.x -= 5; + if ( yawRight ) target.x += 5; if ( rollLeft ) camera.rotation.z += 0.01; if ( rollRight ) camera.rotation.z -= 0.01; + camera.lookAt( target ); + debugContext.clearRect( -256, -256, 512, 512 ); debugContext.beginPath(); @@ -237,9 +239,9 @@ // camera debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 ); - debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 ); + debugContext.lineTo( target.x * 0.1, target.z * 0.1 ); debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 ); - debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 ); + debugContext.rect( target.x * 0.1 - 5, target.z * 0.1 - 5, 10, 10 ); debugContext.rect( - 50, - 50, 100, 100 ); for ( var i = 0, l = objects.length; i < l; i++ ) { diff --git a/examples/misc_camera_path.html b/examples/misc_camera_path.html index 06ef0414..0acceb21 100644 --- a/examples/misc_camera_path.html +++ b/examples/misc_camera_path.html @@ -39,48 +39,43 @@ + - +