Skip to content

内容选中


场景相关章节中我们介绍了场景相关的能力,在这一章节以及接下来的章节中我们将介绍内容相关的内容。

在具体对模型内容(构件、几何体、面、点)进行操作(调整)之前,我们必须知道用户选中了哪些内容,所以在这一章节中将介绍如何选中内容(构件、几何体、面、点)。

实现内容选中大致分为如下步骤:

  1. 完成初始化F-BIM
  2. 设置内容选中模式(默认为构件模式)
  3. Scene 实例上的 scene_context 添加 select 事件监听器

注意

默认情况下,F-BIM 的内容选中模式为构件模式(也就是选中事件只针对构件这一最大维度进行),实际上 F-BIM 提供了(构件、几何体、面、点)四个维度的内容选中模式并允许我们修改默认值。不同内容选中模式下 select事件 返回的结果不尽相同,具体可在下方示例得知。

提示

注意观察依次点击下面四个示例中模型的同一位置时控制台输出的变化。

告知

为方便确认内容选中效果,下方所有示例代码将会对选中内容(点除外)进行红色选中高亮。
为避免初始化 F-BIM 逻辑占用太多代码行数, Scene 初始化已移至 scene.js 完成,其导出的 scene 已完成初始化,highlight.js 为设置高亮相关代码(暂时忽略,后续章节介绍)。

构件选中

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

几何体选中

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

面选中

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

点选中

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

总结

由此可见,F-BIM 可以进行(构件、几何体、面、点)四个维度的内容选中,四个维度的大小关系依次为 构件>几何体>面>点,当把 F-BIM 的内容选中模式设置为下一维度时,select 事件回调中其本身及其之上所有维度的选中内容均将返回(eg:内容选中模式为‘面’模式时,select 事件回调将返回选中的‘面’、‘几何体’、‘构件’)。

蜀ICP备2023032665号 四川观筑数智科技有限公司