ThreeJs创建天空盒

墨蓝 2023-09-24 19:17 140阅读 0赞

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

  1. const loader = new THREE.CubeTextureLoader()
  3. const texture = loader.load([
  5.   `/textures/sky/${this.type}/posx.jpg`,
  7.   `/textures/sky/${this.type}/negx.jpg`,
  9.   `/textures/sky/${this.type}/posy.jpg`,
  11.   `/textures/sky/${this.type}/negy.jpg`,
  13.   `/textures/sky/${this.type}/posz.jpg`,
  15.   `/textures/sky/${this.type}/negz.jpg`,
  17. ])
  19. this.scene.background = texture

效果如下：

23e8d224cc6a7acbc5a88d78da21e9f1.gif

发表评论

表情：
评论列表 （有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ThreeJs创建天空盒

    ThreeJS创建天空盒比较简单，可以理解成给一个立方体贴图，所以需要给六个面分别贴图，6张图构建整个场景的图片。这六张图分别是朝前的（posz）、朝后的（negz）、朝上的（

    墨蓝墨蓝/ 0 赞/ 141 阅读

    相关 Direct-X学习笔记--天空盒

    学习了三维的地形系统之后，该抬头看看天空啦。下面学习一下传说中的三维天空系统。其实三维天空的实现比地形系统简单得多，我们只需要用一点点小伎俩，就可以蒙混大多数人。

    水深无声水深无声/ 0 赞/ 254 阅读

    相关 Unity3D开发游戏世界天空盒

    天空盒 ， 顾名思义是 给游戏场景 添加一个 天空背景 让游戏更加精美，更具有魅力 添加天空盒 有两种方式 1 ： 在当前相机上添加skybox 2 ： 在当前场景上添加

    朱雀朱雀/ 0 赞/ 411 阅读