WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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,具体点说就是它们的图层属性.layersLayers对象表示的图层都是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);
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com