Three.js：如何独立于相机裁剪始终渲染天空盒？

当然可以，不需要增大相机远裁剪面的前提下，有几种实用的方法能让天空盒（或任意网格）始终渲染：

• 利用天空盒特性缩小尺寸并调整渲染逻辑
  天空盒的核心是模拟无限远环境，无需设置4000的大尺寸。你可以将天空盒尺寸缩至远裁剪面以内（比如1999），渲染时把相机位置设为天空盒中心，同时让天空盒优先渲染，这样视觉上仍然是无限远的效果：

// 保存相机原始位置
const originalPosition = camera.position.clone();

// 渲染天空盒阶段
camera.position.set(0, 0, 0);
skyboxMesh.position.copy(camera.position);
skyboxMesh.renderOrder = -1; // 确保天空盒最先渲染
renderer.render(scene, camera);

// 恢复相机原始位置
camera.position.copy(originalPosition);

• 临时调整相机远裁剪面（仅针对天空盒渲染）
  在渲染天空盒前临时调大相机远裁剪面，完成后恢复原值，不会影响其他物体的渲染：

const originalFar = camera.far;
camera.far = 4000;
camera.updateProjectionMatrix(); // 必须更新投影矩阵使修改生效

skyboxMesh.renderOrder = -1;
renderer.render(scene, camera);

// 恢复相机参数
camera.far = originalFar;
camera.updateProjectionMatrix();

• 用Shader实现无限远天空盒
  自定义Shader，在片元着色器中直接根据相机方向采样天空盒纹理，完全不依赖网格尺寸。不管相机裁剪范围如何，天空盒都会始终显示：

// 顶点着色器
varying vec3 vWorldDirection;

void main() {
    vec4 worldPosition = modelViewMatrix * vec4(position, 1.0);
    vWorldDirection = normalize(worldPosition.xyz);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// 片元着色器
varying vec3 vWorldDirection;
uniform samplerCube skyboxTexture;

void main() {
    gl_FragColor = textureCube(skyboxTexture, normalize(vWorldDirection));
}

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