【BIM】BIMFACE中創建矢量文本

• 2020 年 3 月 16 日
• 筆記

背景

在三維模型產品的設計中，針對空間的管理存在這樣一個普遍的需求，那就是在三維模型中，將模型所代表的空間通過附加文本的方式來展示其所代表的實際位置或功能，之前嘗試過若干方式，比如直接在建模的時候，將文本以構件的方式建在模型里，其優點是展示效果好、位置可控、放大後不失真，但是缺少靈活性，一旦加入到模型中，相當於焊死在上面；另一種方式則是通過Canvas繪製文本後動態追加到模型之上，這種方式解決了靈活性的問題，但是在模型放大時會產生失真，變得模糊。那麼有沒有一種方式，既能保證文本在模型中的靈活性，又能保證其矢量特性，放大模型不失真呢？答案是有的。

平台

BIMFACE是基於THREEJS 3D庫的圖形引擎，有很多的優異特性，但在某些功能上仍然不滿足現有的需求，例如對矢量文本的支援。但是它提供了一個允許添加外部構件的介面，我稱之為開放介面，它允許任何符合THREEJS標準的三維物體添加到場景中，這就給開發者提供了腦洞大開的機會，比如我可以自己創建各種各樣的Mesh添加到場景、可以自定義任何類型的燈光效果，當然也可以將矢量圖形加入場景。本文的矢量文本就是基於SVG的矢量圖形，通過開放介面加入到場景中的。

實踐

如果我們對SVG(Scalable Vector Graphics)了解的話，就會知道它是可縮放的矢量圖形，以下是來自百度百科對它的定義：

嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高解析度的Web圖形頁面。用戶可以直接用程式碼來描繪影像，可以用任何文字處理工具打開SVG影像，通過改變部分程式碼來使影像具有交互功能，並可以隨時插入到HTML中通過瀏覽器來觀看。

接下來就是字體文件的轉換，字體文件需要轉換成json格式才可以被THREEJS的FontLoader所識別，網路上已經有大牛實現了這種轉換演算法，具體地址如下：

http://gero3.github.io/facetype.js/

通過該網站可以將字體文件轉換成可被識別的json文件，然後通過FontLoader導入後即可開始後續的操作。核心程式碼如下：

function loadText(){      var loader = new THREE.FontLoader();      loader.load('fonts/FZDaBiaoSong-B06S_Regular.json',  (font) => {          var xMid, text;          var textShape = new THREE.BufferGeometry();          var color = 0xff0009;          var matDark = new THREE.LineBasicMaterial({              color: color,              side: THREE.DoubleSide          });            var matLite = new THREE.MeshBasicMaterial({              color: color,              transparent: true,              wireframe: false,              opacity: 0.9,              side: THREE.DoubleSide          });            // 顯示文本           var message = "THREEJS";            // 根據文本產生路徑          // 參數列表：文本 | 字體大小          var shapes = font.generateShapes(message, 5000);          var geometry = new THREE.ShapeGeometry(shapes);          geometry.computeBoundingBox();          xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);          geometry.translate(xMid, 0, 0);          geometry.rotateX(45);            textShape.fromGeometry(geometry);          text = new THREE.Mesh(textShape, matLite);          text.position.z = 0;          text.position.x = 70000;            var group = new THREE.Group();          groupt.add(text);            // 加入到場景中          viewer.addExternalObject("text", group);          viewer.render();      });  }

效果

總結

在BIMFACE平台實現矢量文本，一般需要四個步驟：

1. 選擇目標字體；
2. 將目標字體通過轉換平台轉換成可識別的json文件；
3. 通過THREEJS的FontLoader導入該文件生成Mesh；
4. 將該Mesh對象加入到場景中；

下一步將繼續探索如何將文本放置在正確的平面位置上。