一、程序安裝

1.程序說明

流渲染服務器安裝時，對數據庫提供兩種方式安裝：集成安裝和獨立安裝。若用戶本地沒有數據庫，則可選擇集成安裝；如果用戶本地已有 MySQL 或 Microsoft SQLServer，可選擇獨立安裝；

二、項目管理

項目管理包含新建項目、編輯項目、刪除項目、添加新版本、修改版本、刪除版本、用當前項目版本創建場景等功能。

項目就是為場景提供項目程序文件的，項目就是場景的基礎，有了項目，場景才可以被創建。

1.項目列表

2.版本管理

功能截圖：

功能描述：

1.一個項目可以對應多個版本，可以記錄每次版本的信息的改動，直觀的顯示版本更新的過程，保留住每次版本的文件。

2.項目程序：項目程序是供場景選擇使用的，在場景中配置好選擇的項目，啟動場景運行的就是此項目程序

三、場景管理

場景管理包含流渲染場景的新建、刪除、場景 Token 的查看與復制、場景預覽以及預覽用戶的斷開等功能。

1.場景列表

2.場景屬性

功能截圖：

3.Token管理

功能描述：

3.1Token：Token 就相當于打開場景的鑰匙，首先要對 Token 進行驗證，只有 Token 驗證通過，才可以對場景進行預覽操作。

3.2復制 Token：當管理員分配給用戶使用時，就可以把這個 Token 發送給用戶，然后用戶就可以通過這個 Token 完成對場景的預覽操作了

3.3更新 Token：當管理員不想讓那個現有用戶使用了，就可以更新 Token，然后再分發新的 Token，讓擁有新 Token 的用戶繼續使用

3.4暫停使用：如果管理員不想這個場景被使用，就可以暫停使用，這樣這個場景就不可以被訪問了，訪問的用戶也會被退出

3.5過期時間設置：設置 token 的有效期，到期后會自動更新 token

4.場景預覽

功能截圖：

5.查看和斷開連接

管理員可以在此頁面上看到當前使用該場景的用戶 IP。當管理員不希望某個用戶預覽這個場景，就可以踢出該用戶，讓其斷開連接。

四、預熱駐留

1.界面概覽

2.通道使用狀態查看

這個功能可以很直觀的查看當前服務器的通道使用情況，合理使用服務器資源。

3.設置預熱數量

預熱場景：可以將一個或多個場景設置為預熱狀態,預熱狀態下場景將在后臺啟動并持續運行，當有用戶預覽時，如果存在未使用的預熱的場景，將直接與該場景建立連接，不需要等待場景的啟動時間，在場景較大時，可以節省數十秒的啟動時間。

五、操作日志管理

操作日志查看

六、渲染設置

渲染設置

在渲染設置界面中，可以顯示顯卡列表和設置標準通道數，重啟服務和重啟設備的功能

七、系統設置

1.界面概覽

2.啟用場景預覽頁面

可以勾選開啟場景預覽頁面。開啟后，啟用 9090 端口的前端預覽頁面。該頁面不需要用戶登錄即可訪問場景。

3.Https設置

在這一模塊，可以將流渲染服務轉換為 https 的安全訪問。提供本地證書供測試使用，也支持證書與私鑰的上傳。

4.端口號設置

在這一模塊，可以修改流渲染服務的前端和后端端口。后端端口指的是當前使用的管理平臺訪問端口，前端端口是 API 調用端口與場景預覽頁面端口。

5.中繼服務

由于 NAT 和防火墻的存在, 在公有云或者復雜網絡環境下，客戶端瀏覽器可能無法正常接收流渲染服務傳輸的視頻流。這時需要使用中繼服務進行視頻流的轉發，使視頻流可以正常傳輸到客戶端。

6.數據服務

開啟內置的數據服務，數據服務為 TGAPI 提供了數據聚合、數據篩選、周邊查找 以及大數據傳輸等功能，并且每個通道的數據獨立，當某個通道結束訪問后，數據會自動清除。

7.日志定時清理

日志定時清理：定時清除服務器上的日志文件，包含服務自身和項目運行日志文件 。

詳見圖觀官網：http://www.hhhhh10086.cn/doc/streaming-server/?features.install

一、圖觀統一開發API概述

圖觀統一開發 API 是一套基于 JavaScript 語言開發的二次編程接口，用于在現代瀏覽器中加載、顯示圖觀引擎提供的流渲染或端渲染三維場景，并且為開發者提供在場景中繪制業務數據、觸發場景交互、控制場景邏輯的功能。圖觀統一開發 API 兼容當前主流的 JavaScript 前端框架，例如 Vue.js 或者 React，前端開發人員可快速便捷的進行二次開發。

1. 雙渲染技術架構

圖觀的渲染核心有流渲染和端渲染兩種。對于TGAPI的二次開發接口是一致的。這里簡單介紹兩種渲染核心的技術架構。

流渲染

圖觀 流渲染開發架構，是基于實時云渲染（ GPU 云化）、視頻串流等技術，整合推出可視化數字孿生流渲染解決方案技術支撐體系，涵蓋：流渲染服務平臺、流渲染二次開發等技術產品，為大規模場景渲染在輕量化終端上的呈現提供技術保障。

流渲染系統架構如下圖所示:

端渲染

圖觀 端渲染開發架構，是基于 HTML5 和 WebGL 技術，整合推出的數字孿生端渲染技術支撐體系，涵蓋端渲染場景編輯器、端渲染服務平臺、端渲染二次開發等技術產品，覆蓋數字孿生應用開發的全生命周期，提供簡便、快捷、強大的數字孿生應用運行和開發平臺。

端渲染系統架構如下圖所示:

2. 圖觀引擎場景和二次開發效果速覽

流渲染效果速覽

端渲染效果速覽

3.TGAPI接口體系

TGAPI 3.3正式發布的版本，共有接口總數500多個，其中方法數量200多個、事件數量300多個。

