Skip to content
目录

实体与层级

实体 是指组成3D场景的各种模型元素,比如一张桌子、一棵树木、一栋建筑等等。 实体 类对象都继承自 Entity

层级 是指当前3D场景显示的元素整体, 层级 也是 实体 对象, 层级 包含 园区Campus建筑Building楼层Floor 3个 实体

另外,还有一个常用名词 物体 。在 GlowJS 中, 物体 特指 物体Thing

唯一标识

id 属性是实体对象的唯一标识,常用于数据绑定,它是 string 类型。 app 对象有一个 getEntityById 方法,可以通过 id 获取到实体对象。

实体名称

name 属性表示实体名称,它是 string 类型,可在 GlowJS 场景编辑器中修改实体名称。

标签

tags 属性表示实体标签,它是 Map<string> 类型,可在 GlowJS 场景编辑器中编辑物体的标签。场景中的物体对象非常多,并不是所有物体都要进行交互操作,标签常用来 过滤 物体,只对包含指定标签的物体赋予有关交互功能。 [标签应用示例]

子元素

实体对象可以有自己的子元素, children 属性表示子元素,它是 Enitity 数组类型。另外, 层级 实体有专门的分类子元素属性。

园区Campus

园区Campus 继承自 楼层Floor ,拥有楼层所有分类子元素属性,它还有如下自定义分类子元素属性。

自定义建筑列表。

建筑Building

  • floorsFloor 数组类型

楼层列表。

外立面。

楼层Floor

  • cornersCorner 数组类型

墙角列表。

  • wallsWall 数组类型

墙列表。

  • roomsRoom 数组类型

房间列表。

摆件列表。

  • pathsPath 数组类型

路径列表

其它实体列表。

层级管理器levelMgr

层级管理器levelMgr位于 app 对象,它是 LevelMgr 类型,专门负责层级切换。

属性campuses

园区列表。 Campus 数组类型。

属性current

当前层级。 Entity 类型。为空时值为 null

属性previous

前一个层级。 Entity 类型。为空时值为 null

方法change

typescript
async change(
    level: Entity,
    fit: boolean = true,
    callback?: () => void
    ): Promise<void>;

切换到指定层级,异步方法。 [场景层级切换示例]

异步返回 void 类型。

参数

层级。

  • fitboolean

自适应。 boolean 类型,默认值 true

  • callback() => void

切换完成后的回调函数。

层级切换

方法back

typescript
back(): void;

返回到上一层级(父层级)。

返回 void 类型。

无参数。

层级事件

可以通过层级事件来进行初始化、层级控制等操作。层级事件通过 app 实例对象注册。事件详细介绍请参考 事件类EventDispatcher

LevelCreate

层级创建事件,仅触发一次,一般用于 初始化 操作。在 app 实例对象调用 load 方法加载场景文件并创建层级后触发该事件。

typescript
app.on(GLOW.EventType.LevelCreate, () => {
    //在这里执行一些初始化操作
    ......
});

BeforeLevelLoad

层级加载前事件。当 levelMgr 调用 change 方法切换场景后,在新层级外观创建之前触发该事件。

typescript
app.on(GLOW.EventType.BeforeLevelLoad, () => {
    //在这里执行一些控制操作
    ......
});

AfterLevelLoad

层级加载后事件。当 levelMgr 调用 change 方法切换场景后,在新层级外观创建完成后触发该事件。

typescript
app.on(GLOW.EventType.AfterLevelLoad, () => {
    //在这里执行一些控制操作
    ......
});

LevelLoadProgress

层级加载进度事件,用来实现自定义层级加载进度条功能。当 levelMgr 调用 change 方法切换场景后,会多次触发该事件。 [完整进度条示例]

typescript
app.on(GLOW.EventType.LevelLoadProgress, ev => {
    //转换成百分比并设置到进度条
    let percent: string = (ev.data * 100).toFixed(0);
    bar.setAttribute('style', `--precent:${percent}`);
});

进度条

楼层展开与合并

我们期望,当从园区切换到自定义建筑时,可以展开楼层,这个时候可以调用 building 实体对象的 expandFloors 方法;当从自定义建筑切换回园区层级时,可以先合并楼层,这时可以调用 building 实体对象的 unexpandFloors 方法。 [楼层展开与合并示例]

typescript
building.expandFloors(); //展开楼层
building.unexpandFloors(); //合并楼层

楼层展开与合并

技术支持:13352865103(柯工,微信同号);18688783852(柯工)