三維可視化##3D開發(fā)#

1. WebGL, ThingJS及3DSMAX
2. 虛擬場館漫游技術構建

• 基礎組件
• 加載三維模型
• 實現(xiàn)虛擬漫游
• 渲染優(yōu)化

如果要構建一個具有交互性和拓展性的沉浸式漫游場景，常用到3DSMAX、three.js等軟件技術，學習門檻較高；ThingJS可視化組件更加輕量化，B/S架構下的3D可視化應用構建更輕松，為不少企業(yè)客戶降低了項目開發(fā)成本。

WebGL、ThingJS及3DSMAX技術實現(xiàn)

WebGL是一種瀏覽器支持的3D繪圖技術，無需下載插件，有跨平臺跨終端的特性。如今廣泛應用到三維可視化項目中，包括虛擬校園、全景看房、可視化大屏應用等。

ThingJS平臺簡化了在線開發(fā)步驟，本文總結一種更通用、更合理的實現(xiàn)方法，全程提供3D源碼，保證了統(tǒng)一的基礎架構，加速3D項目開發(fā)：

1. 在CampusBuilder客戶端可以搭建3D場景，并利用模型擴展庫，避免過多的建模壓力；
2. 如果有精模需求，則可以在3DSMAX中完成建模，利用3D插件將模型導入3D場景中，不重要的場景則可以隱藏或者優(yōu)化掉。

3D場景應該作為一個整體來看，但是若干部件（如墻體、展柜、門等）都是獨立導出的，比如門設置了動畫屬性，則可以在平臺上進行交互開發(fā)。

CampusBuilder有自帶的保存格式，數據和ThingJS技術引擎是共享的，可讀取的主流三維文件格式如下：JSON, OBJ或MTL, Collada（.DAE文件）等等，更多的格式【點這里】。不過，實際部署情況下，JSON文件支持性更好，在許多拓展的漫游功能中使用JSON文件，能夠避免因為文件格式造成的問題，比如不能被有效檢測反饋，影響流暢度。

虛擬場館漫游技術4步構建

第一步：基本組件

在JavaScript中，three.js的框架只需要三個組件：場景、相機和渲染器，即可完成基本場景構建。對比而言，ThingJS 3D引擎系統(tǒng)內置了更多3D組件，比three.js需要更少的代碼就能夠實現(xiàn)3D顯示。

因此，ThingJS平臺以在線開發(fā)為主，3D編輯器可以呈現(xiàn)可視化交互場景方便檢測3D腳本，場景、相機和渲染器已經系統(tǒng)內置，采用JavaScript調用，具有較高的自由度，根據開發(fā)的實際需求可作不同調整。

為了加速3D開發(fā)，可視化組件包括場景搭建工具、在線開發(fā)平臺和3D模型庫擴展，數據統(tǒng)一共享，用起來更加方便。

第二步：加載三維模型

ThingJS中導入場景文件的代碼引用URL，是一種比較容易的導入方式。

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

如果偶爾有即便導入流程正確，但在Web端頁面卻無法正常顯示的情況，這種情況大都是由于模型尺寸導致的，可以通過設置參數值進行調整。

第三步：實現(xiàn)虛擬漫游

