快速入門
使用之前
在開始使用 ThingJS 之前，需要先了解Javascript，我們假設您已經掌握JS。
創建項目
創建項目之前需登錄ThingJS賬號，如果您尚未登錄賬號或頁面出現“登錄已過期，請重新登錄！”的提示，爲保證項目的正確保存及運行，請您在賬號登錄之後再創建項目。您可通過以下三種方式創建項目：
選擇菜單區域的“文件 - 新建項目”選項
點擊工具欄“新建”圖標，圖標如右圖所示：
使用快捷鍵“Ctrl+P”
編輯項目
在線開發爲用戶提供了相應的快捷代碼和官方示例，如果你正在用 ThingJS在線開發頁面，可以通過以下兩種方式來編輯項目:
點擊在線開發頁面菜單區域的快捷代碼選項中的子項，編輯區將自動插入相應代碼
選擇在線開發官方示例中的其中任意一個示例，點擊相應示例，編輯區將顯示相應代碼
後續操作詳見 在線開發 - 應用開發 - 在線開發
保存項目
可通過以下四種方式保存項目：
選擇菜單區域的“文件 - 保存”選項
點擊工具欄“保存”圖標，圖標如右圖所示：
使用快捷鍵“Ctrl+S”
運行項目
在線開發環境提供了以下幾種方式運行項目：
使用快捷方式“Ctrl+R/Enter”或點擊工具欄中的“運行”圖標，3d容器區域將運行編輯器相應的代碼。圖標如右圖所示：
選擇菜單區域的“工具 - 設置”選型，出現的設置面板，點擊開啓“自動保存執行”
界面介紹
在線開發頁面左邊顯示官方示例及用戶創建並保存的項目，中間的編輯器則顯示您已打開項目或文件的內容，而右側主要顯示項目運行之後的3D場景。
界面區域
菜單欄：對項目或項目文件操作的快捷入口，包括文件、快捷代碼、資源、工具、項目、視圖及幫助七個子項
項目列表：官方提供的示例代碼及用戶項目的集合，其中用戶項目只有登錄之後纔會顯示
工具欄：對菜單欄的圖標化顯示
狀態欄：用戶項目、文件或官方示例的狀態顯示
編輯器：當前打開項目的內容
3D容器：項目運行後的場景可視化顯示
項目打印日誌：項目運行輸出的日誌
項目導航顯隱切換：左側項目列表顯示/隱藏
文件位置：當前打開項目/文件的路徑
申請建模： ThingJS平臺提供的模型（設施設備、建築外觀等）定製服務，每個模型800元起。需填寫相應資料發出申請，ThingJS平臺會有專人聯繫並溝通服務細節。
請求協助：爲協助ThingJS用戶快速入門，ThingJS平臺可提供用戶特定項目的框架代碼開發服務。該服務可爲用戶快速構建符合項目基本需求的3D可視化框架代碼資源（包括源碼、3D模型、貼圖、數據等），用戶的技術團隊可在此基礎上快速上手，大幅提高3D可視化項目成功基礎。
充值：魔豆充值，包括兩種充值方式：支付寶和微信支付。充值之後的魔豆可用於購買VIP、VIP續費或項目部署的付費。
升級VIP：普通用戶可通過支付寶、微信支付或魔豆支付三種方式升級爲VIP。
個人信息欄：用戶名和用戶頭像
容器浮動：點擊“浮動”圖標，3D容器將以浮動層的方式顯示
最大化預覽：場景最大化預覽
在線諮詢：ThingJS在線支持入口
編輯器拖拽：調節編輯器及3D容器的寬度比
主要功能介紹
菜單欄
在線開發環境的菜單欄位於頭部左側區域，主要由以下幾部分構成：
文件：對在線開發環境中用戶的項目及文件進行的操作，主要包括新建項目、新建文件、保存及運行。詳細介紹請參照 在線開發 - 菜單導航 - 文件管理。
快捷代碼：爲提高項目開發效率，ThingJS提供了的功能模塊，點擊快捷代碼中的內容，編輯器將插入對應功能的代碼。也可通過點擊工具欄中的快捷代碼圖標進行相應操作。詳細介紹請參照 在線開發 - 菜單導航 - 快捷代碼。
資源：在線開發環境爲用戶提供的包括模型、園區、地圖、圖表、界面、動態背景燈及用戶上傳的多種資源集合。詳細介紹請參照 在線開發 - 菜單導航 - 資源管理。
工具：主要包括場景信息、場景效果、拾取座標、自定義模型和設置。詳細介紹請參照 在線開發 - 菜單導航 - 場景工具。
項目：針對用戶已開發項目進行的分享、部署及更新操作。詳細介紹請參照 在線開發 - 菜單導航 - 項目管理。
視圖：通過切換日誌、3D容器和目錄（項目列表）的顯隱狀態以及切換視圖風格改變在線開發環境的界面佈局。詳細介紹請參照 在線開發 - 菜單導航 - 視圖管理。
幫助：提供了快捷鍵的詳細介紹以及ThingJS平臺其他相關頁面的快捷入口。詳細介紹請參照 在線開發 - 菜單導航 - 幫助。
項目列表
項目列表主要位於在線開發環境的左側，主要包括官方示例和用戶項目。可通過點擊列表上方的“官方”和“我的”切換官方和個人項目：
當切換至官方示例時，在列表標題下方的輸入框搜輸入相關內容可搜索相應的官方示例，點擊相應示例，編輯器將顯示對應代碼，點擊運行圖標，右側3D容器將顯示示例對應的場景，用戶可對編輯器內的示例代碼修改並保存爲個人項目。
注：新增的示例右側會顯示一個新增標記（
），VIP專欄中的所有示例僅針對VIP用戶開放。
切換個人項目時，選中其中任一項目，右鍵選擇“打開項目”，編輯器和3D容器將分別顯示該項目的內容及場景，且項目及項目下的文件將顯示在“當前項目”目錄下。用戶可編輯修改當前項目及項目下的文件。
注意事項：
用戶只有在註冊並登錄 ThingJS 網站後，才能新建和保存項目，否則“我的項目”列表將不會出現在左側導航欄中
工具欄
工具欄圖標說明如下：
圖標圖標說明
新建項目：創建一個空項目，用戶可在編輯器器內添增加或修改項目內容
保存項目：保存當前處於編輯狀態的文件
執行項目：運行當前處於編輯狀態下的項目或示例，右側3D容器將顯示對應場景
項目分享：分享當前處於編輯狀態的項目或示例
模型：顯示模型資源面板，面板中的模型資源由ThingJS提供的官方模型及用戶選擇或上傳的模型構成
園區：顯示園區資源面板，面板中的園區資源由用戶上傳或CamBuilder同步過來的園區場景構成
地圖：顯示地圖資源面板，該面板中的地圖資源是用戶在CityBuilder創建的地圖
圖表：顯示園區資源面板，該面板中的圖表模板由ThingJS平臺提供
界面：顯示界面資源面板，該面板主要爲ThingJS平臺提供的Widget 面板組件的快捷方式
動態背景：顯示動態背景面板，該面板中的背景模板由ThingJS提供
快捷代碼：顯示快捷代碼面板，該面板是在線開發爲提升用戶的開發效率所提供的大量常用功能代碼塊的集合
場景信息：顯示場景信息（當前運行項目或示例對應場景的一系列信息）
場景效果：顯示場景效果面板，該面板內開關和按鈕可調節3D容器場景的燈光、 後期、動態天空、霧等特效等場景效果
狀態欄
介於編輯器與工具欄中間，用來顯示已打開的項目、文件或示例。當在線開發環境中已經存在一個已打開的用戶項目時，點擊其他的示例或項目文件，將作爲參考文件在狀態欄中打開，點擊之後的狀態欄顯示如下：
編輯器
在線開發中的編輯器用來查詢、修改項目或文件的內容，支持支持自動拼寫和快捷鍵操作。詳情請參照 在線開發 - 應用開發 - 在線開發
3D容器
顯示編輯器內代碼運行之後的場景及效果
項目打印日誌
若3D容器場景對應的項目文件或示例中含有類似於：console.log(obj)的代碼塊，在線開發環境右側下方的項目打印區域將輸相關信息
場景搭建
ThingJS平臺爲用戶提供了以下兩種方式搭建場景：
通過CamBuilder客戶端搭建3D場景
通過CityBuilder城市地圖搭建3D場景
CamBuilder
通過客戶端下載需要以下幾個步驟：
通過ThingJS官網下載3D園區搭建工具，在出現的下載詳情面板中點擊下載按鈕
下載後可登陸賬號，點擊工具下的「用戶手冊」可查看使用教程
將場景導出上傳或同步至ThingJS平臺
選擇園區資源下的場景進行開發
後續操作詳見 在線開發 - 菜單導航 - 資源管理 - 園區
CityBuilder
在“地圖”資源面板中點擊“新建地圖”
在出現的彈出面版中輸入地圖名稱，點擊“下一步”
選擇“一鍵城市”和“上傳數據”中的任一選項。若選擇“上傳數據”，地圖面板將同時新增一個地圖資源；若選擇“一鍵城市”，需選擇“城市範圍”和“模板”並點擊“下一步”，待數據下載完成之後，點擊“進入編輯”，地圖面板將新增一個地圖資源
選擇地圖資源下的地圖進行開發
後續操作詳見 在線開發 - 菜單導航 - 資源管理 - 地圖
在線開發
在線編輯器支持自動拼寫，輸入一個字符（串），若存在該字符（串），則編輯器將出現所匹配的內容，點擊選擇所需代碼，如下圖所示：
編輯區域內右鍵可調出快捷工具菜單，按下鼠標右鍵，點擊選擇下圖所示的工具：
快捷鍵操作如下表所示；
快捷鍵快捷鍵說明
Ctrl + F查找
Ctrl + H查找替換
Ctrl + [ 、 Ctrl + ]代碼行縮進
Ctrl + C複製當前選中內容
Ctrl + X剪切當前選中內容
Ctrl + V在光標處插入剪貼板的內容，並替換任何所選內容，只有在剪切或複製了內容之後，才能使用此快捷鍵
Shift + Alt + F代碼格式化
Alt + Up 、 Alt + Down上下移動一行
Alt + Shift + 鼠標左鍵多行編輯（列編輯）（鼠標右鍵更改所有匹配項）
Ctrl + Delete刪除光標右側的所有字
Ctrl + U回退上一個光標操作
Ctrl + K後Ctrl + 0摺疊所有區域代碼
Ctrl + K後Ctrl + J展開所有摺疊區域代碼
選中註釋代碼塊 Ctrl+ /代碼塊註釋
Home移動到行首
End移動到行尾
Ctrl + F12轉到定義
Alt + F12速覽定義
Shift + F12查找所有定義
Ctrl + End移動到文件結尾
Ctrl + Home移動到文件開頭
Ctrl + Shift + Enter在當前行上方插入一行
編輯器內按下 F1 鍵，調出快捷功能列表，用戶可按需選擇下圖所示的功能：
在線編輯器支持插入常用代碼塊，降低學習門檻。將鼠標移至菜單欄中“快捷代碼”或者點擊工具欄“快捷代碼”圖標（
）,將出現常用代碼塊，點擊快捷代碼按鈕，則可在編輯器中插入對應功能的代碼。
爲方便用戶開發，在線開發環境提供了資源引用的快捷入口。如引用“模板資源”步驟下：
點擊工具欄“模型”圖標（
）
在出現的模型資源面板中雙擊要引用的模型
編輯器區域快速插入相應代碼
點擊工具欄“執行項目”圖標（
），模型將出現在右側3D容器內的場景中
其他資源引用操作詳見 在線開發 - 菜單導航 - 資源管理
在線調試
ThingJS 在線開發環境中可以通過在代碼里加入 “debugger” 關鍵字進行調試，調試步驟如下：
在代碼中加入 “debugger” 關鍵字
F12 打開瀏覽器控制檯
點擊按鈕運行代碼
在瀏覽器控制檯中查看斷點位置
F12 調試
和普通頁面調試方法一樣，直接打開 F12 在 Sources 裏 找到 debug.js文件，在裏面打斷點即可調試，調試步驟如下：
F12鍵調出瀏覽器控制檯可以查看在線開發環境相關信息
點擊選擇“Sources - Page”
選擇Top目錄下的ifId(about:blank) - (no - domain -debug.js)
在瀏覽器控制檯的debug.js文件點擊斷點行數
點擊在線開發工具欄“執行項目”圖標（
）
數據對接
ThingJS平臺目前提供以下四種方法進行數據對接：
Ajax 數據對接
Ajax 的本質是通過瀏覽器的 XMLHttpRequest 對象向服務器發送 HTTP 請求，得到服務器返回的數據後進行數據處理的數據交互方式。
對於原生的 Ajax 來說，包括以下幾個步驟：
創建 XMLHttpRequest 實例；
發出 HTTP 請求；
接收服務器傳回的數據；
處理數據，更新頁面。
在 ThingJS 在線開發環境中，內置了 JQuery 庫，可以直接使用 JQurey 封裝的 Ajax 方法進行數據對接，例如：
$.ajax({'url':"http://3dmmd.cn:83/getMonitorDataById",//Ajax請求服務的地址'type':"GET",//請求方式 "POST" 或 "GET"，默認爲 "GET"'dataType':"json",//服務返回的數據類型，推薦使用標準JSON數據格式//發送到服務器的數據'data':{'id':89757},//請求成功後的回調函數'success':function(data){console.log(data);// 處理返回的數據},//請求失敗時調用的函數 有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象'error':function(xhr,status,error){console.log(xhr);},});
關於跨域
瀏覽器出於安全考慮，有同源策略（same-origin policy），所謂“同源”指的是“三個相同”：
協議相同；
域名相同
端口相同
對於 ThingJS 在線開發環境所發佈的 3D 頁面而言，其協議是 https:// ，域名是 www.thingjs.com ，端口是 80 （默認端口可以省略），如果協議、域名或者端口有一個不同就是跨域，Ajax 請求就會失敗。
在開發工具 Network 中可查看請求情況，下圖展示了跨域相關報錯:
因此，要在 ThingJS 在線環境中請求用戶自己服務器上的靜態資源數據或數據服務，或者其他網站的數據服務，就需要解決跨域問題。
注意事項
如果是訪問用戶上傳到 ThingJS 網站的靜態 json 數據資源則不存在跨域問題。
Ajax 請求跨域解決方案
對於在 ThingJS 在線開發環境中開發，我們推薦以下方案解決跨域問題：
CORS；
CORS 是一個 W3C 標準，全稱是 “跨域資源共享”（Cross-origin resource sharing）。它允許瀏覽器向跨域的服務器，發出 XMLHttpRequest 請求，從而解決了 Ajax 跨域請求數據的問題。
對於前端而言，整個 CORS 通信過程，由瀏覽器自動完成。對於開發者來說，前端代碼與普通 Ajax 代碼完全一樣。實現 CORS 的關鍵是後端，需在服務端設置 response 響應頭（header）的 Access-Control-Allow-Origin 屬性就可以開啓 CORS。該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源，例如：
"Access-Control-Allow-Origin","*"//所有網站都可訪問// 僅ThingJS網站能訪問// "Access-Control-Allow-Origin","http://www.thingjs.com"
如果 CORS 請求不是簡單的跨站請求，如：
使用GET或POST以外的HTTP請求方法（PUT DELETE等）；
請求的Content-Type 不屬於以下三種之一：
application/x-www-form-urlencoded；
text/plain；
multipart/form-data；
發送了自定義的請求頭信息（如Token數據）。
那麼還需根據實際情況，在服務器的響應頭中設置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相關屬性值，例如：
瀏覽器 Ajax 請求爲：
$.ajax({'headers':{"token":'31415926'// 請求頭中帶上了token數據},'url':"http://localhost:3000/getDataByIds",'type':"POST",//發送數據到服務器時所使用的內容類型。默認是："application/x-www-form-urlencoded" 但此方式無將複雜的 JSON 組織成鍵值對形式//因此設置 contentType 爲'application/json; charset=utf-8',這種類型是文本類型'contentType':'application/json; charset=utf-8','dataType':"json",//發送到服務器的數據 由於contentType設置爲'application/json; charset=utf-8'，這裏需將json對象轉爲字符串後發送'data':JSON.stringify({'ids':[1,2,3]}),'success':function(data){console.log(data);}});
則服務端需要設置：
//配置允許的請求方式，如果寫 * 則都允許"Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS";//配置允許的自定義請求頭，如果寫 * 則都允許"Access-Control-Allow-Headers","Content-Type,Token"
對於 ThingJS 在線開發環境所發佈的 3D 頁面而言，其協議是 https:// ，域名是 www.thingjs.com ，端口是 80 （默認端口可以省略），如果協議、域名或者端口有一個不同就是跨域，Ajax 請求就會失敗。
在開發工具 Network 中可查看請求情況，下圖展示了跨域相關報錯:
因此，要在 ThingJS 在線環境中請求用戶自己服務器上的靜態資源數據或數據服務，或者其他網站的數據服務，就需要解決跨域問題。
注意事項
如果是訪問用戶上傳到 ThingJS 網站的靜態 json 數據資源則不存在跨域問題。
$.ajax({'url':"http://3dmmd.cn:83/getMonitorDataById",//Ajax請求服務的地址'type':"GET",//請求方式 "POST" 或 "GET"，默認爲 "GET"'dataType':"json",//服務返回的數據類型，推薦使用標準JSON數據格式//發送到服務器的數據'data':{'id':89757},//請求成功後的回調函數'success':function(data){console.log(data);// 處理返回的數據},//請求失敗時調用的函數 有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象'error':function(xhr,status,error){console.log(xhr);},});
JSONP 的基本原理就是利用 script 標籤沒有跨域限制的特點，通過 script 標籤向服務器請求數據；服務器收到請求後，將數據放在一個指定名字的回調函數裏返回給瀏覽器。
由於 JQuery 的 Ajax 請求對 JSONP 進行了封裝，因此我們可以直接使用相關方法請求 JSONP 數據，例如：
$.ajax({type:"get",url:"http://3dmmd.cn:83/monitoringData",data:{"id":89757},dataType:"jsonp",// 返回的數據類型，設置爲JSONP方式//設置回調函數名 JQurey會自動註冊該函數jsonpCallback:"myCallbackFun",success:function(d){console.log(d);// 處理json數據}});
上述示例會向瀏覽器發送一個類似 http://3dmmd.cn:83/monitoringData?id=89757&callback=myCallbackFunc 的請求，服務器通過解析 url 中的 callback 參數，返回如下數據：
myCallbackFunc({"state":"success","data":{"id":"89757","temper":"26℃","humi":"42%","power":"9kWh"}})
請求成功後 JQuery 會執行 myCallbackFun 函數，從而可以在回調函數中得到並處理 json 數據。
注意事項
JSONP 僅支持 GET 請求，使用 JQuery 的 Ajax 方法 發起多個 jsonp 請求時，回調函數名不要重複（即 jsonpCallback 的設置不要重複），否則可能會導致回調函數 undefined ，詳見 jsonp請求失敗的原因。
WebSocket 是 HTML5 一種新的協議，實現了瀏覽器與服務器之間的全雙工通信。
其本質是先通過 HTTP/HTTPS 協議進行握手後創建一個用於交換數據的 TCP 連接，服務端與客戶端通過此 TCP 連接進行數據的雙向實時傳輸，直到有一方主動發送關閉連接請求或出現網絡錯誤纔會關閉連接。
WebSocket 最大的優點在，服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，真正實現了數據的實時雙向通信。並且 WebSocket 通信不受同源策略的限制，即不存在跨域問題。
WebSocket 客戶端 API
瀏覽器端的一個簡單示例如下：
// 創建一個WebSocket連接varwebSocket=newWebSocket('ws://3dmmd.cn:82');// 建立 websocket 連接成功 觸發open事件webSocket.onopen=function(){console.log("websocket服務器連接成功...");};// 接收服務端數據 觸發message事件webSocket.onmessage=function(ev){console.log("websocket接收到的數據："+ev.data);};// 關閉連接後 觸發close事件webSocket.onclose=function(evt){console.log("websocket關閉...");};// 通信發生錯誤時 觸發error事件webSocket.οnerrοr=function(){console.log('發生錯誤')}
可通過 readyState 屬性值（只讀），獲取連接狀態：
0 - 表示連接尚未建立；
1 - 表示連接已建立，可以進行通信；
2 - 表示連接正在進行關閉
3 - 表示連接已經關閉或者連接不能打開
當連接成功後，可利用 send() 方法向服務器發送數據，例如：
vardataObj={'id':89785};// send 數據類型可以是 字符串 或 二進制對象（Blob 對象、ArrayBuffer 對象）webSocket.send(JSON.stringify(dataObj));
在客戶端可調用 close() 方法主動關閉 WebSocket 連接。
WebSocket 服務器端
在服務器端，Node.js、Java、.Net、C++ 等語言都有相應的 API 庫或框架來實現 WebSocket 的服務端開發。開發者可根據具體的項目需求選擇相應方案，這裏不再詳細說明。
MQTT是一個輕量級協議，使用MQTT協議的中心是broker（服務器/代理），客戶端通過訂閱消息和發佈消息進行數據交互。使用MQTT方式的步驟如下：
直接連接MQTT服務器（需支持websocket訪問，Mosquitto支持websocket的配置可自行百度）
引用第三方 mqtt庫
MQTT數據對接
瀏覽器端的一個簡單示例如下：
// 引用第三方 mqtt 庫，詳見 https://github.com/mqttjs/MQTT.jsTHING.Utils.dynamicLoad(['https://www.thingjs.com/static/lib/mqtt.js'],function(){init();});varclient=null;// 創建一個Mosquitto連接client=mqtt.connect("wss:www.3dmmd.cn:8086");client.subscribe("/public/TEST/dev1");// 連接成功後發送數據client.on("message",function(topic,payload){console.log('data:'+payload);obj.setAttribute("monitorData/溫度",payload);changeColor(obj);});// 關閉連接client.end();
在客戶端可調用 end() 方法主動關閉 Mosquitto 連接。