三维可视化##3D开发#

1. WebGL, ThingJS及3DSMAX
2. 虚拟场馆漫游技术构建

• 基础组件
• 加载三维模型
• 实现虚拟漫游
• 渲染优化

如果要构建一个具有交互性和拓展性的沉浸式漫游场景，常用到3DSMAX、three.js等软件技术，学习门槛较高；ThingJS可视化组件更加轻量化，B/S架构下的3D可视化应用构建更轻松，为不少企业客户降低了项目开发成本。

WebGL、ThingJS及3DSMAX技术实现

WebGL是一种浏览器支持的3D绘图技术，无需下载插件，有跨平台跨终端的特性。如今广泛应用到三维可视化项目中，包括虚拟校园、全景看房、可视化大屏应用等。

ThingJS平台简化了在线开发步骤，本文总结一种更通用、更合理的实现方法，全程提供3D源码，保证了统一的基础架构，加速3D项目开发：

1. 在CampusBuilder客户端可以搭建3D场景，并利用模型扩展库，避免过多的建模压力；
2. 如果有精模需求，则可以在3DSMAX中完成建模，利用3D插件将模型导入3D场景中，不重要的场景则可以隐藏或者优化掉。

3D场景应该作为一个整体来看，但是若干部件（如墙体、展柜、门等）都是独立导出的，比如门设置了动画属性，则可以在平台上进行交互开发。

CampusBuilder有自带的保存格式，数据和ThingJS技术引擎是共享的，可读取的主流三维文件格式如下：JSON, OBJ或MTL, Collada（.DAE文件）等等，更多的格式【点这里】。不过，实际部署情况下，JSON文件支持性更好，在许多拓展的漫游功能中使用JSON文件，能够避免因为文件格式造成的问题，比如不能被有效检测反馈，影响流畅度。

虚拟场馆漫游技术4步构建

第一步：基本组件

在JavaScript中，three.js的框架只需要三个组件：场景、相机和渲染器，即可完成基本场景构建。对比而言，ThingJS 3D引擎系统内置了更多3D组件，比three.js需要更少的代码就能够实现3D显示。

因此，ThingJS平台以在线开发为主，3D编辑器可以呈现可视化交互场景方便检测3D脚本，场景、相机和渲染器已经系统内置，采用JavaScript调用，具有较高的自由度，根据开发的实际需求可作不同调整。

为了加速3D开发，可视化组件包括场景搭建工具、在线开发平台和3D模型库扩展，数据统一共享，用起来更加方便。

第二步：加载三维模型

ThingJS中导入场景文件的代码引用URL，是一种比较容易的导入方式。

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址
});

如果偶尔有即便导入流程正确，但在Web端页面却无法正常显示的情况，这种情况大都是由于模型尺寸导致的，可以通过设置参数值进行调整。

第三步：实现虚拟漫游

场景中的相机功能已实现第一人称行走、自由飞行、虚拟漫游等形式，目前ThingJS使用第一人称行走视角控制器，作为一种主流的解决方案。第一人称行走视角控制器可以控制相机前后左右移动、视角追踪等效果，用户可以使用鼠标控制视角，键盘WASD控制相机的前后左右移动，并暂停相机的一切动作。

机的前后左右移动，暂停相机的一切动作。这些控制的绑定都封装在 FirstPerson Controls.js的文件中注意该文件的引入顺序在 Three.js之后，可以直接修改文件内容对控制的绑定对象及绑定事件的类型作调整。将第一视角控制器应用到场景中的部分代码如下所示。

