Javascript 如何在three.js中确定摄像机视场的三维边界

我有一个three.js场景，想知道视口的3D边界

例如，假设我有一块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
    }
}

---

要将对象放置在距离左侧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（标准化设备坐标）中的位置转换为世界坐标，NDC（标准化设备坐标）都在[-1,1]范围内

它基本上与以下图像（）相反，并将右图像（NDC）中的点转换回左图像（世界坐标）：

例如：

var canvas=document.getElementById（'canvas'）；
var scene=new THREE.scene（）；
var renderer=new THREE.WebGLRenderer（{canvas:canvas，antialas:true}）；
var摄像机=新的三视角摄像机（45，canvas.clientWidth/canvas.clientWidth，11000）；
var clock=新的三个时钟（）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:'#f00'，线框：true}）；
变量框=新的三个网格（几何体、材质）；
场景。添加（框）；
var周期=5；
var top=0.3；//30%
左变量=0.2；//20%
var深度=0.7；
render（）；
函数render（）{
请求动画帧（渲染）；
if（canvas.width！==canvas.clientWidth | | canvas.height！==canvas.clientHeight）{
renderer.setSize（canvas.clientWidth、canvas.clientHeight、false）；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
}
框。位置。设置（-1+2*左侧，1-2*顶部，深度）。取消投影（相机）；
box.rotation.y+=clock.getDelta（）*2*Math.PI/周期；
渲染器。渲染（场景、摄影机）；
}

html、正文、画布{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
显示：块；
}

---

回答得很好，很彻底。非常感谢！