4.TGAPI方法指令范式

TGAPI除了構造應用使用的new TGApp.app()和初始化服務appInstance.initService()兩個接口以外，都是使用appInstance.uniCall(action, parameter, callback)方法來調用的，第一個參數為指令名稱，第二個參數為指令參數，第三個參數為回調函數。

5.TGAPI指令回調結果

每個uniCall的指令調用，在第三個參數都包括一個callback回調函數?；卣{函數的結果，通過一個Object類型的對象返回。

6. TGAPI事件訂閱

如上方提到的，TGAPI的事件訂閱指令為addEventListener, 參數對象中包括了eventName和一個回調函數callback，其中eventName是需要監聽的事件，callback為事件觸發時執行的方法。同一個事件，可以監聽多次，執行不同的方法。

對應的，取消事件訂閱指令為removeEventListener，可以移除指定事件和回調函數的對應關系。

在圖觀統一開發API中，事件的總數量甚至是比接口指令的數量都要多。掌握好事件監聽，能夠接收和處理事件的回調消息，對于二次開發好一個應用具有特別重要的意義。特別是對于需要和場景進行交互，感知場景狀態，獲得場景中無接口調用信息，通過場景觸發或者用戶交互觸發的消息的功能開發。在后面還會詳細說到一些事件的具體用法。

二、統一接口調試器

在本章教程中，我們主要講解圖觀統一開發API的輔助調試工具圖觀統一接口調試器。

1.接口調試器優勢

圖觀統一接口調試器主要有以下功能優勢：

• 圖觀統一接口調試器內置了一套最新的圖觀統一開發API，全部的代碼可以脫離接口調試器，在TGAPI SDK中單獨運行。

• 可以幫助開發者省去使用程序開發IDE搭建環境、運行程序的繁瑣步驟，在線輕松的測試圖觀已經發布的場景。

• 內置大量的TGAPI標準功能測試代碼，可以在您的場景中默認執行。其代碼片段亦可作為您的開發手冊進行查閱，并復制到您的工程代碼中。

• 提供繪制功能，可以在加載的圖觀場景中標繪點、線、面數據，獲得基于場景真實坐標，并且導出數據。

• 提供生成模擬代碼功能，可以根據您的標繪點線面數據，生成模擬的圖觀統一開發API中的圖層數據，生成代碼。解決您在沒有真實數據時，開發項目需要生成模擬數據的苦惱。

• 綜合測試功能可以保存您的測試代碼，或者生成的模擬代碼，以備后續調用。

2.創建調試場景

2.1預先條件

如果您準備使用圖觀統一接口調試器加載練習場景，需要具備以下硬件和軟件的條件。

硬件

8G內存，有獨立顯卡，NVIDIA GTX 960及以上的筆記本或者臺式機。

軟件

操作系統：Windows，MacOS，Linux均可
推薦使用Google Chrome 瀏覽器，版本88及以上（2021年1月之后版本），或者Microsoft Edge 版本88及以上、360瀏覽器版本13及以上
如需查看自己的Google Chrome瀏覽器版本，您可以在瀏覽器地址欄中輸入 chrome://settings/help，或者點擊菜單 -> 設置 -> 關于Chrome

2.2登錄圖觀打開接口調試器

打開谷歌瀏覽器，輸入圖觀網址http://www.hhhhh10086.cn并訪問，我們就進到了圖觀的官網點擊官網導航欄右側的 登錄 按鈕，看到了登錄界面，輸入已開通好的賬號和密碼后點擊 登錄。進到了圖觀業務管理界面，在“我的業務”中有“租戶服務”、“端渲染場景服務”、“接口調試器服務”、“應用編輯器服務”4種服務，我們選擇“接口調試器服務”點擊 前往 按鈕。

進入接口調試器首頁

2.3 接口調試器首頁介紹

進入到接口調試器的首頁頁面， 頁面左側是 場景管理列表，在這里我們可以對我們所有場景進行分類整理，便于我們后續查找。中間Tab欄切換 工作臺 和 案例庫，工作臺 可新建場景并展示所有已創建場景；案例庫 中的案例可以進行預覽到導入到自己的工作臺。頁面右上顯示公告，幫助及用戶設置。

2.4.創景場景“智慧社區”

點擊“新建場景”，將會彈出“新建場景”對話框。

場景類別選擇默認“端渲染”，場景名稱中輸入中文名稱“智慧社區”，場景鏈接輸入http://www.hhhhh10086.cn/api/sceneEditor/v1/scenes/ed402a51-a00a-48f2-8b60-f51963440e82/loadAVWS，點擊“確定”按鈕即可完成項目的創建。

鼠標懸停在場景面板上可以喚醒隱藏的功能菜單，我們可以對該場景進行“重命名”、“移動”、“復制”、“刪除”。現在我們點擊 編輯 按鈕，打開該場景。

2.5.場景首頁介紹

進入場景首頁后，可以看到：

界面上方是“單體測試”和“綜合測試”切換按鈕。

2.6 單體測試功能介紹

2.6.1單體測試介紹

在單體測試中，界面主要位置顯示的是需要調試的三維場景，場景上疊加有工具欄，工具欄的功能后續會有相應介紹。

2.6.2. 使用場景對象

在場景對象中，如果您選中了一個模型節點，將會在“模型”代碼執行的時候使用這個模型ID。

2.6.3. 使用圖層對象

如果場景已經設置好了基準點，對應了場景和經緯度信息，在圖層對象中的所有圖層測試數據都會自動圍繞著這個場景中心點的經緯度來模擬生成。

在全局對象中選中“其他控制”，點擊“獲取當前基準位置”，并執行代碼，可以在下方看到本場景已經設置了經緯度基準點，如果所示。

2.7繪制和模擬生成代碼

在二次開發場景過程中，會經常遇上在場景內獲得點位、鏡頭信息甚至是生成模擬數據的需求，這些在接口調試器中都有對應的功能。

2.7.1.獲取場景點位和鏡頭信息

如果只是獲取單個點位和鏡頭信息，最快速的方法是使用工具欄的【獲取經緯度】和【獲取當前視角參數】功能。

2.7.2 繪制

工具欄上的第三個和第四個按鈕，是非常重要的功能，這里先介紹第三個 繪制 按鈕。

進入到繪制功能之前，請先使用 設置 功能，進入 標繪設置 確認路線和區域的設置，特別是路線寬度和圍欄高度，這個數值的單位都是米。在不同大小的場景下，請確保這個數值不會過大或者過小造成看不到的問題。

請按照如圖所示設置數值，并點擊 確定。

區域繪制

添加

編輯

在三維場景中或者區域列表中，單擊一個已經繪制好的區域，可以進入到編輯狀態。這時，您可以通過 平移交互軸 調整整個區域位置。通過加號圖標在區域上添加一個新的關鍵點。

2.7.3生成模擬代碼

工具欄上的第四個按鈕，是非常重要的 生成模擬代碼 功能。點擊這個按鈕，會彈出 生成模擬代碼 對話框。

對話框分為三個Tab頁簽，分別是“圖層”， “模型/特效”和“視點”。每個Tab頁簽下方可以選擇更加具體的代碼類型，點擊右側的“加號”按鈕，可以生成對應類型的模擬代碼。

選中 圖層 Tab頁簽，在圖層類型中選擇 三維柱圖，然后點擊“+“按鈕。

鼠標懸浮在圖層上，可以激活圖層操作按鈕，如圖所示，功能分辨是“修改”，“添加到綜合測試”、“定位”和“隱藏”

2.8使用綜合測試

在上面最后的步驟中，我們已經來到了 綜合測試 頁面。

3.使用案例庫

在接口調試器中，為您提供了案例庫功能。使用案例庫，您可以快速瀏覽接口調試器的場景中的代碼執行，并且將您感興趣的案例導入到自己的工作臺中，繼續進行參考、編輯。

在接口調試器首頁點擊案例庫。

找到 開發教程卡通版。

點擊 預覽 按鈕，這是打開了接口調試器預覽頁面。

在新開的瀏覽器標簽頁里，左側綜合測試列出來當前場景的接口調試器內置測試代碼。

鼠標懸浮在列表項上，可以激活 查看代碼 按鈕。

點擊 查看代碼 按鈕，在右側代碼面板可以查看測試用例的詳細內容。

單擊列表項可以執行代碼。

返回到之前的案例庫頁面，找到 開發教程卡通版，鼠標點擊 導出 按鈕。

在彈出的導出對話框了，選擇一個希望導入工作臺的節點。一版選擇 根節點 也可以。

點擊 確定 按鈕。

這樣案例庫的示例工程就會出現在 工作臺 對應的節點目錄下。打開后，跳轉到 綜合測試 可以看到示例代碼功能。

在本教程后面的章節中，全部的示例代碼片段都存在于這個 開發教程卡通版 的案例工程里。所以請您在進行后面課程之前，導入到自己的工作臺中。

詳細開發教程 詳見圖觀官網：http://www.hhhhh10086.cn/doc/tg-api/?tutorial.tutorial_1

圖觀 零代碼 應用編輯器，通過拖拉拽所見即所得的操作，不寫一行代碼，即可完成簡單的 數字孿生 應用開發。支持圖表控件配置、場景服務調用、復雜交互配置、應用預覽發布等功能。內置豐富的可視化組件、頁面模板、全面的可編輯屬性，支持二次開發。大幅降低開發門檻，助您便捷構建 簡單的數字孿生應用。

首先，我們要了解 數字孿生應用的基礎概念和軟硬件環境準備

第一節 數字孿生應用的重要基本概念

首先呢，和大家說明一下在數字孿生應用中經常遇到的幾個重要的基本概念，“APP”、“頁面”、“場景”、“狀態”

APP：是指構建的數字孿生應用程序，也可以理解為是一個項目。

頁面：是指容納一切用戶關注業務內容的載體，在某些可視化系統中也稱為主題。

場景：在這里是指由場景編輯器發布的場景，該場景可以被應用編輯器調用。圖觀應用編輯器即支持端渲染場景也支持流渲染場景。

狀態：是指三維場景通過場景編輯器預設或者手動調整后，針對場景模型屬性、視野范圍、攝像機參數、光照參數等一系列參數產生的“快照”。

如圖所示，一個數字孿生應用是由多個頁面構成的，每個頁面可以加載一個或多個三維場景，每個場景呢又涵蓋了多個狀態，因此，原則上每個頁面都可以關聯多個狀態，并可以通過交互切換場景的各個狀態。

第二節 圖觀應用編輯器的功能簡介

在了解了以上的基本概念后呢，我們要來介紹一下圖觀應用編輯器了，當前我們看到的這個界面就是應用編輯器的主界面了。

我們可以看見界面上方tab欄顯示“工作臺”和“資產庫”，默認是選中了“工作臺”，左側是項目的文件夾管理列表，中間顯示已創建的項目，點擊“新建可視化項目”可進行項目的創建。

資產庫
點擊“資產庫”按鈕，界面就可以進行切換顯示，左側是資產庫列表，分為系統資產和租戶資產兩大類，中間顯示選擇的資產內容。系統資產就是我們編輯器自帶的資產內容，租戶資產是用戶根據自己意愿將已做好的項目中的頁面、組件、圖片、場景等點擊“導入資產”按鈕后的資產內容，在此處進行顯示內容。

組件編輯
點擊進入“組件編輯”頁簽，左側是組件管理列表，中間顯示已添加的組件。組件也稱為“卡片”，是一組可視化要素的集合，常用于制作復用的業務卡片或者彈出面板。點擊“新建組件”可進行組件的創建。

參數編輯
點擊進入“參數編輯”頁簽，如果當孿生應用涉及的圖表之間的數據聯動交互，可通過“參數編輯”功能來設置圖表的參數進而實現多個圖表的數據關聯。

圖片素材
點擊進入“圖片素材”頁簽，左側是圖片素材管理列表，中間顯示已添加的圖片素材，圖片素材用來上傳孿生場景中涉及的圖片內容，支持添加本地圖片和在線圖片兩種方式，添加完成的圖片素材，在頁面編輯下方的“本項目-圖片”中顯示，可在拖拽到畫布中進行設置。

第三節 "智慧社區運營中心"成果案例展示

現在大家在屏幕中看到的這個案例，就是我們要給大家分享演示的，基于圖觀應用編輯器做出的數字孿生應用：“智慧社區運營中心”。

第四節 軟件和硬件的環境準備

在2K分辨率場景下推薦使用NVIDIA GTX 1660或以上級別獨立顯卡，在4K分辨率場景下推薦使用NVIDIA RTX2070或以上級別獨立顯卡。如果硬件顯卡達不到這個級別，也可以通過場景設置，在應用編輯器的編輯狀態不加載三維模型，或者保持模型大小不超過50兆一般也是可以使用的。

如果主機或筆記本是雙顯卡，或者一個主板整合顯卡一個獨立顯卡的情況，默認瀏覽器可能調用的是主板整合顯卡，而不是性能更強勁的獨立顯卡。就需要正確的配置操作系統、顯卡驅動和瀏覽器設置，讓獨立顯卡在瀏覽器中起作用。
詳見以下網址：http://show.tuguan.net/xksz

針對軟件環境推薦使用Windows10操作系統，瀏覽器使用谷歌Chrome瀏覽器，并升級到最新版。

如果在加載三維場景的時候卡在0%或者99%，大多數情況是因為瀏覽器不支持或者瀏覽器版本太低導致對WebGL的支持不全面。所以如果遇到這種情況，請先檢查瀏覽器和版本。

第五節 獲取“智慧社區配套素材”

本教程指南以構建“智慧社區運營中心”數字孿生應用為例，小伙伴首先需通過以下三種方式獲取“智慧社區配套素材”。
1、百度網盤獲取

2、添加圖觀客服微信獲取

3、輸入網址直接獲?。?a target="_blank" rel="noopener noreferrer nofollow ugc">https://show.tuguan.net/tutorial/zhsqcjb

第二章 快速搭建并發布第一個數字孿生應用

第一節 圖觀登錄，選擇應用編輯器進入

首先我們打開谷歌瀏覽器，輸入圖觀網址http://www.hhhhh10086.cn 并訪問，然后我們就進到了圖觀的官網。

如果第一次訪問圖觀，首先需要注冊一個賬戶，可以添加圖觀客服微信索取邀請碼。填寫邀請碼和基本信息后，就開通了圖觀的賬號。

點擊官網導航欄右側的【登錄】按鈕，就看到了登錄界面，輸入已開通好的賬號和密碼后點擊【登錄】，我們就進到了圖觀業務管理界面，能看到在“我的業務”中有“租戶服務”、“端渲染場景服務”、“接口調試器服務”、“應用編輯器服務”4種服務，我們選擇“應用編輯器服務”點擊【前往】按鈕，這樣我們就進入到了應用編輯器的首頁了。

創建新應用：在應用編輯器中，您可以選擇創建新應用。通常，您需要為新應用提供一個名稱，并選擇一個應用模板（如果有的話）。應用模板可以幫助您快速搭建一個基本的應用結構。

編輯界面和布局：應用編輯器提供了可視化的界面編輯功能，您可以通過拖拽組件、調整布局和設置樣式來設計應用的界面。編輯器中通常會包含一些預定義的組件，如按鈕、文本框、圖表等，您可以根據需要添加到應用中。

配置組件屬性：每個組件都有一些可配置的屬性，如顏色、尺寸、數據綁定等。您可以通過編輯器的屬性面板來設置這些屬性，實現組件的個性化定制。

添加交互邏輯：應用編輯器通常提供了一種簡化的編程方式，如圖形化編程或低代碼編程，讓您可以在不編寫復雜數字孿生代碼的情況下實現應用的交互邏輯。您可以通過這些方式為組件添加事件處理器，如按鈕點擊、滑塊拖動等。

預覽和測試：在編輯過程中，您可以隨時預覽和測試應用的效果。這有助于您發現潛在的問題并及時進行調整。

保存和發布：完成編輯后，您可以保存應用并將其發布到平臺上。發布后的應用可以與數字孿生模型和數據進行集成，為您的業務提供支持。

總之，使用應用編輯器需要進行以下步驟：登錄平臺、打開應用編輯器、創建新應用、編輯界面和布局、配置組件屬性、添加交互邏輯、預覽和測試、保存和發布。通過這些步驟，您可以在數字孿生開發平臺上輕松創建和編輯應用程序。

詳細的開發教程 見圖觀官網：http://www.hhhhh10086.cn/doc/application-editor/?tutorial.concept

首先我們來了解一下跟 圖觀 端渲染場景編輯器相關的 基礎概念。

首先什么是【端渲染】

端渲染是指在Web應用程序中基于客戶端瀏覽器本身能力也就是HTML5 和 WebGL 技術，實時渲染三維場景的技術方案。適用于中小場景，優點是對服務器負擔小，支持高并發，帶寬要求低。場景構建過程所見即所得，大大降低技術門檻，節省在數字孿生項目中的升級改造成本。但是，渲染依賴客戶端顯卡配置，如果場景過大或者顯卡配置過低，都可能會導致場景運行卡頓。

使用端渲染場景編輯器，對電腦的配置要求是：需要有獨立顯卡，在2K分辨率場景下建議配置為英偉達 GTX 1660以上級別，在4K分辨率場景下建議配置為英偉達 RTX2070或以上級別。如果您的顯卡配置沒有達到推薦配置，場景編輯器也是可以正常打開的。本次課程用到的模型資產也可以使用內置的卡通模型替代。只是或者導入的模型盡量控制在50兆以內一般也是可以的。

那么什么是【數字孿生場景】

數字孿生場景直觀的講，就是數字孿生應用中的三維場景部分。

場景由一個或多個模型組成，除模型外場景中還包含燈光、特效、圖片等。模型則包含節點、材質、以及對應的關節、動畫信息。同一個數字孿生場景可以配置多個不同的效果參數及鏡頭信息，從而形成多個場景狀態，方便在應用開發中快速調用切換。

圖觀【場景編輯器】是一款基于瀏覽器運行的編輯器軟件產品，只需要在網頁瀏覽器中通過鼠標拖拽和調整效果參數，就可以快速完成三維場景構建，并且實現超凡的渲染效果。場景配置完成后，可一鍵發布為云服務，支持網頁瀏覽和程序二次開發調用。

功能簡介

圖觀場景編輯器的主要功能包括場景編輯、模型編輯、狀態編輯、坐標編輯、以及場景預覽和發布。其中場景編輯，主要是用來使用模型組合場景，同時配置場景燈光、特效等參數。

模型編輯，主要用來調整單個模型的節點位置、大小、以及材質、關節、動畫等。
狀態編輯，可以預置一個或多個場景效果快照，從而使數字孿生應用方便地切換顯示參數，進而極大的減少場景控制代碼量。
坐標編輯，可以通過與地圖服務疊加，將三維場景x、y、z坐標與真實世界中的經度、緯度、高度坐標系進行匹配，實現經緯度定位。
圖片管理，用來導入和管理場景中用到的圖片素材。在場景構建過程中隨時可以點擊“預覽”，查看場景配置效果。配置完成后可以發布為場景服務，供后續應用開發使用。

案例預覽

最后我們來預覽一下本次課程將要完成的數字孿生場景最終效果。

現在大家看到的，就是基于圖觀場景編輯器構建的“智慧社區”數字孿生場景，整個場景包含多個狀態，例如：全景展示、頂視圖、閘機和住宅，我們在閘機狀態配置了閘機抬桿的關節動畫，在住宅狀態配置了建筑樓層剖分效果，場景使用了兩個外部模型和多個圖觀內置模型資產搭建，想要下載模型嘗試自己搭建的小伙伴，請掃屏幕上的二維碼，關注“圖觀”微信公眾號，回復“智慧社區模型”獲取或添加圖觀客服微信獲取。

使用 圖觀場景編輯器的關鍵步驟

1.打開 場景編輯器：在平臺主頁面上，找到端渲染場景編輯器的入口，點擊即可進入。

2.創建新場景：在場景編輯器中，您可以選擇創建新場景。通常，您需要為新場景提供一個名稱。

3.導入模型：在場景編輯器中，您可以導入已有的三維模型，如建筑、設備、地形等。這些模型可以是您自己創建的，也可以從第三方資源庫中獲取。

4.編輯場景：場景編輯器提供了豐富的模型資源、可視化的編輯功能，您可以通過拖拽、縮放、旋轉等操作來調整場景元素的位置和方向。同時，您還可以對場景元素進行分組、隱藏、鎖定等操作，以便更方便地管理場景。

注：模型單位最好與圖觀場景編輯器統一設置為米。建模時盡量減少多邊形數量及頂點數。刪除物體內部永遠不可見的面，減少零碎物體個數。模型材質使用標準材質或者物理材質。格式保存為GLB。

5.配置場景屬性：為了讓場景更加真實和生動，您可以設置場景的一些屬性，如光照、陰影、霧效等。這些屬性可以通過編輯器的屬性面板進行調整。

6.添加動畫和交互：場景編輯器通常支持為場景元素添加動畫和交互功能。例如，模型關節數據驅動、運轉動畫等。

7.預覽和測試：在編輯過程中，您可以隨時預覽和測試場景的效果。這有助于您發現潛在的問題并及時進行調整。

8.保存和發布：完成編輯后，您可以保存場景并將其發布到平臺上。發布后的場景可以與數字孿生模型和數據進行集成，為您的業務提供支持。

詳細的開發教程 見圖觀官網
http://www.hhhhh10086.cn/doc/scene-editor/?tutorial.overview

一、 產品概述

圖觀應用服務器，是為基于圖觀應用編輯器生成的零代碼數字孿生應用，提供項目導入、項目管理、項目離線遷移配置、項目訪問控制等功能應用的專用軟件服務。

二、 產品功能

1. 應用管理

圖形化管理界面，操作簡單高效；提供數字孿生應用資源導入、多應用一站式托管服務，可自動識別數字孿生應用的層級結構并生成分級導航，實現場景資源的便捷管理。

2. 應用訪問控制

支持應用角色統一管理，可一鍵創建、刪除用戶角色，并可對每一個頁面設置用戶角色的瀏覽權限；支持添加用戶，并為用戶分配角色信息，可一鍵開通/關閉用戶的瀏覽權限，無需任何代碼開發工作，大幅提升應用管理效率。

3. 訪問日志管理

支持訪問日志管理，可直觀查看應用訪問時間、訪問用戶、用戶名稱、訪問頁面等信息，支持一鍵導出訪問日志，可實時掌握用戶訪問情況。

4. 支持離線部署

針對特定用戶需求，提供應用服務器離線部署服務，離線部署版支持導入用戶應用數據，并可對數字孿生應用進行自定義分組，充分滿足用戶需求。

三、 產品優勢

1. 便捷高效的應用管理

友好易用的圖形化交互界面，零代碼開發，操作簡單高效，大幅節省場景管理的時間和成本。

2. 穩定高效的運行性能

具備穩定可靠的運行服務能力，場景資源一鍵性能優化，實現超凡顯示性能、高效響應。

3. 數據安全加密

原生滿足 Web 應用防火墻管理，保護用戶數據隱私；租戶數據物理隔離，數據網絡傳輸端到端加密，符合業界專業標準，通過第三方安全實驗室測試。

一、 產品概述

圖觀應用編輯器，是以B/S架構為基礎，圍繞數字孿生全要素場景，零代碼、輕松構建專業級數字孿生應用的專用產品。原生兼容云上云下多源異構數據，具備豐富的可視化組件、便捷的配置管理工具、全面的可定義對象屬性、超凡的實時渲染效果，支持二次開發、部署發布等功能，可廣泛應用于構建各細分行業的數字孿生解決方案。

二、 實施流程

基于圖觀應用景編輯器，零代碼即可輕松實現數據接入——場景導入——圖表配置——交互配置——場景發布一站式應用編輯，幫助開發者輕松駕馭 數字孿生應用開發！實施流程如下：

三、 產品功能

1. 頁面創建

支持針對不同應用需求，創建不同的顯示頁面，提供圖形化的頁面配置功能，可以自定義頁面布局，新建/修改/保存頁面布局模式。

2. 場景服務調用

支持全要素場景調用，自由切換 端/流 渲染服務，復用全部應用工程配置，告別無效重復勞動，充分滿足不同應用需求。

3. 場景圖層編輯

支持在場景中添加多類型數據圖層，如地標圖、柱圖、氣泡圖、熱力圖、飛線圖、區域圖、軌跡圖等，將業務數據與孿生場景充分結合，支持用戶構建復雜場景應用。

4. 頁面圖表編輯

內置近百種圖表/圖層/界面控件，全拖拽式自由頁面布局，可配置豐富的樣式/數據/交互屬性，定制高度個性化的組件樣式，支持 BI 式互動數據分析，實現豐富的數據可視化效果。

5. 多源數據接入

強大的數據兼容性，支持多種來源、格式、類型的數據融合接入，支持手工錄入/數據庫/數據接口/文件上傳多種數據對接方式，提供數據源、數量字段、類別字段、經/緯度等數十種編輯選項，可快速將可視化組件屬性和數據進行綁定，真正為用戶業務應用賦能。

6. 自定義控件接入

支持頁面、組件、圖層二次開發；提供開發SDK，上傳通過審核，即可在應用編輯器中使用，滿足特殊定制需求。

7. 頁面交互編輯

內置眾多交互指令，可靈活配置交互關系，如：地圖聯動、圖表聯動、表表聯動、關聯選中、數據回放、數據篩選、圖層控制、建筑剖分等；支持復雜腳本編程；通過簡便配置即可實現孿生場景、操作界面、數據圖層/圖表的復雜交互邏輯。

8. 數字孿生應用預覽發布

便捷高效的應用生成配置，一鍵發布數字孿生云應用，大幅降低部署成本和復雜度，用戶可通過瀏覽器輕松訪問；支持私有云部署，靈活應用不同使用情景。

四、 產品優勢

1. 輕松接入 多源異構數據

強大的數據兼容性，原生兼容業界各類地理信息數據、傾斜攝影數據、無人機航拍數據、精細建筑結構數據、BIM/CIM數據、傳感器數據、城市部件數據等，以及數據庫、數據平臺、云服務、業務系統、仿真引擎、傳感器/視頻監控/物聯網、模型算法等多源數據，充分滿足業務應用需求。

2. 零代碼開發，大幅提升開發效率

全拖拉拽式、零代碼頁面搭建，靈活自定義編輯，通過簡單的配置操作即可快速構建出功能強大、效果炫酷的數字孿生應用，有效縮短實施周期，大幅降低開發門檻和成本。

3. 豐富的圖表、圖層組件，全面的配置屬性

內置上百種 圖表、圖層、界面控件，全面的可配置屬性，支持多維關聯可交互數據分析、靈活的交互邏輯定制，幫助開發者輕松駕馭 數字孿生應用開發。

4. 靈活擴展，支持自定義控件開發

提供二次開發SDK，可根據實際需求靈活的進行現有控件調整、修改，自定義控件擴充，充分滿足用戶業務定制需求。

5. 渲染模式自由切換，跨平臺適配

原生兼容端渲染/流渲染開發架構，可自由切換 端/流 渲染服務，復用全部應用工程配置，告別無效重復勞動。靈活適配大中小屏演示環境，強大的跨平臺發布能力，靈活的云部署方案，既可發布為私有云部署版，也可以發布為公有云在線版，靈活應對不同使用情景。

一、 產品概述

圖觀統一API調試器，可調用場景編輯器發布的三維場景服務，基于統一開發API示例代碼，進行簡單修改代碼模板，即可快速調試場景交互效果、進行數據標繪與導出等，修改操作所見即所得，可為開發者提供在場景中測試接口、生成數據的能力，助您快速掌握開發技能。

二、 產品功能

1. 場景服務調用

支持集成圖觀 場景編輯器”生成的全要素場景，內含圖觀 統一開發API全部接口的示例代碼，只需簡單修改參數即可對相應接口進行開發調試。

2. 端/流切換

原生支持端/流雙渲染架構，一套代碼，可兼容相同地理位置的不同場景服務，場景服務自由切換，移植便捷。

3. 單項接口調試

提供完備 API 體系，針對每項接口，可快捷編寫控制邏輯、數據繪制代碼，點擊執行，立即看到結果，所見即所得。

4. 綜合接口調試

支持組合 API 調用，調試復雜邏輯代碼、編寫復雜腳本，實時調試、所見即所得，滿足復雜開發需求。

5. 數據標繪和代碼數據導出

可在三維場景中 自定義進行點/線/面 標繪，并可基于標繪數據，自動生成數十類 API 調用代碼，并支持填充模擬演示數據，有效提高數據繪制效率。

三、 產品優勢

1. 上手寶典，全部數百 API 代碼模板

提供數百項API 代碼模板，并可基于前端開發框架自主進行二次開發擴展，靈活滿足各種開發需求。

2. 邏輯代碼統一，場景服務自由切換

原生支持端渲染和流渲染服務，使用統一接口調用方式，一套代碼，端/流兼容，可兼容相同地理位置的不同場景服務，移植便捷，可復用度高。

3. 實時調試，所見即所得

只需簡單修改代碼模板，即可實時預覽、測試接口編輯效果，點擊執行，立即看到結果，易于反復嘗試出滿意結果。

一、 產品概述
圖觀統一開發 API 是一套基于 JavaScript 語言開發的二次編程接口，用于在現代瀏覽器中加載、顯示圖觀 引擎提供的流渲染或端渲染三維場景，并且為開發者提供在場景中繪制業務數據、觸發場景交互、控制場景邏輯的功能。圖觀統一開發 API 兼容當前主流的 JavaScript 前端框架，例如 Vue.js 或者 React，前端開發人員可快速便捷的進行二次開發。

二、 產品功能

1. 圖層繪制

圖觀統一開發 API 可提供500余項API調用接口，支持地標點、熱力圖、柱圖、氣泡圖、地標圖、軌跡圖、三維柱圖、區域圖、柵格圖、關系圖、類型/數值區域圖、聚合等豐富的數據圖層接口編輯繪制。

2. 場景特效繪制

支持調整天氣、光照、雨雪霧、煙花、螢火蟲、信息雨、人流線、車流線等場景特效，可輕松構建出效果非凡的三維場景。

3. 全局控制

支持多數據接口的交互控制，如場景攝像機鏡頭控制、狀態控制、建筑結構、事件處理、分析圖層交互等，開發者可在 web 前端基礎上，根據業務邏輯輕松實現三維場景要素圖層的加載顯示和交互分析。

3.1. 場景控制

支持構造應用、場景調度、建筑剖分、狀態切換、事件監聽、時間天氣等數十種API接口。

3.2. 鏡頭控制

支持場景鏡頭視界、鏡頭漫游、鏡頭聚焦等數十項鏡頭控制接口，調度全要素場景中的鏡頭行為和攝像及參數等。

3.3. 數據要素交互

支持數據檢索、圈選、定位、篩選點選查看、智能選中；支持事件響應；空間量算、測距、標繪等。

三、 產品優勢

1. 上手寶典，全部數百 API 代碼模板

提供數百項API 代碼模板，并可基于前端開發框架自主進行二次開發擴展，靈活滿足各種開發需求。

2. 邏輯代碼統一，場景服務自由切換

一套代碼，端/流兼容，可兼容相同地理位置的不同場景服務，移植便捷，可復用度高。

3. 文檔完善，開發無憂

提供詳細全面的開發文檔和使用教程，為用戶開發使用提供完備參考依據，助力用戶開發無憂。

4. 便捷易用，調用靈活

通過調用良好封裝的JS SDK，可以方便快捷的三維場景添加各種圖層接口，快速定制符合業務需求的API接口。

一、 產品概述

圖觀流渲染場景服務，提供云端一站式場景管理、視頻流服務，將大規模數字孿生場景在云端進行分布式渲染，采用視頻串流技術將高性能三維渲染畫面實時傳送給用戶，突破終端限制，用戶無需安裝下載任何內容，通過任意現代網絡瀏覽器即可訪問高質量數字孿生應用，并支持終端用戶和云端應用的實時交互，為用戶提供輕量化、高效便捷的云渲染支持，供后續數字孿生應用開發集成調用。

二、 產品功能

1. 項目管理

圖形化管理界面，基于管理中心，可查看多個項目的版本信息、程序大小、創建時間、版本描述等信息，并可進行項目新建/編輯/刪除、添加/修改/刪除項目版本、創建場景等編輯操作，并可對項目內多個版本信息進行統一管理，操作直觀便捷。

2. 場景管理

支持對項目中的多個流渲染場景進行集中管理，支持新建場景，并可對場景名稱、分辨率、選擇項目、縮略圖等基本屬性進行編輯，同時可設置場景視頻質量參數、渲染倍數、預熱重置、交互指令、瀏覽時間限制等屬性，輕松管理用戶場景數據。

3. 預覽訪問控制

兼容當前主流瀏覽器，可基于網頁直接進行訪問。支持場景Token 復制、更新、暫停、設置時間限制，支持單用戶獨享一個渲染服務或多用戶共享一個渲染服務，可一鍵斷開用戶預覽權限，靈活應對不同應用需求。

4. 預熱駐留

通過管理中心，可以直觀查看當前通道的使用狀態，以及設置場景預熱/非預熱的通道數量，輔助用戶合理配置服務器資源；開啟預熱駐留，渲染場景自動預先加載，用戶預覽即點即用，秒級響應，大幅提升運行響應效率。

5. 日志管理

支持訪問日志、操作日志、錯誤日志的查看、篩選、搜索、導出、刪除、一鍵跳轉等操作，輔助用戶實時掌握場景運行狀況，提高運維效能。

6. 渲染設置

支持自動識別顯卡列表、服務器項目存儲使用空間、通道使用狀態等信息；可根據顯卡性能，自定義設置顯卡標準通道數，合理控制服務器的硬件資源；同時支持一鍵重啟渲染服務和流渲染服務器，實現服務器的遠程一鍵控制。

7. 輔助工具

提供網絡帶寬測試、網絡延遲測試以及硬件檢測等功能，幫助用戶直觀了解服務器的實時網絡狀況和硬件信息評分，實現便捷運維。

三、 產品優勢

1. 多端適配

兼容當前主流瀏覽器，可基于網頁直接進行訪問；支持 PC、手機、Pad、大屏等終端硬件，多屏一體化聯動，跨終端提供一致體驗。

2. 秒級啟動

開啟預熱駐留，渲染場景自動先加載，即點即用，秒級響應，大幅提升使用效率。

3. 非凡視效

高性能全要素場景加載，超大場景智能化全尺度加載（LOD），超精細還原真實世界紋理細節，穩定可靠的大數據吞吐能力，超凡的顯示性能，滿足超大范圍、超大規模場景要素的渲染、交互性能需求。

4. 數據加密

原生支持 Web 應用防火墻，保護用戶數據隱私；租戶數據物理隔離，數據網絡傳輸端到端加密，符合業界專業標準，通過第三方安全實驗室測試。

一、 產品概述

圖觀端渲染場景服務器，是專為圖觀場景編輯器生成的場景服務提供訪問服務能力、訪問控制、場景管理的軟件服務。產品基于HTML5 和 WebGL 技術，通過客戶端顯卡實現輕量級三維場景在瀏覽器的渲染，并且滿足多用戶同時加載和高并發訪問的需求。

）

二、 產品功能

1. 場景資源管理

圖形化管理界面，操作簡單高效；提供數字孿生場景資源導入、多場景服務一站式托管服務，可自動識別發布場景的層級結構并生成分級導航，實現場景資源的便捷管理。

2. 場景詳情查閱

支持一鍵查詢場景服務詳細信息，如發布時間、調用次數、二次開發地址、場景瀏覽地址等。

3. 場景訪問控制

提供數字孿生場景訪問能力，支持用戶權限控制、發布管理等操作，可一鍵啟用/關閉場景訪問權限，無需任何代碼開發工作，大幅提升場景管理效率。

4. 資源壓縮

支持對場景資源的壓縮處理，包括無損壓縮、低質量壓縮、中質量級別、高質量壓縮等。通過不同壓縮級別，來控制發布場景的文件大小，合理匹配服務器資源。

5. 支持離線部署

針對特定用戶需求，提供場景服務器離線部署服務，離線部署版支持導入用戶場景數據，并可對場景資源進行自定義分組，充分滿足用戶應用需求。

三、 產品優勢

1. 便捷高效的場景資源管理

友好易用的圖形化交互界面，零代碼開發，操作簡單高效，大幅節省場景管理的時間和成本。

2. 單設備高并發訪問

具備穩定可靠的并行處理能力，任意終端都能獲得優秀的渲染效果、服務器負擔小、帶寬要求低，低成本支撐大并發訪問。

3. 穩定高效的運行性能

具備穩定可靠的運行服務能力，場景資源一鍵性能優化，實現超凡顯示性能、高效響應。

4. 數據安全加密

原生滿足 Web 應用防火墻管理，保護用戶數據隱私；租戶數據物理隔離，數據網絡傳輸端到端加密，符合業界專業標準，通過第三方安全實驗室測試。

一、產品概述

圖觀場景編輯器，是基于HTML5 和 WebGL 技術，用于配置可交互實時渲染三維場景效果的專用產品。產品具備強大的數據集成能力、友好易用的配置環境、豐富的可定義場景屬性、超凡的實時渲染效果，并可將配置完成的三維場景發布成公有云服務。

二、實施流程

基于圖觀端渲染場景編輯器，能夠編輯地創建數字孿生場景，發布孿生場景服務。實施流程如下：

三、產品功能

1. 模型導入

支持導入3DMAX、Maya、Blender等建模工具導出的的GLB模型文件，可準確讀取模型層級結構、紋理材質、數據驅動邏輯等屬性參數，有效利用現有數據資源。

2. 場景構建

全托拉拽式場景編輯，預置大量模型資產，可將多個模型拖入場景進行組合，并通過坐標編輯進行偏移校正，實現場景模型的精準定位。

3. 材質編輯

預置豐富材質庫，并支持對基本貼圖、高光、粗糙度、透明度、自發光、烤漆圖層等物理材質屬性進行自定義編輯，快捷獲得精細化的材質效果。

4. 關節動畫

支持模型對象復雜層級結構、模型節點定義，可同時控制多個結構節點，支持為模型定義數據驅動邏輯、復雜動畫設置，允許用戶傳入簡單數值，即可對三維對象進行復雜控制。

5. 燈光編輯

支持為三維場景配置燈光效果，預置多種類型場景燈光效果，并支持自定義編輯燈光角度、強度、投影、陰影等屬性參數，強化場景對象的光影效果。

6. 特效編輯

預置豐富的畫面特效、空間特效，如全局投影、景深、輝光、風格濾鏡、霧、信息雨、螢火蟲、雨、雪等，支持自定義場景特效屬性、支持同時添加多個特效，實現超凡的實時渲染效果。

7. 狀態管理

支持將場景要素的多個屬性進行組合為狀態，實現多個編輯屬性的綜合管理，一鍵切換不同顯示需要。

8. 坐標編輯

兼容GIS標準，支持以場景原點為中心，基于真實地理空間經緯度，通過錄入經緯度坐標或地圖匹配的方式，定義場景內各要素地理坐標，實現要素對象精確定位。

9. 場景預覽

支持對當前場景下的所有屬性信息進行保存，并可在瀏覽器中對場景最終效果進行預覽。

四、 產品優勢

1. 全物理材質渲染

全PBR渲染，豐富材質效果選項，高達15層材質貼圖，快捷獲得非凡材質效果，實現接近物理真實的渲染效果。

2. 豐富的渲染特效濾鏡

內置眾多圖像渲染效果濾鏡，高逼真還原真實世界場景要素，實現超凡的場景渲染效果輕松為場景最終效果增色。

3. 場景地圖精準定位

兼容GIS標準，精準定位場景位置，準確顯示經緯度格式數據，實現場景要素的精準加載顯示。

4. 數據驅動邏輯定義

通過定義結構、關節、動作，為三維模型賦予數據驅動能力，允許通過傳入數據，對模型姿態、動作、狀態變化進行復雜控制。

5. 豐富的模型資產

插件式預置場景資產庫，拖拉拽式模型導入，操作簡單，易于掌握，配置結果所見即所得，助力用戶高質量構建多行業場景。