// 添加控件
var ctrl = null;
var gui = null;
function add_control() {
	if (ctrl) {
		return;
	}

	app.camera.position = [0, 10, 0];// 起始位置 就是摄像机位置, 不设置就会在摄像机位置直接开始
	ctrl = app.addControl(
		new THING.WalkControl({ // 参数可以动态修改
			walkSpeed: 0.02, // 行走速度
			turnSpeed: 0.25, // 右键旋转速度
			gravity: 29.8, // 物体重量
			eyeHeight: 1.6, // 人高度
			jumpSpeed: 10, // 按空格键 跳跃的速度
			enableKeyRotate: false, // 默认不开启键盘控制旋转
			useCollision: false, // 默认不开启碰撞检测
			useGravity: true // 默认开启重力
		})
	);

该控制器属性名都非常直观，可以自行更改配置的参数。

3D资源中心 - 3D隧道可视化虚拟漫游案例 ThingJS 搜索store.thingjs.com

第四步：渲染优化

ThingJS 3D引擎使用 request Animation Frame（）方法在一定的时间间隔内 (该间隔一般使用默认值,也可自行输入) 重新渲染场景。在 render（）方法中调用 requestAnimationFrame（）方法反复迭代，由此达到实时渲染的效果，实现场景的动态变化，增加真实感与沉浸感。

为了保证用户在Web端浏览的流畅度，每秒传输帧数fps一般达到60为佳，render（）是three.js框架中的核心方法，如果对之操作不当，会对渲染性能造成直接影响，最直观的感受就是fps下降，出现掉帧、卡顿现象，尤其是人为加重CPU的负荷，渲染性能会明显产生波动。

所以，浏览虚拟漫游场景时，应该尽量关闭其他影响CPU的进程及大型软件，避免因本地硬件因素影响渲染性能。

3D资源中心 - 3D隧道可视化虚拟漫游案例 ThingJS 搜索store.thingjs.com

基于WebGL的无插件虚拟漫游关键技术已成为主流。

ThingJS是一个基于WebGL的3D框架，经过以上介绍针对三维模型及场景进行预处理，让未来的漫游功能拓展更加轻量化，用户体验更加丰富！

附：为什么是ThingJS？

ThingJS实际上对WebGL做了封装，成为WebGL的一个第三方库，只需使用少量易读的JavaScript脚本，即可在Web端构建多样化的三维场景。最大的好处显而易见，不需要过多的3D专业知识培训，降低了入门的门槛，JavaScript人员只需一年基础即可。

相信在不久的将来，3D可视化技术会普及化。

三维可视化##3D开发#

1. 智慧校园总体设计与规划
2. 用户与虚拟场景的互动
3. 实现全局场景的漫游模式

国内各大高校，近几年纷纷搭建了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场景。

及元宇宙，小说《雪崩》和电影《头号玩家》总是被提及，而《头号玩家》通常被认为刻画和展示了元宇宙场景，那些电影中虚拟现实、平行宇宙的科幻元素只是人们的幻想吗？

NO！也许，这些已经来到我们身边！

四会市文化馆上线“虚拟智慧空间”，百分百还原文化馆真实场景，群众不再受限于时间和空间的制约，通过手机就可随时随地进入文化馆构建的虚拟空间参观，让你仿佛置身于真实的文化馆中一样。

虚拟智慧空间

虚拟智慧空间，完成元宇宙世界的最基础物理空间建设，将文化艺术馆的实地情景再现于虚拟场景中，为广大群众提供虚拟漫游虚拟服务，既可遵循着系统预先设定的线路漫游，又可自选线路漫游，让广大群众真真切切地体验沉浸式“云参观”，便捷安全！

在这里，你可以看到：

空间还原

高精度1:1还原真实文化馆，记录永久保存

3D鸟瞰

鸟瞰多楼层布局，不用费力来回、上下跑动

平面布局

平面布置图，一目了然楼层所有区域方位

时间不受限

7*24小时不打烊，随时随地可参观

怎么进入“虚拟智慧空间”？我迫不及待想去参观啦！

别着急进入方式很简单，我们一起来看看！

01

如何“云参观”

手机参观

关注“ 四会市文化馆 ”微信公众号，点击菜单栏“ 博看文化——智慧虚拟空间 ”，进入文化馆外景；

电脑参观

电脑端打开下方链接：

http://vr.bookan.com.cn/3468166/main/spc.html

手机识别二维码也可参观！太方便了吧！

话不多说，我们也赶紧去体验一下吧！

识别下方二维码，

快速进入四会市文化馆的VR世界~

02

体验攻略轻松get!

外景参观

进入文化馆外景后，点击图片标识可前行进入文化馆内景。

自选线路参观

进入文化馆入口内景，点击三维模型，自选楼层等路线参观。

系统预设线路参观

点击左下角“ 导览 ”播放按钮，可跟着视频中设定的线路漫游参观。

VR阅读

在漫游虚拟文化馆过程中，点击文化馆内景圆圈按钮，可一键预览图书馆的最新活动。

真人讲解

除了自行参观之外，部分区域还有真人为你细心讲解。点击区域内的绿色播放图标，即可收听讲解。

是我熟悉的那个文化馆！这周在家也能参观文化馆啦！

手机点击右上角选项按钮，还可分享好友一起“云参观”，叫上朋友一起体验吧！

来源：桔子新闻