ThingJS 新手教程之初識在線開發(一）

做爲新一代物聯網可視化PaaS平臺，ThingJS提供了在線開發環境，那麼新手該如何使用ThingJS的在線開發環境來開發一個3D可視化項目呢？第一個關鍵之處就是使用ThingJS的前置要求，必須會javaScript，也就是說，這個也有必定的門檻，會java轉javaScript也是較爲簡單的事情，若是徹底不會編程，不建議直接學習和使用。

 

建立項目

建立項目以前需登陸ThingJS帳號，若是您還沒有登陸帳號或頁面出現「登陸已過時，請從新登陸！」的提示，爲保證項目的正確保存及運行，請您在帳號登陸以後再建立項目。您可經過如下三種方式建立項目：

• 選擇菜單區域的「文件 - 新建項目」選項

• 點擊工具欄「新建」圖標，圖標如右圖所示：

• 使用快捷鍵「Ctrl+P」

編輯項目

在線開發爲用戶提供了相應的快捷代碼和官方示例，若是你正在用 ThingJS在線開發頁面，能夠經過如下兩種方式來編輯項目:

• 點擊在線開發頁面菜單區域的快捷代碼選項中的子項，編輯區將自動插入相應代碼

• 選擇在線開發官方示例中的其中任意一個示例，點擊相應示例，編輯區將顯示相應代碼

後續操做詳見 在線開發 - 應用開發 - 在線開發

保存項目

可經過如下四種方式保存項目：

• 選擇菜單區域的「文件 - 保存」選項

• 點擊工具欄「保存」圖標，圖標如右圖所示：

• 使用快捷鍵「Ctrl+S」

運行項目

在線開發環境提供瞭如下幾種方式運行項目：

• 使用快捷方式「Ctrl+R/Enter」或點擊工具欄中的「運行」圖標，3d容器區域將運行編輯器相應的代碼。圖標如右圖所示：

• 選擇菜單區域的「工具 - 設置」選型，出現的設置面板，點擊開啓「自動保存執行」

 

界面介紹

在線開發頁面左邊顯示官方示例及用戶建立並保存的項目，中間的編輯器則顯示您已打開項目或文件的內容，而右側主要顯示項目運行以後的3D場景。

界面區域

1. 菜單欄：對項目或項目文件操做的快捷入口，包括文件、快捷代碼、資源、工具、項目、視圖及幫助七個子項
2. 項目列表：官方提供的示例代碼及用戶項目的集合，其中用戶項目只有登陸以後纔會顯示
3. 工具欄：對菜單欄的圖標化顯示
4. 狀態欄：用戶項目、文件或官方示例的狀態顯示
5. 編輯器：當前打開項目的內容
6. 3D容器：項目運行後的場景可視化顯示
7. 項目打印日誌：項目運行輸出的日誌
8. 項目導航顯隱切換：左側項目列表顯示/隱藏
9. 文件位置：當前打開項目/文件的路徑
10. 申請建模： ThingJS平臺提供的模型（設施設備、建築外觀等）定製服務，每一個模型800元起。需填寫相應資料發出申請，ThingJS平臺會有專人聯繫並溝通服務細節。
11. 請求協助：爲協助ThingJS用戶快速入門，ThingJS平臺可提供用戶特定項目的框架代碼開發服務。該服務可爲用戶快速構建符合項目基本需求的3D可視化框架代碼資源（包括源碼、3D模型、貼圖、數據等），用戶的技術團隊可在此基礎上快速上手，大幅提升3D可視化項目成功基礎。
12. 充值：魔豆充值，包括兩種充值方式：支付寶和微信支付。充值以後的魔豆可用於購買VIP、VIP續費或項目部署的付費。
13. 升級VIP：普通用戶可經過支付寶、微信支付或魔豆支付三種方式升級爲VIP。
14. 我的信息欄：用戶名和用戶頭像
15. 容器浮動：點擊「浮動」圖標，3D容器將以浮動層的方式顯示
16. 最大化預覽：場景最大化預覽
17. 在線諮詢：ThingJS在線支持入口
18. 編輯器拖拽：調節編輯器及3D容器的寬度比

主要功能介紹

• 菜單欄

  在線開發環境的菜單欄位於頭部左側區域，主要由如下幾部分構成：

  1. 文件：對在線開發環境中用戶的項目及文件進行的操做，主要包括新建項目、新建文件、保存及運行。詳細介紹請參照 在線開發 - 菜單導航 - 文件管理。

  2. 快捷代碼：爲提升項目開發效率，ThingJS提供了的功能模塊，點擊快捷代碼中的內容，編輯器將插入對應功能的代碼。也可經過點擊工具欄中的快捷代碼圖標進行相應操做。詳細介紹請參照 在線開發 - 菜單導航 - 快捷代碼。

  3. 資源：在線開發環境爲用戶提供的包括模型、園區、地圖、圖表、界面、動態背景燈及用戶上傳的多種資源集合。詳細介紹請參照 在線開發 - 菜單導航 - 資源管理。

  4. 工具：主要包括場景信息、場景效果、拾取座標、自定義模型和設置。詳細介紹請參照 在線開發 - 菜單導航 - 場景工具。
  5. 項目：針對用戶已開發項目進行的分享、部署及更新操做。詳細介紹請參照 在線開發 - 菜單導航 - 項目管理。
  6. 視圖：經過切換日誌、3D容器和目錄（項目列表）的顯隱狀態以及切換視圖風格改變在線開發環境的界面佈局。詳細介紹請參照 在線開發 - 菜單導航 - 視圖管理。
  7. 幫助：提供了快捷鍵的詳細介紹以及ThingJS平臺其餘相關頁面的快捷入口。詳細介紹請參照 在線開發 - 菜單導航 - 幫助。

• 項目列表

  項目列表主要位於在線開發環境的左側，主要包括官方示例和用戶項目。可經過點擊列表上方的「官方」和「個人」切換官方和我的項目：

  1. 當切換至官方示例時，在列表標題下方的輸入框搜輸入相關內容可搜索相應的官方示例，點擊相應示例，編輯器將顯示對應代碼，點擊運行圖標，右側3D容器將顯示示例對應的場景，用戶可對編輯器內的示例代碼修改並保存爲我的項目。

     注：新增的示例右側會顯示一個新增標記（），VIP專欄中的全部示例僅針對VIP用戶開放。

  2. 切換我的項目時，選中其中任一項目，右鍵選擇「打開項目」，編輯器和3D容器將分別顯示該項目的內容及場景，且項目及項目下的文件將顯示在「當前項目」目錄下。用戶可編輯修改當前項目及項目下的文件。

   

  注意事項：

  用戶只有在註冊並登陸 ThingJS 網站後，才能新建和保存項目，不然「個人項目」列表將不會出如今左側導航欄中

• 工具欄

  工具欄圖標說明以下：

  圖標	圖標說明
  	新建項目：建立一個空項目，用戶可在編輯器器內添增長或修改項目內容
  	保存項目：保存當前處於編輯狀態的文件
  	執行項目：運行當前處於編輯狀態下的項目或示例，右側3D容器將顯示對應場景
  	項目分享：分享當前處於編輯狀態的項目或示例
  	模型：顯示模型資源面板，面板中的模型資源由ThingJS提供的官方模型及用戶選擇或上傳的模型構成
  	園區：顯示園區資源面板，面板中的園區資源由用戶上傳或CamBuilder同步過來的園區場景構成
  	地圖：顯示地圖資源面板，該面板中的地圖資源是用戶在CityBuilder建立的地圖
  	圖表：顯示園區資源面板，該面板中的圖表模板由ThingJS平臺提供
  	界面：顯示界面資源面板，該面板主要爲ThingJS平臺提供的Widget 面板組件的快捷方式
  	動態背景：顯示動態背景面板，該面板中的背景模板由ThingJS提供
  	快捷代碼：顯示快捷代碼面板，該面板是在線開發爲提高用戶的開發效率所提供的大量經常使用功能代碼塊的集合
  	場景信息：顯示場景信息（當前運行項目或示例對應場景的一系列信息）
  	場景效果：顯示場景效果面板，該面板內開關和按鈕可調節3D容器場景的燈光、 後期、動態天空、霧等特效等場景效果

• 狀態欄

  介於編輯器與工具欄中間，用來顯示已打開的項目、文件或示例。當在線開發環境中已經存在一個已打開的用戶項目時，點擊其餘的示例或項目文件，將做爲參考文件在狀態欄中打開，點擊以後的狀態欄顯示以下：

• 編輯器

  在線開發中的編輯器用來查詢、修改項目或文件的內容，支持支持自動拼寫和快捷鍵操做。詳情請參照 在線開發 - 應用開發 - 在線開發

• 3D容器

  顯示編輯器內代碼運行以後的場景及效果

• 項目打印日誌

  若3D容器場景對應的項目文件或示例中含有相似於：console.log(obj)的代碼塊，在線開發環境右側下方的項目打印區域將輸相關信息