Is there ANY way to have the three.js camera lookat being rendered off-center?

Question

Is there a way to setup the Three.js renderer in such a way that the lookat point of the camera is not in the center of the rendered image?

To clarify: image a scene wit

Answer 1

If you want your perspective camera to have an off-center view, the pattern you need to use is:

camera = new THREE.PerspectiveCamera( for, aspect, near, far );
camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );

See the docs: https://threejs.org/docs/#api/cameras/PerspectiveCamera

You can find examples of this usage in this example and this example.

three.js r.73

Answer 2

Here's a simple solution:

Assuming your cube is 4 x 4 x 4, at position 0, 0, 0:

var geometry = new THREE.BoxGeometry( 4, 4, 4 );
var material = new THREE.MeshBasicMaterial( { color: 0x777777 } );
var cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 0, 0 );

Get cube's position:

var Vx = cube.position.x, 
    Vy = cube.position.y, 
    Vz = cube.position.z;

Then deduct by 2 from x position, then add 2 to y and z position, and use the values to create a new Vector3:

var newVx = Vx - 2,
    newVy = Vy + 2;
    newVz = Vz + 2;

var xyz = new THREE.Vector3(newVx, newVy, newVz)

Then camera lookAt:

camera.lookAt(xyz);   

Using console log, it would show that the camera is now looking at -2, 2, 2, which is the upper-left of your cube.

console.log(xyz);