首页 文章

ThreeJS轨道控制器设置目标而无需lookAt

提问于
浏览 次
4

我正在尝试制作用于构建模型的3D查看器 . 我们加载了模型，并试图与模型进行某种交互 . 因此，我们使用OrbiControls来旋转，平移和缩放模型 .

我们希望在查看器中具有以下行为：当用户单击并拖动（因此旋转）时，旋转中心位于用户单击的建筑物的点处 .

我认为通过改变OrbitControl的目标是明智的：

control.target.set(newX, newY, newZ);

但是，我在OrbitControl.js文件的源代码中找到的是，当控件更新时，

camera.lookAt()

调用函数，使相机跳到新位置 .

有没有办法解决这个问题？我现在已经尝试了几个小时，似乎没有任何工作 .

尝试更改target0，然后在控件上调用reset（） . 还尝试将相机更换回原来的位置（这可能是它的完成方式，但我可能尝试得很差 .

javascript three.js perspectivecamera orbital-mechanics

3 回答

  • 1

    有什么方法可以解决这个问题吗？

    Short answer is "Yes, but it's not using a standard version OrbitControls.js".

    请继续阅读我的详细推理....

    我花了一些时间来查看 OrbitControls.js （r87）的源代码，考虑到实现增强功能的想法，该增强功能允许您提供可用作相机目标的可选第二点 .

    然而，在探索代码之后，我认为这将是添加到标准公共版本的一个不好的功能 . OrbitControls有许多功能，例如限制视角，最小和最大旋转以及假设摄像机和轨道中心相同的小车距离 . 如果有第二个摄像机标签选项，则需要修改它们以使用轨道中心或摄像机目标，或者使用可配置参数来切换它使用的那个 . 这将增加数百个额外的代码行，使其更难理解，并且所有这些代码都非常适合 .

    所以... The solution ：

    因为你正在构建一个技术工具，我怀疑你不关心有限的视角，距离或旋转所以如果我是你，我会将 OrbitControls.js 复制到你的项目中，将其重命名为 OrbitControls_customised.js 并进行所需的更改：

    在 this.target 下面添加2个新参数，名为 this.cameraTarget 和 this.coupleCenters

    // "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();

// "cameraTarget" is where the camera is looking (by default the same as target
this.cameraTarget = new THREE.Vector3();

// Whether the camera should be locked to the orbit center
this.coupleCenters = true;

    在它指示相机看中心的线上......

    scope.object.lookAt( scope.target );

    ...改变它，以便当coupleCenters为真时它只更新相机...

    if( scope.coupleCenters ){
    scope.cameraTarget = scope.target;
}
scope.object.lookAt( scope.cameraTarget );

    现在，通过这些更改，您可以使用 onMouseDown 事件使用RayCasting来查找对象上的点，将 controls.decoupleCenters 设置为 false 并将 controls.target 设置为光线投射的交叉点/交叉点 . 然后 onMouseUp 事件将 controls.target 设置回 controls.cameraTarget 以允许它正常运行 .

    我希望能回答你的问题，并为你提供一些粗略的路线图 .

    回复于
  • 0

    试试这个：

    首先将控件的位置设置为：

    control.center.set(0, 0, 0);

    然后这样做：

    camera.position.copy(control.center).add(new THREE.Vector3(x, y, z+10));

    其中x，y和z是建筑模型的位置 .

    注意我已经添加了10到z，因此摄像头位于模型前面 . 将10更改为其他值以更接近/离模型更远/更远 .

    回复于
  • 0

    以下是Martin Joiner在此_1787236中实施的解决方案（谢谢!!!）：

    从这里改变第45行：

    controls.coupleCenters = false;

    对此：

    controls.coupleCenters = true;

    然后按任意键（或单击鼠标左键）查看Wouter Coebergh描述的原始行为，然后将Martin的推荐逻辑添加到自定义轨道控件中 .

    回复于

相关问题