ThreeJs创建天空盒_threejs天空盒子

ThreeJS创建天空盒比较简单，可以理解成给一个立方体贴图，所以需要给六个面分别贴图，6张图构建整个场景的图片。这六张图分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。ThreeJS会将这些图片整合到一起来创建一个无缝的环境贴图。代码如下：

const loader = new THREE.CubeTextureLoader()
 
const texture = loader.load([
 
  `/textures/sky/${this.type}/posx.jpg`,
 
  `/textures/sky/${this.type}/negx.jpg`,
 
  `/textures/sky/${this.type}/posy.jpg`,
 
  `/textures/sky/${this.type}/negy.jpg`,
 
  `/textures/sky/${this.type}/posz.jpg`,
 
  `/textures/sky/${this.type}/negz.jpg`,
 
])
 
this.scene.background = texture

效果如下：