demo 讓你的三維動起來

Part1前言

INVETA三維可視化demo工程內建了數字孿生中的常用元素：POI點、軌迹路線、區域輪廓、圍欄高亮、Bézier路徑、特效、地标模型、分層建築等。GitHub位址如下：https://github.com/inveta/demo ，目前正在持續更新，陸續地推出新的可視化基本圖元。在以上所有的基本圖元中，最常用的就是POI點了，之前也介紹過很多POI的實作原理，本文着重介紹下在UE5中的 3 種使用方法：編輯器靜态初始化、藍圖動态生成、像素流字元串動态生成。所有的inveta基本圖元都支援這 3 種模式。

● 編輯器靜态初始化：在編輯器中手動拖拽、選擇、輸入參數。

● 藍圖動态生成：通過藍圖函數，在運作時生成元素，動态地指定參數。

● 像素流字元串動态生成：通過用戶端傳來的字元串代碼動态生成。

這 3 種使用方法涵蓋了全部的應用場景，三者的差別在于時态，但最終目的都是指定一堆參數，這些參數有各種類型：bool、字元、字元串、整數、實數、向量、坐标、顔色、數組、字典、模型、紋理、材質。所有的長度機關預設是cm，所有時間機關預設是s。

Part2支援一鍵插拔

直接将/PLSB/pixel-stream藍圖拖入場景中，就能自動監聽前端請求，生成對應的可視化元素，不用手寫後端業務邏輯，也不用再定義一套像素流格式，因為該藍圖已經定義好了一套統一的URL鍵值對參數：

● 所有參數遵守類似字典的格式。

● 由換行符"\r\n"分隔每一行。

● 由于 UE 的原因，換行符必須使用"\r\n"，不能用正常的"\n"。

● 每行由冒号":"分隔鍵值對。

● 鍵和值兩端沒有空白字元。

這一套格式在前端也很容易實作，比如生成一個POI點的前端代碼如下：

ps.emitMessage([
    "spawn-POI",
    "location:X=0 Y=0 Z=0",
    "icon:\uE998",
    "title:POI标題",
    "color:R=1 G=1 B=1",
    "shape:2",
    "id:poi001"
].join('\r\n'));
      

Part3螢幕空間POI點

Part4Bézier軌迹路線

Part5區域輪廓圍欄

Part6GIF特效

Part7動态模型

Part8總結

本文主要介紹了https://github.com/inveta/demo的動态生成方法，包括編輯器靜态初始化、藍圖動态生成、像素流字元串動态生成。

Part9關于IN VETA

IN VETA是一支由模組化、美術、UE5組成的年輕團隊。