Crear texto vector [BIM] BIMFACE en [Parte II]

fondo

En el anterior artículo, hemos creado a través THREEJS texto vector, y añadirlo a la BIMFACE la escena, pero sólo añadido a la escena es no nuestro objetivo, nuestro objetivo es añadir texto a este espacio vectorial o miembros designados sucesivamente, con el fin de identificar el significado de los componentes o el espacio que representa, junto crearemos se añade el texto vector para el componente o espacio objetivo.

pensamiento

En el espacio de tres dimensiones, la información de identificación de una posición del objeto, típicamente en forma de coordenadas mundiales, coordenadas mundiales de los tres números, que representan las coordenadas X, Y, eje Z, a continuación, si se desea crear un vector añadido al texto la ubicación especificada, es necesario para establecer el vector de coordenadas del texto, en THREEJS, cualquier malla tiene la propiedad de posición, siempre que la propiedad proporcionado al miembro donde la ubicación. En BIMFACE, cualquier componente tiene sus propias coordenadas, las coordenadas obtenidas mientras el miembro está ajustado a los vectores de atributos de posición y el texto en él.

práctica

Aquí se deriva el espacio, por ejemplo, por primera necesidad de getRoomPropertypropiedades adquirir y la información de límites en el espacio modelo, dicha información es necesaria para la elaboración de espacio, se puede obtener a través de esta interfaz boundary, heighty otra información de boundaryla descripción de los límites del espacio y heightdescriba altura vertical de la frontera, por lo que constituyen un espacio cerrado. Además, hay dos parámetros básicos, minPty maxPtcalcula la posición del vector de texto es a través de estas dos variables, y el núcleo heightse determina, como en la figura.

Después de calcular las coordenadas, vector también es necesario para controlar el tamaño de texto, como con respecto a los bloques espaciales son inapropiados demasiado grande o pequeña, la anchura del espacio de texto es de aproximadamente 80% de la superficie superior de la lata. Después del cálculo (no necesariamente exacta), el 10% se calculó a partir de las coordenadas de los puntos máximos y mínimos como la anchura del vector de texto. El código del núcleo es como sigue:

// 验证矢量文本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) => {
            let height = 4000;
            let min = data.minPt;
            let max = data.maxPt;

            console.log("min:", min);
            console.log("max:", max);

            // 计算顶面中心点坐标
            let centerX = (min.x + max.x) / 2;
            let centerY = (min.y + max.y) / 2;
            let centerZ = height;
            
            // 创建空间
            viewer.createRoom(data.boundary, height, id);

            // 设置矢量文本的世界坐标
            text.position.z = centerZ;
            text.position.x = centerX
            text.position.y = centerY;
            var group = new THREE.Group();
            group.add(text);
            viewer.addExternalObject("text", group);
            viewer.render();
        });
    });
}

El código y un artículo sobre la diferencia está en el texto establecer las coordenadas del vector cuando algunas diferencias.

efecto

propagación

Hasta ahora, hemos completado el vector de texto se añade al componente especificado en la pantalla plana modelo tridimensional de la escena, pero este texto es un vector bidimensional, que si quiero un texto rico en tres dimensiones, altamente en la dirección del eje Z, la forma en para hacerlo? En realidad muy simple, se construye el texto vector de Meshtiempo, utilizando ShapeGeometry, sólo tenemos que ShapeGeometrysustituir ExtrudeGeometry, y establecer el siguiente amountparámetro. Código se modifica de la siguiente manera:

// 参数列表：文本 | 字体大小 | 
var shapes = font.generateShapes(message, 640, 2);
var geometry = new THREE.ExtrudeGeometry(shapes,{amount:100});

La siguiente es una rica y tres dimensiones texto del efecto del vector:

Autor: melodiosa caña tubería
Dirección: https://www.cnblogs.com/xhb-bky-blog/p/12459135.html
de responsabilidad: Este blog representa mi carácter original de la obra se resume en unos determinados puntos de vista de tiempo o conclusiones, ha se encuentra ningún interés directo en la unidad. No comercial, las publicaciones no autorizadas por favor conserve el status quo, declarado por esta sección debe ser retenida cuando se reproduce, y dada la conexión original en la posición aparente de la página del artículo.