I have a PerspectiveCamera in THREE.js positioned somewhere in space as a child of a mesh. The camera is currently looking at the mesh with local coordinates [0, 0, 0]. I am looking for a way to change the distance of the camera from the mesh without changing the viewing direction. Is there an easy method to achieve this?
camera.position.z = 13 // This only works if position.x and position.y are 0.
camera.setDistanceFromTarget(13) // I wish there was a method like this.
I am considering manually calculating the actual camera's rotation angles and the new camera position. You can find a working example here.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(3, 3, 3);
var cube = new THREE.Mesh(geometry);
scene.add(cube);
cube.add(camera);
camera.position.set(2, 4, 6)
camera.lookAt(cube.position)
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// How can we set the camera's distance from [0, 0, 0] to 13 without altering the view direction?
camera.position.z = 13;<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>THREE.js camera demo</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
</body>
</html>