Skip to content

Commit

Permalink
Updated some examples to the new camera setup.
Browse files Browse the repository at this point in the history 
Got stuck on the PathCamera/PathControls one. Maybe it's time to rewrite this...
  • Loading branch information
@mrdoob
mrdoob committed Oct 4, 2011
1 parent a0b8f50 commit 309c484
Show file tree
Hide file tree
Showing 12 changed files with 121 additions and 140 deletions.
15 changes: 8 additions & 7 deletions examples/canvas_materials_depth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

var camera, scene, renderer;

var cube, plane;
var cube, plane, target = new THREE.Vector3();

var targetRotation = 0;
var targetRotationOnMouseDown = 0;
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();
Expand All @@ -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++ ) {
Expand Down
2 changes: 1 addition & 1 deletion examples/canvas_materials_normal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion examples/canvas_materials_reflection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
6 changes: 3 additions & 3 deletions examples/canvas_materials_video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,8 @@
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> 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();

Expand Down Expand Up @@ -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;

Expand Down
4 changes: 2 additions & 2 deletions examples/canvas_particles_floor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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 );

Expand Down
4 changes: 2 additions & 2 deletions examples/canvas_particles_random.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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;
Expand Down
107 changes: 51 additions & 56 deletions examples/canvas_particles_shapes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,28 +62,27 @@
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Three.js with Love. Simple Particle Systems with Shapes by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Move your mouse. Click to pause/resume.';
info.innerHTML = 'Three.js with Love. Simple Particle Systems with Shapes by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br>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;

scene = new THREE.Scene();

// 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,
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -168,62 +168,60 @@
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;
particleCloud.add( particle );

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 );

Expand All @@ -239,17 +237,16 @@
}

//

document.addEventListener( 'mousemove', onDocumentMouseMove, false );


function onDocumentMouseDown( event ) {

event.preventDefault();

mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;

if (sparksEmitter.isRunning()) {
sparksEmitter.stop();
} else {
Expand Down Expand Up @@ -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 );



}

Expand Down
4 changes: 2 additions & 2 deletions examples/canvas_particles_sprites.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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 );

Expand Down
Loading

0 comments on commit 309c484

Please sign in to comment.