设置 THREE.PerspectiveCamera 的距离而不改变视图方向答案

【问题标题】：Set distance of THREE.PerspectiveCamera without change view direction设置 THREE.PerspectiveCamera 的距离而不改变视图方向
【发布时间】：2018-12-18 23:13:48
【问题描述】：

我在空间某处的 THREE.js 中有 PerspectiveCamera 作为网格的子级。相机仍应查看网格（局部坐标 [0, 0, 0]）。我想在不改变视角方向的情况下改变相机与网格的距离。有什么简单的方法吗？

camera.position.z = 13 // Works only if position.x and position.y are 0.
camera.setDistanceFromTarget(13) // I need something like this.

我只是在考虑手动计算实际相机的旋转角度和新相机的位置。这里是fiddle。

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 to set distance of camera from [0, 0, 0] to 13 without change 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>

【问题讨论】：

如果相机在x、y、z，那么当前距离为Math.sqrt(x*x + y*y + z*z)。取每个坐标，乘以新的距离，然后除以计算的距离。（这是有效的，因为相机正在查看原点；通常要将其移回原点，您需要将其视图矢量的负倍数添加到其位置）
camera.position.setLength(13) 可以解决问题。

标签： javascript three.js perspectivecamera

【解决方案1】：

你需要normalize相机位置向量，然后scalarly multiply它所需的长度：

camera.position.normalize().multiplyScalar(13)

[https://jsfiddle.net/0jnw5guo/]

【讨论】：