javascript - 在 three.js 中放大鼠标指针

Question

我使用 thingiview.js、Three.js 和 trackballControls 组合了一个系统，我可以在其中上传 STL 文件，然后将其呈现在 Canvas 上。通过一些调整，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？

困惑

Answer 1

在 Trackballcontrols 中缩放实际上并不是缩放(那是设置相机 fov)。两个对象只是在控件中四处移动...，另一个是相机 (this.object)，另一个是它正在查看的点 (this.target)。我没怎么玩过轨迹球控件，但我敢猜测它根本不会触及目标(所以所有的移动和缩放都将围绕它展开)。

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

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

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

为了从 2D x/y 鼠标坐标获取 3D x/y/z 坐标，我建议四处搜索光线转换或对象拾取，应该可以找到大量示例。