home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Updated some examples to the new camera setup.

Browse Source 
Got stuck on the PathCamera/PathControls one. Maybe it's time to rewrite this...
This commit is contained in:
Mr.doob
2011-10-04 05:24:56 +02:00
parent a0b8f50fb0
commit 309c484321
12 changed files with 122 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/canvas_materials_depth.html
+8 -7
View File
@@ -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++ ) {
examples/canvas_materials_normal.html
+1 -1
View File
@@ -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();
examples/canvas_materials_reflection.html
+1 -1
View File
@@ -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();
examples/canvas_materials_video.html
+3 -3
View File
@@ -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();
@@ -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;
examples/canvas_particles_floor.html
+2 -2
View File
@@ -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 );
examples/canvas_particles_random.html
+2 -2
View File
@@ -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;
examples/canvas_particles_shapes.html
+51 -56
View File
@@ -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 <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;
@@ -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 );
}
examples/canvas_particles_sprites.html
+2 -2
View File
@@ -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 );
examples/canvas_particles_waves.html
+2 -2
View File
@@ -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;
examples/canvas_performance.html
+3 -3
View File
@@ -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 );
}
examples/canvas_sandbox.html
+9 -7
View File
@@ -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++ ) {
examples/misc_camera_path.html
+38 -55
View File
@@ -39,48 +39,43 @@
<script src="../build/Three.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script src="js/Stats.js"></script>
<script src="js/Tween.js"></script>
<script>
var statsEnabled = true;
var container, stats;
var camera, scene, renderer;
var camera, controls, scene, renderer;
var cross;
init();
animate();
function init() {
// scene and camera
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );
var waypoints = [
[ -500, 0, 0 ],
[ 0, 200, 0 ],
[ 500, 0, 0 ]
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
];
camera = new THREE.PathCamera( {
fov: 40, aspect: window.innerWidth / window.innerHeight, near: 1, far: 1000,
waypoints: waypoints, duration: 28,
useConstantSpeed: true, resamplingCoef: 1,
createDebugPath: true, createDebugDummy: true,
lookSpeed: 0.0006, lookVertical: true, lookHorizontal: true,
verticalAngleMap: { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] },
horizontalAngleMap: { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] }
} );
camera.lon = 180;
/*
controls = new THREE.PathControls( camera );
controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
controls.duration = 28
controls.useConstantSpeed = true;
controls.resamplingCoef = 1;
controls.createDebugPath = true;
controls.createDebugDummy = true;
controls.lookSpeed = 0.0006;
controls.lookVertical = true;
controls.lookHorizontal = true;
controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
controls.lon = 180;
*/
// world
@@ -93,12 +88,14 @@
var material = new THREE.MeshLambertMaterial( { color:0xffffff } );
for( var i = 0; i < 500; i++ ) {
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( cube, material );
mesh.position.set(( Math.random() - 0.5 ) * 1000,
( Math.random() - 0.5 ) * 1000,
( Math.random() - 0.5 ) * 1000 );
mesh.position.set(
( Math.random() - 0.5 ) * 1000,
( Math.random() - 0.5 ) * 1000,
( Math.random() - 0.5 ) * 1000
);
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
@@ -106,8 +103,6 @@
}
scene.add( camera.animationParent );
// lights
light = new THREE.DirectionalLight( 0xffffff );
@@ -131,39 +126,27 @@
container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
if ( statsEnabled ) {
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
}
setInterval( loop, 1000 / 60 );
camera.animation.play( true, 0 );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
}
function animate() {
function loop() {
requestAnimationFrame( animate );
THREE.AnimationHandler.update( 1000/60 );
render();
stats.update();
/*
cross.matrix.copy( camera.matrix );
cross.matrix.n14 = 0;
cross.matrix.n24 = 0;
cross.matrix.n34 = -200;
cross.matrixWorldNeedsUpdate = true;
*/
}
function render() {
renderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}