Three.js 图层 Layers 对象和 .layers 属性

Question

网格模型对象 Mesh、相机对象 Camera、组对象 Group 等都具有从基类 Object3D 继承的图层属性 .layers，图层属性 .layers 的属性值是图层对象 THREE.Layers。

THREE.Layers

图层对象 Layers 可以分配 32 个编号，编号为 0~31，通过图层对象 .set(编号) 方法可以设置图层对象编号，执行图层对象的.set()方法，改变的是图层对象的 .mask 属性，比如设置 .set(0)，.mask 属性值是1，设置 .set(1)，.mask 属性值是2，设置.set(2)，.mask属性值是3，设置 .set(2)，.mask 属性值是4，设置 .set(4)，.mask 属性值是8...

.set() 方法的参数可以理解为二进制中右侧1向左平移的位数，得到的值赋值给图层对象的 .mask 属性。

// 创建一个图层对象
let layer = new THREE.Layers();
// 设置图层为3
layer.set(3)
Mesh.layers = layer;
// 控制台可以查看mask值是8，表示的就是图层3
console.log(layer.mask)

模型对象和相机对象创建的时候，默认就会执行下面代码设置 .layers 属性

// 创建一个图层对象
let layer = new THREE.Layers();
// 默认设置图层为0
layer.set(0)
Mesh.layers = layer;

图层对象 Layers 可用于控制可见性,通过Three.js渲染器渲染场景的时候，场景中的模型对象图层必须和相机对象的图层一样，模型对象才会被渲染出来，一般默认情况下，网格 Mesh 等模型对象和相机对象 Camera 默认的图层都是0，具体点说就是它们的图层属性.layers值Layers对象表示的图层都是0，0层对应的 .mask 属性值是1.

代码案例

下面代码案例创建了两个网格模型对象，默认的图层都是0和相机对象一样，都会被渲染到画布上，如果把其中一个网格模型的图层值设置为非0，比如3，因为和相机对象的图层0不一样，就不会被渲染出来。

var box1 = new THREE.BoxGeometry(50, 5, 50);
var material1 = new THREE.MeshLambertMaterial({
  color: 0x0000ff
});
var mesh1 = new THREE.Mesh(box1, material1);
// 网格模型1默认图层是0，对应掩码是1
console.log('查看网格模型默认图层', mesh1.layers.mask);
var box2 = new THREE.CylinderGeometry(5, 5, 100, 32);
var material2 = new THREE.MeshLambertMaterial({
  color: 0xff0000
}); //材质对象
var mesh2 = new THREE.Mesh(box2, material2); //网格模型对象
// 设置网格模型2的图层，如果set方法设置为0和相机一样，渲染的时候会显示
// 如果set参数设置的图层和相机不同，渲染的时候不会显示
// 把参数0改变为1~31任何一个数，网格模型2都不会被渲染出来
mesh2.layers.set(0); // 如果没有创建layer他会自动创建
// set的参数表示1平移的位数，得到的值赋值给mask
// set设置图层对应的掩码mask值，1-2 2-4  3-8  2-16...
// 设置图层后，查看图层对应的掩码值
console.log('查看网格模型默认图层掩码值',mesh2.layers.mask);
scene.add(mesh1, mesh2);