目录
前言
创建图层对象
启用图层
关闭图层
其他
前言
Layers 对象为Object3D对象分配了1-32个图层，编号为0-31。在内部实现上，每个图层对象被存储为一个bit mask， 默认所有 Object3D 对象都存储在第 0 个图层上。
图层对象可以用于控制对象的显示，和相机处于同一个图层的物体才可以被显示出来。
每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。Mesh、Camera、Group等都继承自基类 Object3D，所以它们都有一个 layers 属性。
创建图层对象
通过构造函数 Layers() 可以创建一个新的图层对象，该对象默认与第 0 图层关联。
每个图层都被存储为一个32位的BitMask（掩码），启用了哪个图层，哪个位置的比特位就为1，其余为0。可以同时启用多个图层。
const layers = new THREE.Layers()console.log(`默认图层0, mask值为: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)for (let i = 0; i < 10; ++i) {layers.set(i)console.log(`layers.set(${i}) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)}layers.set(0)layers.enableAll()console.log(`layers.enableAll() -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)layers.disableAll()console.log(`layers.disableAll() -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)layers.enable(2)console.log(`layers.enable(2) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)layers.disable(2)console.log(`layers.disable(2) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)for (let i = 0; i < 3; ++i) {layers.toggle(i)console.log(`layers.toggle(${i}) -> layers.mask: ${layers.mask} ---> 对应二进制:${layers.mask.toString(2)}`)}打印结果：
启用图层
.enable(layerNum) 增加一个layerNum图层的显示
.set(layerNum) 删除原来设置的图层，启用layerNum图层
.toggle(layerNum) 切换图层，开启或关闭layerNum图层
.enableAll() 启用全部图层
<template><div class="app"><div id="three"></div><div class="btns"><button @click="setLayer(0)">layers.set(0)</button><button @click="setLayer(1)">layers.set(1)</button><button @click="setLayer(2)">layers.set(2)</button><br><button @click="enableLayer(0)">layers.enable(0)</button><button @click="enableLayer(1)">layers.enable(1)</button><button @click="enableLayer(2)">layers.enable(2)</button><br><button @click="toggleLayer(0)">layers.toggle(0)</button><button @click="toggleLayer(1)">layers.toggle(1)</button><button @click="toggleLayer(2)">layers.toggle(2)</button><br><button @click="enableAll">layers.enableAll()</button><button @click="reset">重置</button></div></div>
</template><script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'const camera = ref(null)
onMounted(() => {const threeContainer = document.getElementById('three')// 创建场景const scene = new THREE.Scene()// 创建相机camera.value = new THREE.PerspectiveCamera( 75, threeContainer.offsetWidth / threeContainer.offsetHeight, 0.1, 1000 )// const camera = new THREE.OrthographicCamera(// -5*threeContainer?.offsetWidth / threeContainer?.offsetHeight, // 5*threeContainer?.offsetWidth / threeContainer?.offsetHeight, // 5, -5, // 0.1, // 1000 // ) //正交视角// 设置相机位置camera.value.position.set(0, 0, 10)// 将相机添加到场景中scene.add(camera.value)// 创建渲染器const renderer = new THREE.WebGLRenderer({antialias: true //开启抗锯齿})// 设置渲染的尺寸和大小renderer.setSize(threeContainer.offsetWidth, threeContainer.offsetHeight)// 将webgl渲染的canvas内容添加到DOM容器threeContainer.appendChild(renderer.domElement)/*创建几何体*/ const cubeGeometry = new THREE.BoxGeometry(1, 1, 1) //几何体对象const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }) //材质const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) //根据几何体和材质创建物体// 将几何体添加到场景当中scene.add(cube)cube.layers.set(0)const cubeGeometry1 = new THREE.BoxGeometry(1, 1, 1) //几何体对象const cubeMaterial1 = new THREE.MeshBasicMaterial({ color: 'hotpink' }) //材质const cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1) //根据几何体和材质创建物体// 将几何体添加到场景当中scene.add(cube1)cube1.position.set(1,0,0)cube1.layers.set(1)const cubeGeometry2 = new THREE.BoxGeometry(1, 1, 1) //几何体对象const cubeMaterial2 = new THREE.MeshBasicMaterial({ color: 'skyblue' }) //材质const cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2) //根据几何体和材质创建物体// 将几何体添加到场景当中scene.add(cube2)cube2.position.set(2,0,0)cube2.layers.set(2)// 添加坐标轴辅助器const axesHelper = new THREE.AxesHelper(5)scene.add(axesHelper)axesHelper.layers.enableAll()// 轨道控制器const controls = new OrbitControls(camera.value, renderer.domElement)// 循环渲染function animate() {requestAnimationFrame(animate)renderer.render(scene, camera.value)controls.update()}animate()window.addEventListener("resize", () => {// 更新摄像头camera.value.aspect = threeContainer.offsetWidth / threeContainer.offsetHeight// 更新摄像机的投影矩阵camera.value.updateProjectionMatrix()// 更新渲染器renderer.setSize(threeContainer.offsetWidth, threeContainer.offsetHeight)// 设置渲染器的像素比renderer.setPixelRatio(threeContainer.devicePixelRatio)})
})const setLayer = (num) => {camera.value.layers.set(num)
}
const enableLayer = (num) => {camera.value.layers.enable(num)
}
const toggleLayer = (num) => {camera.value.layers.toggle(num)
}
const enableAll = () => {camera.value.layers.enableAll()
}
const reset = () => {camera.value.layers.disableAll()camera.value.layers.set(0)
}
</script><style lang="scss" scoped>
.app{width: 100vw;height: 100vh;position: relative;#three{width: 100%;height: 100%;background-color: skyblue;}.btns{position: absolute;top: 10px;right: 20px;button{cursor: pointer;margin-right: 10px;margin-top: 10px;}}
}
</style>上述代码设置三个物体的图层分别为0、1、2，然后通过控制相机所在图层来控制物体显示和隐藏。
关闭图层
.disable(layerNum) 删除layerNum图层
.disableAll() 关闭所有图层
<div class="btns"><button @click="enableAll">layers.enableAll()</button><br><button @click="hideLayer(0)">layers.disable(0)</button><button @click="hideLayer(1)">layers.disable(1)</button><button @click="hideLayer(2)">layers.disable(2)</button><br><button @click="disableAll">layers.disableAll()</button></div>const enableAll = () => {camera.value.layers.enableAll()
}
const hideLayer = (num) => {camera.value.layers.disable(num)
}
const disableAll = () => {camera.value.layers.disableAll()
}
其他
.test(layers) 如果传入图层对象与当前对象属于相同的一组图层，则返回 true，否则返回 false。
.isEnabled(layerNum) 如果layerNum层已启用，则返回true。
console.log('cube&&camera', cube.layers.test(camera.value.layers));
console.log('cube1&&camera', cube1.layers.test(camera.value.layers));
console.log('cube2&&camera', cube2.layers.test(camera.value.layers));/*
打印结果：
cube&&camera true
cube1&&camera false
cube2&&camera false
*/const enableAll = () => {camera.value.layers.enableAll()console.log(camera.value.layers.isEnabled(0),camera.value.layers.isEnabled(1),camera.value.layers.isEnabled(2),camera.value.layers.isEnabled(3),camera.value.layers.isEnabled(31)); //true true true true true
}
