首发于 gunters

切换模式

ThreeJS 创建天空盒 III

egghunters

CIM 让城市更美好

Web 三维渲染平台中的天空盒一般会用渐变色、贴图等方式实现。之前编者实现过渐变色天空盒，见

最近实现了贴图天空盒，贴图是贴在 three.js Scene 的背景上，其效果更好、更真实！实现前需准备前后左右上下6张贴图(后附下载地址)。

代码如下：

class SkyboxUtils
   * Creates skybox by 6 pictures. The texture should be assigned to scene.background.
   * Currently, there is only a 'cloudy' texture.
  public static async createSkyFromTextures(subFolder: string): Promise<THREE.CubeTexture> {
    var loader = new THREE.CubeTextureLoader();
    loader.setPath(`images/skybox/${subFolder}/`);
    // six pictures in order of: x, -x, y, -y, z, -z, aka, right, left, top, bottom, front, back
    const pictures = ["right.jpg", "left.jpg", "top.jpg", "bottom.jpg", "front.jpg", "back.jpg"];
    return new Promise<THREE.CubeTexture>((resolve, reject) => {
      loader.load(pictures, (t: THREE.CubeTexture) => resolve(t));