一、現(xiàn)有 Label 設(shè)計
image2021-9-26_13-58-5.png
常用術(shù)語：
Label：標(biāo)簽
Panel：面板
Anchor：錨點
Billboard：3d 中始終面向屏幕的公告牌
此處的 Label，本質(zhì)是一個 UIBinder(targetElementId, UIContent, extraProps)，希望用于創(chuàng)建始終面向屏幕的 UI 信息看板
綁定 UI 后，UI 會有兩種渲染存在的形式，1. canvas 內(nèi)渲染，看板跟隨 camera 距離，同步縮放，2. canvas 外基于 dom（position:absolute, left:xxx, right:xxx)，與 canvas 內(nèi)部坐標(biāo)同步，看板不跟隨場景縮放。
- canvas 內(nèi)渲染 UI 的典型應(yīng)用場景
待補(bǔ)完 - canvas 外渲染 UI 的典型應(yīng)用場景
待補(bǔ)充
建立信息看板與模型 id 對應(yīng)的技術(shù)難點
- 面向 canvas 內(nèi)渲染，看板內(nèi)容的技術(shù)開發(fā)鏈路是什么？
鏈路一、基于 html dom，可以最大化借力 h5 前端的技術(shù)生態(tài)解決展示問題，但不擅長增加交互熱區(qū)問題。在 dom2canvas 后，3d 材質(zhì)貼圖上，面臨計算成本。當(dāng) dom 數(shù)據(jù)有頻繁更新時，是否有優(yōu)化空間？
鏈路二、基于 3DGUI，使用命令式編程語言，完成對文本、圖片、容器的基礎(chǔ)布局。對文本的邊界尺寸計算、數(shù)據(jù)視圖的二次更新等具備一定的開發(fā)復(fù)雜度。 - 面向 canvas 外渲染，看板內(nèi)容的技術(shù)開發(fā)鏈路是什么？
基于 html dom，需要解決 3D 引擎與 dom 數(shù)據(jù)看板的同步渲染問題，
二、業(yè)界參考設(shè)計
2.1 thingjs
thing.png
參考鏈接 https://docs.thingjs.com/cn/apidocs/THING.UIAnchor.html#pivot
2.2 51world superJs
112.png
參考鏈接：http://superapi.51hitech.com/apifunc
三、設(shè)計方案建議
實現(xiàn)類似 UIBinder 的接口，實現(xiàn) UI 針對模型 id 的綁定。細(xì)節(jié)待補(bǔ)
