【BIM】BIMFACE中建立向量文字[下篇]
阿新 • • 發佈：2020-03-17
## 背景
在[上一篇](https://www.cnblogs.com/xhb-bky-blog/p/12454863.html)文章中，我們通過THREEJS建立了向量文字，並新增到了BIMFACE場景中，但是僅僅加入到場景中並不是我們的目的，我們的目的是把這種向量文字加到指定的構件或者空間上，以此標識該構件或空間所代表的含義，接下來就將我們建立的向量文字新增到目標構件或空間上。
## 思路
在三維空間中，標識一個物體的位置資訊，通常是通過世界座標的形式，世界座標由三個數字組成，分別代表X、Y、Z軸方向的座標，那麼如果要將建立的向量文字加入到指定位置，就需要設定向量文字的座標，在THREEJS中，任何Mesh都有position屬性，只要將該屬性設定到構件所在的位置即可。在BIMFACE中，任何一個構件都有自己的座標，只要獲取到構件的座標並設定到向量文字的position屬性，就可以了。
## 實踐
這裡我們以繪製的空間為例，首先需要通過
getRoomProperty獲取模型中空間的屬性以及邊界資訊，這些資訊是繪製空間的必要條件，通過該介面可以獲取到boundary、height等資訊，boundary描述了空間的邊界，而height描述了該邊界的垂直高度，由此便構成了一個封閉的空間。此外，還有兩個核心引數，minPt和maxPt，計算向量文字的位置就是通過這兩個核心變數以及height來確定的，如下圖
計算出座標後，還需要控制向量文字的大小，因為相對於空間塊太大或太小都不合適，所以文字的寬度大概是空間頂面的80%即可。經過測算（不一定準確），計算方式就是最大點和最小點的座標距離的10%作為向量文字的寬度。核心程式碼如下：
```javascript
// 驗證向量文字3D展示
function loadText() {
var loader = new THREE.FontLoader();
loader.load('fonts/FZDaBiaoSong-B06S_Regular.json', function (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 = "數字運維";
// 引數列表：文字 | 字型大小 |
var shapes = font.generateShapes(message, 640, 2);
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(0);
textShape.fromGeometry(geometry);
text = new THREE.Mesh(textShape, matLite);
let id = '2794723';
viewer.getRoomProperty(id, (data) =>MeshShapeGeometry，我們只需要將ShapeGeometry替換成ExtrudeGeometry，同時設定下amount引數即可。程式碼做如下修改：
```javascript
// 引數列表：文字 | 字型大小 |
var shapes = font.generateShapes(message, 640, 2);
var geometry = new THREE.ExtrudeGeometry(shapes,{amount:100});
```
以下是富有立體感的向量文字效果：
作者：[悠揚的牧笛](http://www.cnblogs.com/xhb-bky-blog) 地址：[https://www.cnblogs.com/xhb-bky-blog/p/12459135.html](https://www.cnblogs.com/xhb-bky-blog/p/12459135.html) 宣告：本部落格原創文字只代表本人工作中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未授權貼子請以現狀保留，轉載時必須保留此段宣告，且在文章頁面明顯位置給出原文連