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

网格模型对象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);