場景中的相機功能已實現(xiàn)第一人稱行走、自由飛行、虛擬漫游等形式，目前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({ // 參數可以動態(tài)修改
			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

第四步：渲染優(yōu)化

ThingJS 3D引擎使用 request Animation Frame（）方法在一定的時間間隔內 (該間隔一般使用默認值,也可自行輸入) 重新渲染場景。在 render（）方法中調用 requestAnimationFrame（）方法反復迭代，由此達到實時渲染的效果，實現(xiàn)場景的動態(tài)變化，增加真實感與沉浸感。

為了保證用戶在Web端瀏覽的流暢度，每秒傳輸幀數fps一般達到60為佳，render（）是three.js框架中的核心方法，如果對之操作不當，會對渲染性能造成直接影響，最直觀的感受就是fps下降，出現(xiàn)掉幀、卡頓現(xiàn)象，尤其是人為加重CPU的負荷，渲染性能會明顯產生波動。

所以，瀏覽虛擬漫游場景時，應該盡量關閉其他影響CPU的進程及大型軟件，避免因本地硬件因素影響渲染性能。

3D資源中心 - 3D隧道可視化虛擬漫游案例 ThingJS 搜索store.thingjs.com

基于WebGL的無插件虛擬漫游關鍵技術已成為主流。

ThingJS是一個基于WebGL的3D框架，經過以上介紹針對三維模型及場景進行預處理，讓未來的漫游功能拓展更加輕量化，用戶體驗更加豐富！

附：為什么是ThingJS？

ThingJS實際上對WebGL做了封裝，成為WebGL的一個第三方庫，只需使用少量易讀的JavaScript腳本，即可在Web端構建多樣化的三維場景。最大的好處顯而易見，不需要過多的3D專業(yè)知識培訓，降低了入門的門檻，JavaScript人員只需一年基礎即可。

相信在不久的將來，3D可視化技術會普及化。

三維可視化##3D開發(fā)#

1. 智慧校園總體設計與規(guī)劃
2. 用戶與虛擬場景的互動
3. 實現(xiàn)全局場景的漫游模式

國內各大高校，近幾年紛紛搭建了3D智慧校園，如清華大學智慧校園系統(tǒng)，更是實現(xiàn)了虛擬課堂功能。新華三集團與優(yōu)锘ThingJS達成技術戰(zhàn)略合作，利用ThingJS平臺構建3D智慧校園，創(chuàng)建一個足不出戶就可以了解校園地理信息與文化背景的虛擬平臺。

1. 總體設計與規(guī)劃

智慧校園系統(tǒng)的架構設計分為基礎層、數據層、服務層、應用層和表示層五個層次。

基礎平臺采用的是服務器，ThingJS平臺提供在線發(fā)布和離線部署兩個項目管理功能，本文選擇局域部署，采用Windows平臺配合Tomcat來配置服務器；數據層主要負責文本數據、多媒體數據、關系型數據的存儲管理；服務層負責給應用層提供基礎性服務；應用層組件可以單獨使用，提供監(jiān)控管理、角色模式漫游和全局模式漫游；表示層將系統(tǒng)進行客戶端的展示，即對用戶所能直觀看到的頁面進行展示。

構建虛擬場景，主要基于WebGL 3D繪圖技術實現(xiàn)虛擬場景的生成整合，將前面準備好的模型導入到智慧校園場景的目標坐標內，并為建筑物和天空貼圖，再添加3D交互腳本，實現(xiàn)用戶與虛擬場景的漫游功能。

JavaScript開發(fā)邏輯下的3D框架-ThingJS，將復雜的3D功能代碼封裝起來，開發(fā)者可以不必關心框架內部的代碼是如何實現(xiàn)的，只要正確的調用接口即可快速的完成應用的開發(fā)，節(jié)省了開發(fā)者的時間和精力，同時這種方式也避免了開發(fā)者在運用 JavaScript代碼時出現(xiàn)不應該出現(xiàn)的錯誤，3D交互更輕松。【注冊使用】

2. 用戶與虛擬場景的互動

我們可以使用鼠標控制智慧校園的場景，任意地旋轉、平移、縮放，可以查看每個建筑物的名稱和文化背景。

建筑物標簽和文字性說明的顯示，即在每個建筑物上方添加一個建筑物的名稱，比如文科樓等標識牌的顯示；接下來實現(xiàn)鼠標互動功能，當鼠標移動到建筑物上面時，智慧校園將會顯示該建筑物的歷史文化等文字性說明。

實現(xiàn)步驟如下：

（1）利用快捷界面庫來創(chuàng)建一個2D HTML界面，為前面構建好的幾幢建筑物上方添加一個小面板，說明建筑物的名稱,讓用戶一眼就能清晰的了解整個智慧校園建筑物的大致分布情況。2D面板的創(chuàng)建，我們使用 ThingJS提供的UIAnchor對象來實現(xiàn)，用戶可以很方便的了解該建筑物的文化背景同時也很直觀的了解該建筑物在校園中所在的大致位置。

（2）鼠標操作場景的旋轉、平移、縮放屬于ThingJS系統(tǒng)內置功能，任何3D場景默認添加一個控制器，即常用的軌跡球控件 Orbit Controls，并限制了上下旋轉的角度范圍和滾輪控制相機離中心點的最大距離和最小距離。

（3）在3D場景導入一個機器小人，機器人在虛擬場景行走時，利用ThingJS提供的角色動畫api，為它添加了一個行走、跑步、招手等動畫效果，跟隨著機器人漫游智慧校園的每一個角落，更加生動有趣。

3. 實現(xiàn)全局場景漫游模式

為了能更清晰明了的構建整合智慧校園，便于未來的擴展，需要對整個場景進行模塊化。通過按層次的劃分，對模型進行歸類，逐層分解模型，從而明確智慧校園的場景元素及場景框架。

智慧校園實現(xiàn)場景漫游，實際上就是對場景中相機的控制，通過鼠標跟隨移動的物體瀏覽智慧校園的每一個角落，每幀更新攝像機的位置實現(xiàn)，讓用戶對智慧校園的建筑物分布有個全局清晰的概念，比如提供室內的模擬參觀功能。

用戶可以單擊按鈕，進入教室內部的空間,通過計算機渲染，直接查看該教室的整體布局。用戶可以隨意在房間中行走,在任意角度觀察該教室的3D模型。

本項目在CampusBuilder簡單搭建教室的3D場景【客戶端下載】，放置一個綠板、一個教室講臺、以及若干的課桌椅。可以根據實際情況一一定制，或者從ThingJS擴展庫取用3D模型，避免重新建模。然后將這些模型與建筑物一起導入ThingJS平臺，并加載到智慧校園的場景，最后計算每個房間的坐標，以便用于機器人定位。

ThingJS - 物聯(lián)網3D可視化PaaS平臺

ThingJS庫使用 JavaScript編寫的 WebGL第三方庫，支持中小企業(yè)快速開發(fā)3D項目，極大簡化了整體流程：1. 在CampusBuilder完成場景的搭建、展示，2. 通過 JavaScript代碼可以完成鼠標對場景的控制，如移動、平移、縮放等操作，3. 在ThingJS平臺進行實時數據對接，4. 選擇在線或者離線部署，支持iframe鏈接在線訪問3D場景。

及元宇宙，小說《雪崩》和電影《頭號玩家》總是被提及，而《頭號玩家》通常被認為刻畫和展示了元宇宙場景，那些電影中虛擬現(xiàn)實、平行宇宙的科幻元素只是人們的幻想嗎？

NO！也許，這些已經來到我們身邊！

四會市文化館上線“虛擬智慧空間”，百分百還原文化館真實場景，群眾不再受限于時間和空間的制約，通過手機就可隨時隨地進入文化館構建的虛擬空間參觀，讓你仿佛置身于真實的文化館中一樣。

虛擬智慧空間

虛擬智慧空間，完成元宇宙世界的最基礎物理空間建設，將文化藝術館的實地情景再現(xiàn)于虛擬場景中，為廣大群眾提供虛擬漫游虛擬服務，既可遵循著系統(tǒng)預先設定的線路漫游，又可自選線路漫游，讓廣大群眾真真切切地體驗沉浸式“云參觀”，便捷安全！

在這里，你可以看到：

空間還原

高精度1:1還原真實文化館，記錄永久保存

3D鳥瞰

鳥瞰多樓層布局，不用費力來回、上下跑動

平面布局

平面布置圖，一目了然樓層所有區(qū)域方位

時間不受限

7*24小時不打烊，隨時隨地可參觀

怎么進入“虛擬智慧空間”？我迫不及待想去參觀啦！

別著急進入方式很簡單，我們一起來看看！

01

如何“云參觀”

手機參觀

關注“ 四會市文化館 ”微信公眾號，點擊菜單欄“ 博看文化——智慧虛擬空間 ”，進入文化館外景；

電腦參觀

電腦端打開下方鏈接：

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

手機識別二維碼也可參觀！太方便了吧！

話不多說，我們也趕緊去體驗一下吧！

識別下方二維碼，

快速進入四會市文化館的VR世界~

02

體驗攻略輕松get!

外景參觀

進入文化館外景后，點擊圖片標識可前行進入文化館內景。

自選線路參觀

進入文化館入口內景，點擊三維模型，自選樓層等路線參觀。

系統(tǒng)預設線路參觀

點擊左下角“ 導覽 ”播放按鈕，可跟著視頻中設定的線路漫游參觀。

VR閱讀

在漫游虛擬文化館過程中，點擊文化館內景圓圈按鈕，可一鍵預覽圖書館的最新活動。

真人講解

除了自行參觀之外，部分區(qū)域還有真人為你細心講解。點擊區(qū)域內的綠色播放圖標，即可收聽講解。

是我熟悉的那個文化館！這周在家也能參觀文化館啦！

手機點擊右上角選項按鈕，還可分享好友一起“云參觀”，叫上朋友一起體驗吧！

來源：桔子新聞