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)的代碼塊，在線開發環境右側下方的項目打印區域將輸相關信息