示例

不设置任何layers时，会显示两个正方体，默认的，所有 Object3D 对象都存储在第 0 个图层上。

现在我把红色正方体设置到图层1
object.layers.set(1)

  function _createBox1() {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
      color: "red",
      map: loadTexture("/img/木纹.png")
    });
    const object = new THREE.Mesh(geometry, material);
    object.position.set(0, 0, 0);

    scene.value?.add(object);
    //设置图层1
    object.layers.set(1);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

因为相机默认看向的是图层0，所有图层1的红色正方体就不可见了

这里我用gui写了个控制

 function initGui() {
    gui = new GUI();
    const layers = {
      显示红色() {
        camera.value?.layers.enable(1);
      },
    };
    gui.add(layers, "显示红色");

  }
1
2
3
4
5
6
7
8
9
10

也可以写成toggle切换显示隐藏

function initGui() {
    gui = new GUI();
    const layers = {
      "显示/隐藏红色"() {
        camera.value?.layers.toggle(1);
      },
    };
    gui.add(layers, "显示/隐藏红色");
  }
1
2
3
4
5
6
7
8
9

基础知识

Layers 对象为 Object3D 分配 1个到 32 个图层。32个图层从 0 到 31 编号标记。 在内部实现上，每个图层对象被存储为一个 bit mask， 默认的，所有 Object3D 对象都存储在第 0 个图层上。
图层对象可以用于控制对象的显示。当 camera 的内容被渲染时与其共享图层相同的物体会被显示。每个对象都需要与一个 camera 共享图层。
每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。

• mask属性，用 bit mask 表示当前图层对象与 0 - 31 中的哪些图层相对应。所属层所对应的比特位为 1，其他位位 0。

enableAll显示所有图层

camera.value?.layers.enableAll();
1

disableAll隐藏所有图层

camera.value?.layers.disableAll();
1

enable显示单个图层

camera.value?.enable(1)
1

disable隐藏单个图层

camera.value?.disable(1)
1

set将对象设置成对应的图层

object.set(3)
1

toggele方法，切换图层

会在传入的参数图层何默认图层之间切换

camera.value?.layers.toggle(1);
1