Three.js 将相机距离移动到对象的 z答案

【问题标题】：Three.js move camera distance to object by zThree.js 将相机距离移动到对象的 z
【发布时间】：2021-08-04 00:38:09
【问题描述】：

我正在围绕一个对象旋转带有orbitControls 的PerspectiveCamera。现在我想将相机移近物体，但保持实际旋转。

我设置到对象距离的坐标输出为 [0,0,100]。

但我的 CameraPosition 是 [-500, 96, 1772]。我怎样才能保持“旋转”，但将相机靠近物体移动到 100 的距离。

我需要使用getAzimuthalAngle() 还是getPolarAngle()？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

例如，像这样，如果你的对象不在场景的中心：

camera.position.sub(obj.position).setLength(100).add(obj.position);

如果对象在中心：

camera.position.setLength(100);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(25, 0, 100);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(100, 100));

var obj = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
obj.position.set(25, 0, 0);
scene.add(obj);
controls.target.copy(obj.position);
controls.update();

stepCloser.addEventListener("click", onClick, false);

function onClick() {
  camera.position.sub(obj.position).setLength(100).add(obj.position);
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="stepCloser" style="position: absolute;">
  100 units to the object
</button>

【讨论】：

【解决方案2】：

这会奏效。我试图通过这个代码 sn-p 加载 GLTF 模型。

    loader.load('./demo-models/model-1/scene.gltf', function (gltf) {
         gltf.position.x -= 60
         scene.add(gltf.scene);
    });

但这并没有成功。所以调试了一段时间后，我意识到我可以玩转透视相机的一些参数。好吧，最初的第一个参数是 75 个单位，这使我的对象离屏幕太远了，我不得不放大直到能看清楚。一些代码调整，当我将它设置为 1 时效果最好。

var camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 0.1, 1000);

【讨论】：