【Three.js】Layers图层的使用

目录

前言

创建图层对象

启用图层

关闭图层

其他


前言

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)

### 使用 L7.js 加载 GLB 模型 L7 是一款基于 Three.js 的地图可视化库,主要用于地理空间数据的可视化。然而,在某些情况下,开发者可能希望利用 L7 来加载和展示三维模型如 GLB 文件。由于 L7 主要专注于地理位置相关的图形处理,并不直接提供针对通用 3D 模型的支持功能,因此需要借助底层的 Three.js 功能来实现这一目标。 为了在 L7 中加载 GLB 模型,可以采用如下方式: 1. **引入必要的依赖** 确保项目中已经包含了 `three` 和 `l7` 库以及 `GLTFLoader` 插件。如果使用的是模块化打包工具,则可以通过 npm 安装这些包。 ```bash npm install three l7 @loaders.gl/gltf ``` 2. **编写加载逻辑** 下面是一个简单的例子,展示了如何在一个 L7 场景内加载并显示一个名为 "Soldier.glb" 的模型[^1]。 ```javascript import * as THREE from 'three'; import { SceneLayer } from '@antv/l7-layers'; import { Map } from '@antv/l7-maps'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // 创建地图实例 const map = new Map('container', { pitch: 45, style: 'light', }); // 添加自定义图层用于承载ThreeJS对象 class ModelLayer extends SceneLayer { buildModels() { this.layerModel = this.buildLayerModel({ moduleName: 'model-layer', vertexShader: '', fragmentShader: '' }); } async loadGlbModel(url) { const loader = new GLTFLoader(); await loader.loadAsync(url).then((gltf) => { // 设置模型位置使其位于指定坐标处 gltf.scene.position.set(0, 0, 0); // 调整缩放比例适应视窗大小 gltf.scene.scale.setScalar(0.01); // 将模型加入到场景树结构当中 this.getScene().addObjectToRootGroup(gltf.scene); }).catch(error => console.error('An error happened.', error)); } } // 实例化自定义layer并将之添加至map上 const modelLayer = new ModelLayer({}); await modelLayer.loadGlbModel('/path/to/models/Soldier.glb'); map.addLayer(modelLayer); ``` 上述代码片段首先创建了一个继承自 `SceneLayer` 类的新类 `ModelLayer`,该类重写了父类中的部分方法以便能够支持外部资源(这里是 `.glb` 文件)的导入操作。接着通过覆盖 `buildModels()` 方法为空壳子程序设置着色器字符串占位符,实际渲染工作交由 Three.js 处理而不是依靠默认管线完成。最后一步是在构造函数内部调用了异步加载函数 `loadGlbModel()` 并传入所需加载的目标路径作为参数。 需要注意的是,这段代码假设读者具备一定的前端开发经验并且熟悉 JavaScript Promise/A+ 规范下的异步编程模式。此外,对于具体应用而言还需要考虑诸如错误处理机制、性能优化措施等方面的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值