## 背景 在三維模型產品的設計中，針對空間的管理存在這樣一個普遍的需求，那就是在三維模型中，將模型所代表的空間通過附加文字的方式來展示其所代表的實際位置或功能，之前嘗試過若干方式，比如直接在建模的時候，將文字以構件的方式建在模型裡，其優點是展示效果好、位置可控、放大後不失真，但是缺少靈活性，一旦加入到模型中，相當於焊死在上面；另一種方式則是通過Canvas繪製文字後動態追加到模型之上，這種方式解決了靈活性的問題，但是在模型放大時會產生失真，變得模糊。那麼有沒有一種方式，既能保證文字在模型中的靈活性，又能保證其向量特性，放大模型不失真呢？答案是有的。 ## 平臺 [BIMFACE](https://bimface.com/)是基於THREEJS 3D庫的圖形引擎，有很多的優異特性，但在某些功能上仍然不滿足現有的需求，例如對向量文字的支援。但是它提供了一個允許新增外部構件的介面，我稱之為開放介面，它允許任何符合THREEJS標準的三維物體新增到場景中，這就給開發者提供了腦洞大開的機會，比如我可以自己建立各種各樣的Mesh新增到場景、可以自定義任何型別的燈光效果，當然也可以將向量圖形加入場景。本文的向量文字就是基於SVG的向量圖形，通過開放介面加入到場景中的。 ## 實踐 如果我們對SVG(Scalable Vector Graphics)瞭解的話，就會知道它是可縮放的向量圖形，以下是來自百度百科對它的定義： >嚴格來說應該是一種開放標準的向量圖形語言，可讓你設計激動人心的、高解析度的Web圖形頁面。使用者可以直接用程式碼來描繪影象，可以用任何文書處理工具開啟SVG影象，通過改變部分程式碼來使影象具有互動功能，並可以隨時插入到HTML中通過瀏覽器來觀看。 接下來就是字型檔案的轉換，字型檔案需要轉換成json格式才可以被THREEJS的FontLoader所識別，網路上已經有大牛實現了這種轉換演算法，具體地址如下： >http://gero3.github.io/facetype.js/ 通過該網站可以將字型檔案轉換成可被識別的json檔案，然後通過FontLoader匯入後即可開始後續的操作。核心程式碼如下： ```javascript 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物件加入到場景中； 下一步將繼續探索如何將文字放置在正確的平面位置上。

作者：[悠揚的牧笛](http://www.cnblogs.com/xhb-bky-blog) 地址：[https://www.cnblogs.com/xhb-bky-blog/p/12454863.html](https://www.cnblogs.com/xhb-bky-blog/p/12454863.html) 宣告：本部落格原創文字只代表本人工作中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未授權貼子請以現狀保留，轉載時必須保留此段宣告，且在文章頁面明顯位置給出原文連