three.js 模型加載添加天空盒

1、場景添加天空盒最簡單方式

// 默認您已經創建了相機和渲染器，就直接在場景上加入背景就行
this.scene = new Scene();  // 創建一個場景，
this.scene.background = new CubeTextureLoader()
    .setPath('assets/img/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg', ])

2、走過的彎路，不建議大家使用下面方法，具體兩者應用場景區別我不太清楚，有大佬明白歡迎留言

// 添加全景圖
  public addPanorama() {
    const imgUrl = ['assets/img/nx.jpg', 'assets/img/ny.jpg', 'assets/img/nz.jpg', 'assets/img/px.jpg',
      'assets/img/py.jpg', 'assets/img/pz.jpg']
    const textures = this.getTexturesFromAtlasFile( imgUrl, 6 );
    const materials = [];

    for ( let i = 0; i < 6; i ++ ) {

      materials.push( new MeshBasicMaterial( { map: textures[ i ] } ) );

    }

    const skyBox = new Mesh( new BoxBufferGeometry( 1024, 1024, 1024 ), materials );
    // skyBox.position.set(0, 0, 0);
    skyBox.geometry.scale( 1, 1, -1 );
    this.scene.add( skyBox );
  }

  // 六個面添加圖片
  getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {

    const textures = [];

    for ( let i = 0; i < tilesNum; i ++ ) {

      textures[ i ] = new Texture();

    }
    const imageObj = new Image();

    imageObj.onload =  () => {
      let context;
      // let tileWidth = imageObj.height;
      // let tileWidth = 5000;

      for ( let i = 0; i < textures.length; i ++ ) {

        const canvas = document.createElement( 'canvas' );
        // const canvas: HTMLCanvasElement = this.canvasRef.nativeElement;  // 得到canvas 元素
        context = canvas.getContext( '2d' );
        const canvasHeight = 1024;
        canvas.height = canvasHeight;
        canvas.width = canvasHeight;
        // context.drawImage( imageObj, canvasHeight * i, 0, canvasHeight, canvasHeight, 0, 0, canvasHeight, canvasHeight );
        context.drawImage( imageObj, 0, 0, canvasHeight, canvasHeight );
        textures[ i ].image = canvas;
        textures[ i ].needsUpdate = true;
      }

    };
    imageObj.src = atlasImgUrl[0]; // 只用了一張圖片，天空盒上下左右前後圖片相同，有需求可以自更改爲六張不同圖片
    return textures;

  }

注意：這是兩種加載天空盒方法，第一種也是最簡單的，我不知道第二種應用場景，有大佬可以留言相告，感激不盡