admin管理员组

文章数量:814304

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

效果如下:

本文标签: ThreeJs创建天空盒