如何在Three.js中让纹理四边形填满正交相机的整个视锥体？

核心逻辑 #

正交相机的视锥体是轴对齐矩形，只要让四边形顶点精准对应视锥体四个角落，就能完全覆盖视口，消除背景间隙。

最简实现步骤 #

1. 使用标准化设备坐标（NDC）定义全屏顶点 #

直接用NDC的[-1,1]范围定义四边形顶点，正交相机的投影矩阵会自动将其映射到屏幕视口，无需额外计算：

// 顶点数据：位置（x,y） + UV坐标（u,v）
float vertices[] = {
    -1.0f,  1.0f,   0.0f, 1.0f, // 左上
     1.0f,  1.0f,   1.0f, 1.0f, // 右上
     1.0f, -1.0f,   1.0f, 0.0f, // 右下
    -1.0f, -1.0f,   0.0f, 0.0f  // 左下
};

2. 配置渲染状态 #

• 关闭深度测试（如glDisable(GL_DEPTH_TEST)），确保四边形始终处于最上层，不会被场景其他物体遮挡。
• 正交相机的视图矩阵设为单位矩阵即可，无需额外视图变换；投影矩阵需匹配当前视口/窗口尺寸。

3. 纹理映射校验 #

确保UV坐标与顶点一一对应，避免纹理拉伸错位；若使用不透明纹理，无需开启混合，进一步简化流程。

替代直观方案（基于相机边界计算） #

如果已知正交相机的左、右、上、下边界参数，可直接用这些值定义顶点：

// 假设相机参数：left, right, bottom, top
float vertices[] = {
    left,  top,    0.0f, 1.0f,
    right, top,    1.0f, 1.0f,
    right, bottom, 1.0f, 0.0f,
    left,  bottom, 0.0f, 0.0f
};

这种方式顶点直接对应视锥体角落，同样能实现无间隙覆盖。

内容的提问来源于stack exchange，提问作者nickponline