通过相机旋转将点带到最近的相机位置答案

【问题标题】：Bring point to nearest camera position by camera rotation通过相机旋转将点带到最近的相机位置
【发布时间】：2014-06-24 12:55:55
【问题描述】：

我在 Three.js (r67) 中有一个场景，其摄像头由 OrbitControls 控制。

如果我现在选择场景中的任意点 (Vector3)，那么仅通过旋转相机来（以编程方式）将该点带到最近的相机位置的最佳方法是什么？

示例场景

在下图中，左侧是起点。相机围绕绿色球体（如 OrbitControls）旋转，其中相机的中心是球体的中心。我现在喜欢围绕球体自动旋转相机（做最少的移动），使红色框最靠近相机（如右侧）。

【问题讨论】：

标签： three.js

【解决方案1】：

独立于场景中的点选方法，对于“旋转带相机”的意思有几种理解。

我想，你想顺便旋转相机，使选定的点位于屏幕的中心。

这很简单：

camera.lookAt(your_point_in_scene);

你可以做的更复杂。首先，找到当前的指向向量。默认情况下，相机朝Vector(0,0,1) 方向看。当我们以与相机相同的旋转方式旋转它时，我们将拥有相机方向：

var vec = new THREE.Vector3(0,0,1);
vec.applyQuaternion(camera.rotation._quaternion);

现在我们必须确定旋转相机的角度和旋转轴。旋转轴可以作为相机方向和从相机到对象的矢量的叉积来找到。可以从点积中提取天使：

var object_dir = object_world_point.clone().sub(camera.position);
var axis = vec.clone().crossProduct(object_dir);
var angle = Math.acos( vec.clone().dot(object_dir) / vec.length() / object_dir.length());

有了角度和轴，我们可以旋转相机：

camera.rotateOnAxis(axis, angle);

或者，如果你想让它平滑：

// before animation started
var total_rotation = 0, 
    rotateon,
    avel = 0.01; // 0.01 radian per second    


if(total_rotation < angle){
  rotateon = avel * time_delta;
  camera.rotateOnAxis(axis, angle);
  total_rotation += rotateon;
}

【讨论】：

【解决方案2】：

嗯，这并不难哦您有相机的中心/目标点。您计算从目标位置到点位置的差异，并将该向量归一化为相机中心点距离的长度（即类似于 pointdistance.multiplyScalar(cameradistance.length() / pointdistance.length()) ）。

就是这样。如果我正确理解了你的问题。您所做的就是将点的位置“扩展”到您的“摄像机移动圆顶”上，然后您就拥有了理想的新摄像机位置。相机的旋转是自动完成的，因为您始终以中心点为目标。

Aaand 如果你想稍微平滑一下相机的移动，你可以用例如插入角度（而不是直接的位置）。指数函数，随心所欲。

【讨论】：

【解决方案3】：

嗨，亲爱的，请关注这个与场景中的点选方法无关，对于“旋转带相机”的含义有几种理解。我想，你想顺便旋转相机，使选定的点位于屏幕的中心。这很简单：

camera.lookAt(your_point_in_scene);

你可以做的更复杂。首先，找到当前的指向向量。默认情况下，相机朝 Vector(0,0,1) 方向看。当我们以与相机相同的旋转方式旋转它时，我们将拥有相机方向：

var vec = new THREE.Vector3(0,0,1);
vec.applyQuaternion(camera.rotation._quaternion);

现在我们必须确定旋转相机的角度和旋转轴。旋转轴可以作为相机方向和从相机到对象的矢量的叉积来找到。可以从点积中提取角度：

var object_dir = object_world_point.clone().sub(camera.position);
var axis = vec.clone().crossProduct(object_dir);
var angle = Math.acos( vec.clone().dot(object_dir) / vec.length() / object_dir.length());

【讨论】：