如何在three.js中确定相机视野的三维边界

Question

我有一个three.js场景，想知道视口的三维边界。

例如，假设我有一个宽度为500像素、高度为1000像素的画布。我的相机看着位置{ 0, 0, 0 }，并且位于{ 0, 0, 100 }的位置;

我的相机永远不会移动。

假设我有一个位于{ 0, 0, 0 }的对象。我需要能够将该对象移动到可见区域内的各个点（在相机视野内）。如何计算相机视野的左上角位置？还有，如何计算距离相机视野左侧20％，距离顶部10％的位置？

这是我的相机对象：

{
    "object": {
        "uuid": "E26C5F88-CD17-45F8-A492-F3DD704949BF",
        "type": "PerspectiveCamera",
        "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 100, 1],
        "zoom": 1,
        "fov": 50,
        "aspect": 0.625,
        "near": 0.1,
        "far": 1000
    }
}

- swatkins

Answer 1

要将对象距离左侧20％，并距离顶部向下10％，您可以使用以下代码：

var left = 0.2;
var top = 0.1;
var depth = 0.7; // from -1 to 1, depends how far into the scene you want the object, -1 being very close, 1 being the furthest away the camera can see
object.position.set( -1 + 2 * left, 1 - 2 * top, depth ).unproject( camera );

这将把一个NDC（标准化设备坐标），其范围在[-1，1]之间的位置转换为世界坐标。

它本质上执行以下图像的反向操作（源），并将右侧图像（NDC）中的点转换回左侧图像（世界坐标）：

例如:

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
var clock = new THREE.Clock();

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: '#f00', wireframe: true});
var box = new THREE.Mesh(geometry, material);

scene.add(box);

var period = 5;
  
var top = 0.3; // 30%
var left = 0.2; // 20%
var depth = 0.7;

render();

function render() {
  requestAnimationFrame(render);
  
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    camera.aspect = canvas.clientWidth /  canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  
  box.position.set(-1 + 2 * left, 1 - 2 * top, depth).unproject(camera);
  box.rotation.y += clock.getDelta() * 2 * Math.PI / period;
  
  renderer.render(scene, camera);
}

html, body, canvas {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<canvas id="canvas"></canvas>

- Brendan Annable

---

非常好的、详尽的回答。非常感谢！ - swatkins