Question

我的Three.js项目使用OrthographicCamera和OrthographicTrackBallControls进行缩放/平移。我正在尝试添加功能以缩放到光标位置而没有运气。首先，这是我如何获取鼠标位置：

var mX = ((event.clientX - offset.left) / renderer.domElement.clientWidth) * 2 - 1;
var mY = -((event.clientY - offset.top) / renderer.domElement.clientHeight) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.5);
vector.unproject(camera);
vector.sub(camera.position);

通过查看StackOverflow，似乎有很多有关如何使用PerspectiveCamera进行此操作的信息，但是这些方法不适用于OrthographicCamera。我找到了这个例子：

https://htmlpreview.github.io/?https://github.com/w3dot0/three.js/blob/973bf1d40ef552dbf19c19654a79f70e2882563d/examples/misc_controls_zoom_to_mouse.html

这正是我要完成的工作，但是实现此目的的代码是隐藏的，尽管我能够辨别出摄像头位置正在更改。

另一个类似的SO问题建议更改camera.left，camera.right，camera.top和camera.bottom，但是我对这种方法并不满意。这种方法似乎是可行的，但我不理解获得正确的左，右，上和下值所需的计算。

所以我的看法有两种可能性：

更改相机的左/右/上/下以获得正确的视图矩形。
更改相机位置。

但是我也不知道如何获得我需要完成的值，更不用说哪种方法更好了。

更新11/16/2018：

我已经对此功能进行了更新（基于https://github.com/w3dot0/three.js/blob/973bf1d40ef552dbf19c19654a79f70e2882563d/examples/misc_controls_zoom_to_mouse.html）：

zoomDirection = new THREE.Vector3();
function mousewheel(event) {
    event.preventDefault();
    var amount = event.deltaY / 100;
    var zoom = camera.zoom - amount;
    var offset = el.offset();
    ;
    var mX = amount > 0 ? 0 : ((event.clientX - offset.left) / renderer.domElement.clientWidth) * 2 - 1;
    var mY = amount > 0 ? 0 : -((event.clientY - offset.top) / renderer.domElement.clientHeight) * 2 + 1;

    zoomDirection.set(mX, mY, 0.001)
        .unproject(camera)
        .sub(camera.position)
        .multiplyScalar(amount / zoom);

    camera.position.subVectors(camera.position, zoomDirection);

    orthographictrackBallControls.target.subVectors(orthographictrackBallControls.target, webGl.zoomDirection);
    camera.zoom = zoom;
    camera.updateProjectionMatrix();
}

这似乎起初是可行的：相机放大到鼠标点，但随后在稍微缩放后相机开始“跳动”，而网格在屏幕上不再可见。

可能有帮助的事情：屏幕上还有一个轴帮手，当它按预期停止工作时也会“翻转”。加载场景时，X轴帮助器会向左指向，但是当我到达相机跳转的点并且不再看到网格时，X轴帮助器将向右指向。

此外，如果我先进行缩小，则可以在网格消失之前进一步放大。我不确定这一切加起来，但我将不胜感激。

Answer 1

在这种情况下，使用D3库及其缩放功能似乎是个好主意。但是在很多情况下放弃三项控制并不是一件容易的事。

如果您希望像Google Maps中那样进行缩放，则以下代码可能会有所帮助：

const cameraPosition = camera.position.clone();

// my camera.zoom starts with 0.2
if (zoomOld !== 0.2) {
  const xNew = this.curserVector.x + (((cameraPosition.x - this.curserVector.x) * camera.zoom) /zoomOld);
  const yNew = this.curserVector.y + (((cameraPosition.y - this.curserVector.y) * camera.zoom) /zoomOld);
  const diffX = cameraPosition.x - xNew;
  const diffY = cameraPosition.y - yNew;
  camera.position.x += diffX;
  camera.position.y += diffY;
  controls.target.x += diffX;
  controls.target.y += diffY;
}
zoomOld = camera.zoom;

您的其他问题可能是由frustum引起的。但我不知道，我仍然是Three xD的新手

Three.js OrthographicCamera-缩放到光标

1 个答案: