解密ThingJS如何在物聯網可視化領域廣受好評

什麼是ThingJS？ThingJS是用來幹什麼的？它是應用在哪一個行業的新技術？ThingJS是給什麼人使用的？使用ThingJS能給咱們帶來什麼好處？這些問題就是這篇文章要回答的。先來一個官方的答案：ThingJS是新一代的物聯網可視化PaaS平臺，可能這個答案大部分人都不是很懂，好比「物聯網可視化」這個詞是啥？「PaaS平臺」又是啥？

說物聯網可視化以前先說說什麼是物聯網：物聯網（The Internet of Things，簡稱IOT）是指經過 各類信息傳感器、射頻識別技術、全球定位系統、紅外感應器、激光掃描器等各類裝置與技術，實時採集任何須要監控、 鏈接、互動的物體或過程，採集其聲、光、熱、電、力學、化 學、生物、位置等各類須要的信息，經過各種可能的網絡接入，實現物與物、物與人的泛在鏈接，實現對物品和過程的智能化感知、識別和管理。物聯網是一個基於互聯網、傳統電信網等的信息承載體，它讓全部可以被獨立尋址的普通物理對象造成互聯互通的網絡。

那麼什麼是可視化？可視化就是將數據轉換成圖形或圖像在屏幕上顯示出來，再進行交互處理的理論、方法和技術。

那麼物聯網可視化就便於理解了，他是基於互聯網，讓物體經過一系列的數據採集器，將物體以及數據轉化爲能夠在屏幕上顯示的圖像。

那麼「PaaS平臺」又是什麼？「PaaS平臺」：Platform-as-a-Service，平臺即服務，PaaS的實質是將互聯網的資源服務化爲可編程接口，爲第三方開發者提供有商業價值的資源和服務平臺。有了PaaS平臺的支撐，雲計算的開發者就得到了大量的可編程元素，這些可編程元素有具體的業務邏輯，這就爲開發帶來了極大的方便，不但提升了開發效率，還節約了開發成本。有了PaaS平臺的支持，WEB應用的開發變得更加敏捷，可以快速響應用戶需求的開發能力，也爲最終用戶帶來了實實在在的利益。

這一套組合拳下來，是否是對ThingJS有了稍微的瞭解了呢？，別急，我來總結一下，ThingJS就是把物體的數據採集上傳到平臺上，而且經過可視化技術，將物體的模型以及數據轉化成圖像或者圖形的一個簡化開發的服務平臺，那麼這個平臺相比於其餘的平臺有什麼不一樣呢？

不一樣之處在於，它須要去提升開發效率、節約開發成本，爲第三方開發者提供有商業價值的資源和服務平臺，那麼ThingJS是如何爲咱們作到這些的呢？

主要經過如下幾點：

1.強大的3D引擎

ThingJS平臺的3D引擎核心是由優鍩科技的核心3D研發團隊依託多年3D基礎算法研究和積累，經過潛心研發，完成底層H53D運行基礎庫架構，並經持續優化、封裝、測試逐步完善而成。ThingJS通過各類規模商用3D可視化項目的二次開發考驗和完善，造成了一個簡便、快捷、強大的面向物聯網應用的3D可視化應用運行和開發平臺。

ThingJS是純H5的WebGL架構，可在各種主流網頁瀏覽器中自如運行，包括可在移動端直接訪問運行。隨着ThingJS的不斷優化和移動端硬件性能的持續提高，移動端訪問3D應用的效果正在愈來愈好。目前已能夠經過微信掃碼自如訪問3D應用場景

2.簡化模型製做

ThingJS平臺提供面向普通用戶(而非3D設計師)的快速3D場景搭建工具ThingBuilder，可以讓用戶在無需專業3D設計師狀況下低成本完成3D場景搭建。ThingBuilder工具包括面向園區級別的搭建工具CampusBuilder，還包括面向城市級場景的CityBuilder。使用ThingJS平臺的CampusBuilder3D場景快速搭建工具(原「模模搭」工具)，在搭建工具便捷的搭建方式、海量的3D模型(ThingDepot模型庫)資源的輔助下，普通人員(非3D設計師)可快速搭建3D場景，原來專業模型師須要一週製做的場景，如今普通人1天就能夠完成搭建。

3.提升開發效率

ThingJS平臺經過潛心封裝，將複雜難懂的3D底層能力(例如：處理點線面頂點，3D座標系轉換，貼圖，燈光效果)變成簡單易懂的JS腳本函數和參數設置，讓開發者直接使用邏輯概念(例如：園區，建築，樓層，設備)進行開發，針對物聯網應用開發在線提供了近百個3D功能實現例子，大大提升了3D應用的開發效率。開發者可登陸www.thingjs.com網站直接開始在線開發，還提供各種簡化開發者開發工做的功能，好比:開發者右鍵自動生成基礎代碼

4.在線開發部署

ThingJS平臺推薦將在線開發調試完成的3D可視化應用直接使用在線SaaS方式部署，省去用戶本地安裝調試等環節，下降成本，提高交付效率。

在ThingJS網站編碼保存後，當即在線部署完成。可自動生成訪問二維碼，供用戶PC端和手機訪問相關3D可視化應用

5.移動端可訪問

ThingJS平臺採用瀏覽器原生的WebGL協議方式實現3D能力封裝，不只兼容IE11,Edge，Chrome，Firefox等瀏覽器，並且還能夠在手機、PAD等移動端訪問，甚至微信掃碼也能夠直接訪問。

除此以外，ThingJS有哪些服務呢？

1.CamBuilder

當前版本: V1.2.1.252

背景

CamBuilder 是 ThingJS 平臺https://www.thingjs.com/提供的園區級 3D 場景搭建工具。CamBuilder 既可在聯網狀態下使用(自動同步 PaaS 平臺資源)，也可在徹底離線狀況下獨立使用。

CamBuilder 是面向普通人設計的 3D 搭建工具，很是簡單易用，普通人 5 分鐘便可上手搭建。

CamBuilder 搭建的3D場景會自動同步到 ThingJS 平臺(網站)同名帳戶下(可在網站控制檯「個人場景」中查看)，用戶可直接在 ThingJS 網站引用這些3D場景進行基於Web的3D可視化應用開發。今後，3D可視化開發進入低門檻的快速開發時代!

概述

3D物聯網可視化平臺幾乎能夠適用於任何場景，真實世界自己就是以3D的形式存在，人類肉眼捕捉到的信息幾乎所有是3D信息，所以直觀的3D數字化場景可以承載更多、更直接的實時數據，更容易被察覺，更容易被捕獲。尤爲應用到複雜且多變的物聯網環境中可以很大程度上下降誤操做事件的機率，減小人員部署，提升管理效率，節省管理成本。

針對3D場景的製做，目前市場上主要依賴3DSMax, Maya, AutoCAD, Sketchup等主流建模軟件，這些人們耳熟能詳的建模平臺功能強大，可以實現大量的建模需求，例如：工業產品設計、傢俱設計、建築結構建模、力學測試等。但這些軟件的使用者多爲各行各業的專業人士，不通過培訓，普通人很難上手進行操做，而過於細節化的建模工具，大多以點、線、面等矢量模型單位進行建模，使得建模過程繁瑣，建模效率低下。若是選用這些傳統建模軟件搭建場景將耗費大量人力物力，使本來爲了節約成本，提升效率所開發的3D物聯網平臺變得既不經濟也不高效。所以，物聯網3D場景的製做，須要一個操做簡單，易於上手且搭建效率高的場景搭建平臺。

CamBuilder(也叫「模模搭」)是優鍩科技推出的一款專門針對物聯網設計的3D可視化軟件。同時，CamBuilder也是優鍩科技物聯網3D可視化ThingJS平臺的一個組件。CamBuilder致力於幫助非專業3D建模人員快速搭建3D場景。CamBuilder不只提供了一個使用簡單易用、功能強大的3D搭建工具，同時配合提供了豐富的3D模型庫，即便是沒有任何圖形編輯經驗的普通用戶也能夠快速搭建起例如：商場、醫院、學校、倉庫、公交車站等常見3D場景，大大提高了場景搭建效率。搭建好的3D場景經過簡單的操做就能夠上傳到ThingJS在線平臺上進行物聯網可視化系統開發。

