Three.js使用大球体做球形天空盒时出现内部黑球、大半径不可见问题

你遇到的两个问题核心都和透视相机视锥体裁剪逻辑、材质配置有关，具体解决步骤如下：

• 调整透视相机远裁剪面参数
  PerspectiveCamera默认far（远裁剪面）参数通常为1000~2000，视锥体内只有距离相机near到far范围的物体才会被渲染，超出范围的部分会被直接裁剪。你使用半径900的天空球时，当相机被拉远到一定距离，天空球的远端部分会超出远裁剪面范围，就会形成视野中心的黑球；当天空球半径设为1800时，整个球体都超出远裁剪面范围，就会完全消失。
  初始化相机时调大far参数即可解决裁剪问题，示例：

  // 参数依次为：视场角、宽高比、近裁剪面、远裁剪面
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000)
  

• 优化天空盒材质配置
  你当前使用的MeshPhongMaterial为受光照影响的材质，若场景光照不足会出现明暗渲染异常，天空盒属于环境背景无需响应光照，替换为MeshBasicMaterial直接显示纹理即可，同时关闭深度写入避免天空盒遮挡近景对象。
• 限制控制器最大拖拽距离
  设置OrbitControls.maxDistance为小于天空球半径的数值，避免相机拖拽到天空球外侧导致看不到内部纹理。

修正后的完整实现代码：

// 可直接设置更大的天空球半径，例如5000
let skyboxGeom = new SphereGeometry(5000, 128, 128)
let skyboxMat = new THREE.MeshBasicMaterial({map: spaceTexture});
skyboxMat.side = THREE.BackSide
// 关闭深度写入，避免天空盒遮挡近景对象
skyboxMat.depthWrite = false
let skybox = new THREE.Mesh(skyboxGeom, skyboxMat);
skybox.position.set(0,0,0)
mainScene.add(skybox)

// 调整控制器最大距离，避免相机超出天空球范围
controls.maxDistance = 4500

问题效果图：

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