在three.js中放大鼠标指针答案

【问题标题】：Zoom on mouse pointer in three.js在three.js中放大鼠标指针
【发布时间】：2013-01-05 19:26:54
【问题描述】：

使用thingiview.js、Three.js 和trackballControls，我建立了一个系统，我可以在其中上传一个STL 文件，然后在画布上渲染它。 trackballControls 通过一些调整非常棒，但我遇到了一个问题：

我想放大鼠标光标的点而不是网格/平面的中心。

我已经完成了一个简单的 captureEvent 来获取鼠标在屏幕上的坐标并对其进行跟踪，但是我在确定在何处使用控制方案来执行此操作时遇到了问题。

我检查了 _zoomStart / _zoomEnd 的东西（这让我有点困惑，因为它离开了“y”，我认为它会是“z”）。但是当尝试添加一个_zoomStart.x时，它基本上会忽略它。

现在我可能不是一个大师，但我通常很舒服。

我还想确保当我平移时，缩放和旋转仍然基于对象的中心，而不是网格/平面的中心。

已经通过帖子和示例搜索了几天，但没有真正找到任何答案。

我确定我没有找对地方/没有朝着正确的方向前进。非常感谢您朝着正确的方向推动（或者更好的是快速踢球）。

编辑

this.zoomCamera = function () {

        var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;

        if ( factor !== 1.0 && factor > 0.0 ) {

            _eye.multiplyScalar( factor );

            if ( _this.staticMoving ) {

                _zoomStart.copy( _zoomEnd );

            } else {

                _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;

            }

        }

    };

我假设以上是我要进行缩放更改的地方。我不明白的是它被设置为_zoomStart.y。但是照原样，我将如何实现 x？

我的意思是，如果 _zoomStart 和 _zoomEnd 是 Vector2，那么在上面的代码中它在哪里定义了 x？

困惑

【问题讨论】：

见：stackoverflow.com/questions/23994206/zoom-to-object-in-threejs/…

标签： javascript three.js

【解决方案1】：

在 Trackballcontrols 中缩放实际上并不是缩放（这将是设置相机 fov）。两个对象刚刚在控件中移动......，另一个是相机（this.object），另一个是它正在查看的点（this.target）。我没有玩太多轨迹球控件，但我敢猜测它根本不会触及目标（所以所有的移动和缩放都将围绕它进行）。

您可以尝试在点击时更改目标，例如：

mycontrols.target = new THREE.Vector3(newx, newy, newz);

您可能需要更新/重置一些其他 Trackballcontrols 内部变量，但它也可能像那样工作。

为了从 2D x/y 鼠标坐标中获取 3D x/y/z 坐标，我建议四处寻找光线投射或物体拾取，应该会找到很多示例。

【讨论】：

不幸的是，onclick 不起作用。我知道运动（旋转，缩放，平移）只是相机四处移动。但是有没有办法将放大点设置为鼠标指针本身的 x/y？
鼠标指针在3D空间中不存在，所以你需要一些方法来告诉你想要放大空间中的哪个点（从Three.js的角度来看，鼠标光标存在于......我不知道......在虚拟相机镜头或其他东西上）。您可以在 onclick 或 onmouseover 中执行此操作，但您需要从鼠标事件 x 和 y 中找出 3D 坐标。
所以如果我理解正确的话，你想放大鼠标指针下的3D对象/点（屏幕空间中的x，y）..如果是这样，你需要使用光线投射来获取模型中该点的 3D 坐标（世界或相机空间中的 x、y、z）。然后将这些坐标用作 TrackballControls 目标，因此当您缩放相机时，它会向该点移动。
是的，没错。一旦我能再次看清楚，我会调查它。谢谢，如果成功了，我会接受。
好的，已追踪并正在存储/追踪 3D 坐标。我在哪里拼接到控件以将其添加为目标？我正在查看“this.zoomCamera = function”区域，但这又回到了我感到困惑的地方，因为它使用“_zoomEnd.y”和“_zoomStart.y”在上面为我猜测的起点进行了编辑，并可能说明了为什么我我很困惑...除了我有时是个白痴而且我一直盯着这种方式太久的事实...

【解决方案2】：

诀窍在于 _zoomStart 和 _zoomEnd 是为触摸缩放而创建的，当您使用鼠标滚轮进行缩放时，您只需传递一个变量，表示：“放大多少”。程序员没有为其创建新变量，而是使用了 _zoom###.y 组件。

所以 _zoomStart 和 _zoomEnd 不提供有关如何执行缩放的信息，这些变量仅包含“指令”。然后软件将其转换为“zoompan”向量，以 3D 形式表示相机所需的运动。

【讨论】：