关于前端:从零开始学习3D可视化之场景层级1

3次阅读

共计 1228 个字符,预计需要花费 4 分钟才能阅读完成。

1、开启场景层级管制
2、父子树和分类对象属性树
3、切换场景层级
在 3D 可视化场景中加载园区后零碎会主动创立园区、修建、楼层、房间等物体对象,这些对象也天然把场景分成了不同的层级,场景提供了层级构造,能够通过我上面介绍的办法,来管制场景层级。那么层级构造有什么用呢?能够更方便管理和查问到场景中物体;能够批量操作物体,比方挪动父物体能够带着孩子一起挪动等等。

1、开启场景层级管制

首先将上面的代码输出到我的项目文件中,即可开启 ThingJS 3D 可视化示例园区的场景层级管制性能。

// 加载 ThingJS 示例园区
var app = new THING.App({url: 'models/storehouse'})
// 通过 load 事件加载园区信息,并开启场景层级管制
app.on('load', function(ev) {app.level.change(ev.campus)
})

运行我的项目文件后,在预览窗口,鼠标左键双击 3D 可视化园区内的修建,即可进入修建外部。点击鼠标右键,退出修建。鼠标左键双击模型(如小车、叉车等),可聚焦到模型,点击鼠标右键,退出聚焦模式。图中所示为鼠标左键双击小车后的聚焦成果。

还有一个办法就是通过场景信息来进入层级切换,工具栏的场景信息对应的就是 CampusBuilder 中搭建的园区的物体(或对象)信息。
场景信息中,显示以后场景的父子树和分类对象属性树,可按名称、ID 以及属性,搜寻场景中的对象。点击对象右侧的定位按钮,就能够定位到此对象。

2、父子树和分类对象属性树

父子树和分类对象属性树是 ThingJS 提供的两套层级体系,便于管理和查问场景中的物体和批量操作,比方挪动父物体时子物体能够一起挪动。
父子树层级体系中,通过 children 拜访到上层子对象物体,通过 parent 拜访到对应的父物体。子物体能够为多个,父物体只能有一个,children 属性是数组(Array)类型。创立一个物体对象时,能够指定该对象的父物体。
分类对象属性树层级体系中,每个父物体能够有多个子物体。ThingJS 为每个物体对象提供了下列内置属性。
buildings: 能够拜访到该园区下所有的修建。
ground: 能够拜访到园区的高空对象。
things: 拜访所有 Thing 类型的物体。

3、切换场景层级

ThingJS 场景中提供了层级构造,然而如何实现 3D 可视化场景层级切换呢?能够通过“父子树”和“分类对象属性树”来批量管制子物体,比方挪动、显示或者通明管制等。
在 3D 可视化场景内只有调用了一次 app.level.change(无论是将层级切换到了园区还是切换到了某个 Thing),ThingJS 就启动了内置的 园区 <—> 修建 <—> 楼层 <—> 物体…… 的逐级进入和退出的交互操作流程和对应的响应。左键双击可进入到所拾取的物体层级,右键单击可返回到上一层级。

从 3D 可视化园区进入到修建内,定义为一次“层级切换”。学会了如何切换场景层级,下篇文章我持续深刻学习如何动态创建组合场景。

正文完
 0