mrdoob/three.js — Issue #783: Firstpersoncontrols
Author: flyingdeath
Created: 2011-11-21 17:35:11+00:00
State: open

Hi,

How do change the Firstpersoncontrols's camera's target (lookAt) position while still using the Firstpersoncontrols model?

From what I can see the function update, creates projection sphere that the mouse's position gets translated on to then rotates the camera with.

targetPosition:
Only gets used a container to load the x,y,z into the camera's lookat position.

lon and lat:
They seem like right the starting point for the sphere.
But I don't understand the correct form to change it.

Thanks,
Brian.
```javascript

this.update = function() {

var now = new Date().getTime();
this.tdiff = ( now - this.lastUpdate ) / 1000;
this.lastUpdate = now;

if ( !this.freeze ) {

if ( this.heightSpeed ) {

var y = clamp( this.object.position.y, this.heightMin, this.heightMax );
var delta = y - this.heightMin;

this.autoSpeedFactor = this.tdiff * ( delta * this.heightCoef );

} else {

this.autoSpeedFactor = 0.0;

}

var actualMoveSpeed = this.tdiff * this.movementSpeed;

if ( this.moveForward || ( this.autoForward && !this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
if ( this.moveBackward ) this.object.translateZ( actualMoveSpeed );

if ( this.moveLeft ) this.object.translateX( - actualMoveSpeed );
if ( this.moveRight ) this.object.translateX( actualMoveSpeed );

if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );

var actualLookSpeed = this.tdiff * this.lookSpeed;

if ( !this.activeLook ) {

actualLookSpeed = 0;

}

this.lon += this.mouseX * actualLookSpeed;
if( this.lookVertical ) this.lat -= this.mouseY * actualLookSpeed;

this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
this.phi = ( 90 - this.lat ) * Math.PI / 180;
this.theta = this.lon * Math.PI / 180;

var targetPosition = this.target,
position = this.object.position;

targetPosition.x = position.x + 100 * Math.sin( this.phi ) * Math.cos( this.theta );
targetPosition.y = position.y + 100 * Math.cos( this.phi );
targetPosition.z = position.z + 100 * Math.sin( this.phi ) * Math.sin( this.theta );

var verticalLookRatio = 1;

if ( this.constrainVertical ) {

verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );

}

this.lon += this.mouseX * actualLookSpeed;
if( this.lookVertical ) this.lat -= this.mouseY * actualLookSpeed * verticalLookRatio;

this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
this.phi = ( 90 - this.lat ) * Math.PI / 180;

this.theta = this.lon * Math.PI / 180;

if ( this.constrainVertical ) {

this.phi = map_linear( this.phi, 0, Math.PI, this.verticalMin, this.verticalMax );

}

var targetPosition = this.target,
position = this.object.position;

targetPosition.x = position.x + 100 * Math.sin( this.phi ) * Math.cos( this.theta );
targetPosition.y = position.y + 100 * Math.cos( this.phi );
targetPosition.z = position.z + 100 * Math.sin( this.phi ) * Math.sin( this.theta );

this.object.lookAt( targetPosition );

}

};

```