本手冊提供了使用CamBuilder進行場景搭建的詳細指導，將幫助用戶有效使用CamBuilder，儘快完成場景搭建工做。

CamBuilder工具搭建的模型

2.CityBuilder

當前版本: v1.2.1.128

CityBuilder 是 ThingJS 平臺提供的城市級別搭建組件。CityBuilder 支持標準 GIS 數據導入，也支持 CamBuilder 所搭建的場景模型整合，還支持常規 3DSMax 模型文件導入。

CityBuilder可在城市乃至地球這樣大尺度區域上建立、展現場景，爲智慧城市類應用提供強大平臺支持。

CityBuilder 是一款交互式配置 3D 地圖的 SaaS 平臺，基於 ThingJS 和 3D GIS 可視化技術實現，是 ThingJS 的可視化搭建組件之一，專一於城市級尺度 3D 可視化。

CityBuilder 也是一個設計師與開發者協同工做的平臺，設計師來製做「活」的 3D 地圖效果，開發者專心致志地寫業務的代碼邏輯，兩個角色盡其所長，創造專業價值，共同實現終端用戶的基本生產需求和可視化情感需求。

CityBuilder 致力於幫助用戶快速搭建城市 3D 場景，並支持應用於開發環境中，爲團隊有效地下降開發門檻、縮短開發週期、減小開發成本。

地圖廣場

地圖模板

3.ChartBuilder

當前版本: v3.0

ChartBuilder 是 ThingJS 平臺爲商業開發者提供的圖表級別搭建組件。可快速提供圖表、面板等2D元素。

在ThingJS中，如何使用ChartBuilder呢?步驟以下：

打開已保存的項目，點擊圖表按鈕，選擇圖表模板，雙擊便可進入ChartBuilder;

ChartBuilder 模板

編輯本身的圖表內容，編輯完成後保存;

ChartBuilder 結合3D場景

回到ThingJS，點擊刷新按鈕。便可出現.cht文件

ChartBuilder文件名格式

右鍵.cht文件，便可對圖表進行編輯，刪除，重置，以及預覽添加了圖表後的ThingJS項目;

編輯圖表

4.ThingPano

當前版本: v0.8.1

ThingPano 是基於 ThingJS 平臺推出的全景工具套件，可簡單高效地將高清全景圖應用到 3D 環境中，實現 3D 宏觀場景和全景微觀場景的無縫融合，可快速調取、查看選定位置的全景圖，以更加真實的環境，全視角覆蓋您關注的場景。

能夠結合ThingJS原始API， 與ThingPano自身API，開發多種全景互動應用。能夠實如今全景圖內實景漫遊的同時，在3D宏觀場景中實時展現對應的空間位置。

經過ThingPano能夠輕鬆實如今編制可視化預案等情形下，在3D場景擺中放救援設施的同時，實時查看該設施在真實世界中的擺放效果，無需現場測量計算，精準評估預案可行性，提高工做效率。

還能夠結合 ThingJS 中的 map 功能，實現相似百度街景應用。 使用該項技術可普遍應用於房產導購、在線旅遊、生產監控和安全培訓等衆多場合。

ThingJS全景圖

數據結構說明以下:

基礎數據：

panoID、title、correction、startH、startV 屬性字段是全景圖在播放器中加載瀏覽所須要的必要屬性，用於肯定一張全景圖在播放器中的初始化位置與視角。

GPS 數據：

若是全景圖中帶有 GPS 定位數據，則可輸出 GPS 數據用於在地圖中進行定位展現。

熱點數據：

存儲每張全景圖對應的四周其餘全景圖的熱點連接信息，用於播放器中的熱點跳轉。

場景定位數據：

用於與 ThingJS 中的 3D 物體對象進行位置匹配與關係關聯。

用戶自定義數據：

用於存儲其餘用戶自定義的屬性字段。

路徑導航數據：

用於播放器內的全景圖巡路瀏覽。