mrdoob/three.js — Issue #1011: Camera path
Author: darkbrain-fc
Created: 2012-01-03 13:36:27+00:00
State: open

Hi all,
i'm trying to understand how camera path works. For now it should be enough to spin around a cube constantly looking at it, but i have two problems. I can't spin around the cube, my camera doesn't walks through all my waypoints, it's seems to stop at the middle (maybe i need more controls path?), and the camera.lookAt(cube.position) seems to do something else (may i totally miss understand it), here's the code:

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, dummy_camera;
var mesh, mesh2, mesh3, light, cube;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clock = new THREE.Clock();

init();
animate();

function init() {
container = document.getElementById( 'container' );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
controls = new THREE.PathControls( camera );

controls.waypoints = [ [ 0, 0, 1000 ], [ 200, 0, 0 ], [ 0, 0, -1000 ], [-200,0,0], [ 0, 0, 1000 ] ];
controls.duration = 14;
controls.createDebugPath = true;
controls.createDebugDummy = true;
controls.lookVertical = false;
controls.lookHorizontal = false;
controls.lon = 180;
controls.useConstantSpeed = true;
controls.lookSpeed = 0.06;
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.init();
scene.add( controls.animationParent );

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 ).normalize();
scene.add( light );

light = new THREE.AmbientLight( 0x222222 );
scene.add( light );

cube = new THREE.Mesh( new THREE.CubeGeometry( 60, 60, 60 ), new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;

scene.add( cube );

renderer = new THREE.WebGLRenderer( { antialias: true } );
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 );

controls.animation.play( true, 0 );
}

function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}

function render() {
var delta = clock.getDelta();

THREE.AnimationHandler.update( delta );
controls.update( delta );
camera.lookAt( cube.position );
renderer.render( scene, camera );

}

tnx,
DarkBrain