关于threejs天空盒子的使用

创建场景添加天空盒子相关代码如下：

var scene = new THREE.Scene() //创建场景
    var path = 'static/surround/'
    //注意加载的图片是有顺序的，分别是：右 => 左 => 上 => 下 => 前 => 后 六张宽高、格式相同的图片
    //我们可以想象一下一个正方体盒子，而我们的模型就位于正方体盒子内部一样。
    var urls = [
    path + '4.jpg',
    path + '3.jpg',
    path + '5.jpg',
    path + '6.jpg',
    path + '1.jpg',
    path + '2.jpg'
  ]
var textureCube = new THREE.CubeTextureLoader().load(urls)
textureCube.encoding = THREE.sRGBEncoding
scene.background = textureCube //添加天空盒子环境贴图 做背景使用

加载模型相关代码

var loader = new THREE.GLTFLoader() //实例化 gltf 加载器
    loader.load('static/threeD/screen/bengfang.gltf', obj => { //加载模型
    obj.scene.scale.set(0.06, 0.06, 0.06)
      obj.scene.traverse(gltf => {
      	if (gltf.isMesh) { //模型材质相关设置
          // 此处设置为scene.background 模型材质将和背景相同
          gltf.material.envMap = textureCube //天空盒子只对模型起作用
          // gltf.material.emissive = gltf.material.color
        }
     })
    scene.add(obj.scene) //场景中添加模型文件
})

效果图如下：

我们可以你看到天空盒子 环境贴图对模型和背景都起到了作用

有些场景下我们不需要天空盒子当背景使用，但依然对模型起作用该怎么实现呢? 很简单，去掉天空盒子当背景使用的相关代码就OK 了

// 添加天空盒子环境贴图 做背景使用
scene.background = textureCube

此时我们可以看到天空盒子环境贴图已经去掉了，但依然对模型起作用。