Question

我正在使用我们的THREE.js应用程序的正交相机。基本上，该相机将以2D形式向用户呈现场景（用户可以选择在2D和3D相机之间切换）。此摄像机将允许平移和缩放到鼠标点。我有平移工作，我有缩放工作，但没有缩放到鼠标点。这是我的代码：

import React from 'react';
import T from 'three';

let panDamper = 0.15;

let OrthoCamera = React.createClass({
  getInitialState: function () {
    return {
      distance: 150,
      position: { x: 8 * 12, y: 2 * 12, z: 20 * 12 },
    };
  },
  getThreeCameraObject: function () {
    return this.camera;
  },
  applyPan: function (x, y) { // Apply pan by changing the position of the camera
    let newPosition = {
      x: this.state.position.x + x * -1 * panDamper,
      y: this.state.position.y + y * panDamper,
      z: this.state.position.z
    };

    this.setState({position: newPosition});
  },
  applyDirectedZoom: function(x, y, z) {
    let zoomChange = 10;
    if(z < 0) zoomChange *= -1;
    let newDistance = this.state.distance + zoomChange;

    let mouse3D = {
      x: ( x / window.innerWidth ) * 2 - 1,
      y: -( y / window.innerHeight ) * 2 + 1
    };

    let newPositionVector = new T.Vector3(mouse3D.x, mouse3D.y, 0.5);
    newPositionVector.unproject(this.camera);
    newPositionVector.sub(this.camera.position);

    let newPosition = {
      x: newPositionVector.x,
      y: newPositionVector.y,
      z: this.state.position.z
    };

    this.setState({
      distance: newDistance,
      position: newPosition
    });
  },
  render: function () {
    let position = new T.Vector3(this.state.position.x, this.state.position.y, this.state.position.z);

    let left = (this.state.distance / -2) * this.props.aspect + this.state.position.x;
    let right = (this.state.distance / 2) * this.props.aspect + this.state.position.x;
    let top = (this.state.distance / 2) + this.state.position.y;
    let bottom = (this.state.distance / -2) + this.state.position.y;

    // Using react-three-renderer
    // https://github.com/toxicFork/react-three-renderer
    return <orthographicCamera
      {...(_.pick(this.props, ['near', 'far', 'name']))}
      position={position}
      left={left}
      right={right}
      top={top}
      bottom={bottom}
      ref={(camera) => this.camera = camera}/>
  }
});

module.exports = OrthoCamera;

发生了一些朝向鼠标点的变焦，但似乎不稳定。我想要保持2D视图，因此当我缩放时，我也移动相机（而不是具有非垂直目标，这会杀死2D效果）。

我从this question获取了线索。据我所知，我成功转换为mouse3D中的THREE.js坐标（请参阅this question的答案）。

因此，根据此设置，如何使用正交相机平滑地缩放到鼠标点（mouse3D）并保持二维视图？提前谢谢。

Answer 1

假设您有一个由世界坐标中的位置和观察（或枢轴）点描述的摄像机，那么在特定点放大（或远离）非常简单。

你的表现似乎更简单：只是一个位置/距离对。我没有看到旋转组件，所以我假设你的相机是一个自上而下的正交组件。

在这种情况下，您的观察点（您不需要）只是(position.x, position.y - distance, position.z)。

在一般情况下，您需要做的就是将摄像机位置和观察点移向缩放点，同时保持摄像机正常（即方向）。请注意，无论投影类型或相机旋转如何，这都将起作用。

如果您考虑一下，这正是您在3D中缩放点时所发生的情况。你一直看着同一个方向，但是你的目标越来越近（没有达到）。

例如，如果您想要缩放1.1倍，可以想象缩放将相机位置连接到缩放点的矢量1 / 1.1。

你可以通过简单插值来实现：

var newPosition = new THREE.Vector3();
newPosition.x = (orgPosition.x - zoomAt.x) / zoomFactor + zoomAt.x;
newPosition.y = (orgPosition.y - zoomAt.y) / zoomFactor + zoomAt.y;
newPosition.z = (orgPosition.z - zoomAt.z) / zoomFactor + zoomAt.z;

正如我上面所说，在你的情况下，你不需要更新一个观察点，然后计算新的距离。你的新距离将只是：

var newDistance = newPosition.y

应该这样做。

如果你想在位置/观察和位置/缩放点对之间设置最小和最大距离限制，它只会变得更复杂一些（主要是在一般情况下）。

THREE.js正交相机变焦到鼠标点

1 个答案: