【Three.js】Layers图层的使用

目录

前言

创建图层对象

启用图层

关闭图层

其他

---

前言

Layers 对象为Object3D对象分配了1-32个图层，编号为0-31。在内部实现上，每个图层对象被存储为一个bit mask， 默认所有 Object3D 对象都存储在第 0 个图层上。

图层对象可以用于控制对象的显示，和相机处于同一个图层的物体才可以被显示出来。

每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。Mesh、Camera、Group等都继承自基类 Object3D，所以它们都有一个 layers 属性。

创建图层对象

通过构造函数 Layers() 可以创建一个新的图层对象，该对象默认与第 0 图层关联。

每个图层都被存储为一个32位的BitMask（掩码），启用了哪个图层，哪个位置的比特位就为1，其余为0。可以同时启用多个图层。

  const layers = new THREE.Layers()
  console.log(`默认图层0, mask值为: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)

  for (let i = 0; i < 10; ++i) {
    layers.set(i)
    console.log(`layers.set(${i}) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)
  }
  layers.set(0)

  layers.enableAll()
  console.log(`layers.enableAll() -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)

  layers.disableAll()
  console.log(`layers.disableAll() -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)

  layers.enable(2)
  console.log(`layers.enable(2) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)
  layers.disable(2)
  console.log(`layers.disable(2) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)

  for (let i = 0; i < 3; ++i) {
    layers.toggle(i)
    console.log(`layers.toggle(${i}) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)
  }

打印结果：

启用图层

.enable(layerNum) 增加一个layerNum图层的显示

.set(layerNum) 删除原来设置的图层，启用layerNum图层

.toggle(layerNum) 切换图层，开启或关闭layerNum图层

.enableAll() 启用全部图层

上述代码设置三个物体的图层分别为0、1、2，然后通过控制相机所在图层来控制物体显示和隐藏。 

关闭图层

.disable(layerNum) 删除layerNum图层

.disableAll() 关闭所有图层

    

      layers.enableAll()
      

      layers.disable(0)
      layers.disable(1)
      layers.disable(2)
      

      layers.disableAll()
    

const enableAll = () => {
  camera.value.layers.enableAll()
}
const hideLayer = (num) => {
  camera.value.layers.disable(num)
}
const disableAll = () => {
  camera.value.layers.disableAll()
}

其他

.test(layers) 如果传入图层对象与当前对象属于相同的一组图层，则返回 true，否则返回 false。 

.isEnabled(layerNum) 如果layerNum层已启用，则返回true。

console.log('cube&&camera', cube.layers.test(camera.value.layers));
console.log('cube1&&camera', cube1.layers.test(camera.value.layers));
console.log('cube2&&camera', cube2.layers.test(camera.value.layers));

/*
打印结果：
cube&&camera true
cube1&&camera false
cube2&&camera false
*/

const enableAll = () => {
  camera.value.layers.enableAll()
  console.log(
    camera.value.layers.isEnabled(0),
    camera.value.layers.isEnabled(1),
    camera.value.layers.isEnabled(2),
    camera.value.layers.isEnabled(3),
    camera.value.layers.isEnabled(31)
  ); //true true true true true 
}