在网格上旋转一些故意点后，计算相机的位置

Question

我正在尝试实现当前方案：

1. 在网格焦点透视摄像机上的鼠标下降事件上，用户单击
2. 允许用户通过OrbitControls旋转相机；
3. 在鼠标上完成旋转后，鼠标UP事件的旋转以这种方式更改相机的位置，以至于相机似乎仍以与聚焦和旋转之前相同的角度看待网格。

因此，看来，用户在网格上的某个点上旋转了相机，并且旋转后可以从相同的位置查看摄像机。

1(和2(没有问题我对3(

感到非常困惑

在这里，我添加了一些图片来说明主要步骤

1(用户单击网格上的某个点

2(将相机焦点设置在用户单击

的点上

3(用户将相机旋转围绕选定的枢轴点

4(应以这种方式放置鼠标上的相机，以便在用户的眼中，选择的点被带回了当时的位置，并且相机从相同的角度看

问题是如何实现第四张图片中所示的行为。

重要的是，认为相机似乎是从相同的位置看的，而到同一目标，金字塔似乎围绕用户单击的点旋转。

我感谢任何帮助。谢谢！

Answer 1

我希望我能正确得到你。找到对象上的初始目标和目标点之间的区别，以及在鼠标上向上 - 使用此值移动相机位置。

var w = window.innerWidth,
  h = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, w / h, 1, 1000);
camera.position.setScalar(5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
var prismGeom = new THREE.ConeBufferGeometry(1, 2, 3);
prismGeom.translate(0, 1, 0);
var prismMat = new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
});
var prism = new THREE.Mesh(prismGeom, prismMat);
prism.position.set(-1, 0, -2);
scene.add(prism);
var centralMarker = new THREE.Mesh(new THREE.SphereBufferGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
  color: "aqua"
}));
scene.add(centralMarker);
var pointMarker = new THREE.Mesh(centralMarker.geometry, new THREE.MeshBasicMaterial({
  color: "magenta"
}));
pointMarker.visible = false;
scene.add(pointMarker);
var oldTarget = scene.position;
var targeted = false;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);
function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(prism);
  if (intersects.length > 0) {
    targeted = true;
    controls.target.copy(intersects[0].point);
    pointMarker.position.copy(intersects[0].point);
    pointMarker.visible = true;
    controls.update();
  }
}
function onMouseUp(event) {
  if (!targeted) return;
  let shift = new THREE.Vector3().copy(oldTarget).sub(controls.target);
  camera.position.add(shift);
  controls.target.copy(oldTarget);
  controls.update();
  targeted = false;
  pointMarker.visible = false;
}
renderer.setAnimationLoop(() => {
  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>