Question

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

我们希望观察者能够在用户点击并拖动（因此旋转）时，旋转中心位于用户点击的建筑物的位置。

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

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

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

camera.lookAt()

调用

函数，使相机跳到新位置。

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

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

Answer 1

有没有办法解决这个问题？

简短回答是＆＃34;是的，但它没有使用标准版本OrbitControls.js＆＃34;。

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

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

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

所以... 解决方案：

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

在名为OrbitControls_customised.js和this.target

的this.cameraTarget下面添加2个新参数

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;

...更改它以便只在coupleCenters为真时更新相机...

scope.object.lookAt( scope.target );

现在，通过这些更改，您可以设置使用RayCasting的if( scope.coupleCenters ){ scope.cameraTarget = scope.target; } scope.object.lookAt( scope.cameraTarget );事件来查找对象上的点，将onMouseDown设置为controls.decoupleCenters并设置{ {1}}到光线投射的交叉/交叉点。然后是false事件，将controls.target设置回onMouseUp以允许其正常行为。

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

Answer 2

试试这个：

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

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更改为其他值以更接近/离模型更远。

Answer 3

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

更改第45行：

controls.coupleCenters = false;

到此：

controls.coupleCenters = true;

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

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

3 个答案: