共计 1808 个字符，预计需要花费 5 分钟才能阅读完成。
三维可视化 ##3D 开发
- 智慧校园总体设计与布局
- 用户与虚构场景的互动
- 实现全局场景的漫游模式
国内各大高校，近几年纷纷搭建了 3D 智慧校园，如清华大学智慧校园零碎，更是实现了虚构课堂性能。新华三团体与优锘 ThingJS 达成技术策略单干，利用 ThingJS 平台构建 3D 智慧校园，创立一个足不出户就能够理解校园地理信息与文化背景的虚构平台。
1. 总体设计与布局
智慧校园零碎的架构设计分为 根底层、数据层、服务层、应用层和表示层 五个档次。
根底平台采纳的是服务器，ThingJS 平台提供在线公布和离线部署两个项目管理性能，本文抉择局域部署，采纳 Windows 平台配合 Tomcat 来配置服务器；数据层次要负责文本数据、多媒体数据、关系型数据的存储管理；服务层负责给应用层提供基础性服务；应用层组件能够独自应用，提供监控治理、角色模式漫游和全局模式漫游；表示层将零碎进行客户端的展现，即对用户所能直观看到的页面进行展现。
构建虚构场景，次要基于 WebGL 3D 绘图技术实现虚构场景的生成整合，将后面筹备好的模型导入到智慧校园场景的指标坐标内，并为建筑物和天空贴图，再增加 3D 交互脚本，实现用户与虚构场景的漫游性能。
JavaScript 开发逻辑下的 3D 框架 -ThingJS，将简单的 3D 性能代码封装起来，开发者能够不用关怀框架外部的代码是如何实现的，只有正确的调用接口即可疾速的实现利用的开发，节俭了开发者的工夫和精力，同时这种形式也防止了开发者在使用 JavaScript 代码时呈现不应该呈现的谬误，3D 交互更轻松。【注册应用】
2. 用户与虚构场景的互动
咱们能够应用鼠标管制智慧校园的场景，任意地旋转、平移、缩放，能够查看每个建筑物的名称和文化背景。
建筑物标签和文字性阐明的显示，即在每个建筑物上方增加一个建筑物的名称，比方理科楼等标识牌的显示；接下来实现鼠标互动性能，当鼠标挪动到建筑物下面时，智慧校园将会显示该建筑物的历史文化等文字性阐明。
实现步骤如下：
（1）利用快捷界面库来创立一个 2D HTML 界面，为后面构建好的几幢建筑物上方增加一个小面板，阐明建筑物的名称, 让用户一眼就能清晰的理解整个智慧校园建筑物的大抵散布状况。2D 面板的创立，咱们应用 ThingJS 提供的 UIAnchor 对象来实现，用户能够很不便的理解该建筑物的文化背景同时也很直观的理解该建筑物在校园中所在的大抵地位。
（2）鼠标操作场景的旋转、平移、缩放属于 ThingJS 零碎内置性能，任何 3D 场景默认增加一个控制器，即罕用的轨迹球控件 Orbit Controls，并限度了高低旋转的角度范畴和滚轮管制相机离中心点的最大间隔和最小间隔。
（3）在 3D 场景导入一个机器君子，机器人在虚构场景行走时，利用 ThingJS 提供的角色动画 api，为它增加了一个行走、跑步、招手等动画成果，跟随着机器人漫游智慧校园的每一个角落，更加生动有趣。
3. 实现全局场景漫游模式
为了能更清晰明了的构建整合智慧校园，便于将来的扩大，须要对整个场景进行模块化。通过按档次的划分，对模型进行归类，逐层合成模型，从而明确智慧校园的场景元素及场景框架。
智慧校园实现场景漫游，实际上就是对场景中相机的管制，通过鼠标追随挪动的物体浏览智慧校园的每一个角落，每帧更新摄像机的地位实现，让用户对智慧校园的建筑物散布有个全局清晰的概念，比方提供室内的模仿参观性能。
用户能够单击按钮，进入教室外部的空间, 通过计算机渲染，间接查看该教室的整体布局。用户能够随便在房间中行走, 在任意角度观察该教室的 3D 模型。
本我的项目在 CampusBuilder 简略搭建教室的 3D 场景【客户端下载】，搁置一个绿板、一个教室讲台、以及若干的课桌椅。能够依据理论状况一肯定制，或者从 ThingJS 扩大库取用 3D 模型，防止从新建模。而后将这些模型与建筑物一起导入 ThingJS 平台，并加载到智慧校园的场景，最初计算每个房间的坐标，以便用于机器人定位。
ThingJS – 物联网 3D 可视化 PaaS 平台
ThingJS 库是用 JavaScript 编写的 WebGL 第三方库，反对中小企业疾速开发 3D 我的项目，极大简化了整体流程：1. 在 CampusBuilder 实现场景的搭建、展现，2. 通过 JavaScript 代码能够实现鼠标对场景的管制，如挪动、平移、缩放等操作，3. 在 ThingJS 平台进行实时数据对接，4. 抉择在线或者离线部署，反对 iframe 链接在线拜访 3D 场景。