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

发布于 2021-07-14 21:25:54 字数 2296 浏览 1705 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

0 文章
0 评论
24490 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。