【BIM】BIMFACE中建立矢量文本

靠山

在三维模子产物的设计中,针对空间的治理存在这样一个普遍的需求,那就是在三维模子中,将模子所代表的空间通过附加文本的方式来展示其所代表的现实位置或功效,之前尝试过若干方式,好比直接在建模的时刻,将文本以构件的方式建在模子里,其优点是展示效果好、位置可控、放大后不失真,然则缺少灵活性,一旦加入到模子中,相当于焊死在上面;另一种方式则是通过Canvas绘制文本后动态追加到模子之上,这种方式解决了灵活性的问题,然则在模子放大时会发生失真,变得模糊。那么有没有一种方式,既能保证文本在模子中的灵活性,又能保证其矢量特征,放大模子不失真呢?谜底是有的。

平台

BIMFACE是基于THREEJS 3D库的图形引擎,有许多的优异特征,但在某些功效上仍然不满足现有的需求,例如对矢量文本的支持。然则它提供了一个允许添加外部构件的接口,我称之为开放接口,它允许任何相符THREEJS尺度的三维物体添加到场景中,这就给开发者提供了脑洞大开的机遇,好比我可以自己建立林林总总的Mesh添加到场景、可以自界说任何类型的灯光效果,固然也可以将矢量图形加入场景。本文的矢量文本就是基于SVG的矢量图形,通过开放接口加入到场景中的。

实践

若是我们对SVG(Scalable Vector Graphics)领会的话,就会知道它是可缩放的矢量图形,以下是来自百度百科对它的界说:

严格来说应该是一种开放尺度的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部门代码来使图像具有交互功效,并可以随时插入到HTML中通过浏览器来旁观。

接下来就是字体文件的转换,字体文件需要转换成json花样才可以被THREEJS的FontLoader所识别,网络上已经有大牛实现了这种转换算法,具体地址如下:

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

开源项目在闲鱼、b 站上被倒卖?这是什么骚操作?

通过该网站可以将字体文件转换成可被识别的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();
    });
}

效果

【BIM】BIMFACE中建立矢量文本

总结

在BIMFACE平台实现矢量文本,一样平常需要四个步骤:

  1. 选择目的字体;
  2. 将目的字体通过转换平台转换成可识别的json文件;
  3. 通过THREEJS的FontLoader导入该文件天生Mesh;
  4. 将该Mesh工具加入到场景中;

下一步将继续探索如何将文本放置在准确的平面位置上。

作者:悠扬的牧笛
地址:https://www.cnblogs.com/xhb-bky-blog/p/12454863.html
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权贴子请以现状保留,转载时必须保留此段声明,且在文章页面显著位置给出原文毗邻。

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/1197.html