1

我正在尝试在所选对象的边界框的顶面上放置一个叠加层。我正在做的是：

1- 从中心点获取 WCS 中边界框顶面的顶点

2-将每个顶点转换为 HTML 空间中的点

3- 在 HTML 空间中的点放置一个 div

但是，只有中心点是正确的，其他顶点是关闭的。就像在屏幕截图中一样，蓝色地板是选定的对象。 在此处输入图像描述

这是代码：

// Translate a point from WCS to HTML space
    public getHTMLPosition(position: vec3) : number[] {
        // transformation matrix from projection pMatrix and view mvMatrix
        const transform = mat4.multiply(mat4.create(), this.pMatrix, this.mvMatrix);
        // apply transform to position
        const glPosition = vec3.transformMat4(vec3.create(), position, transform);
        const glX = glPosition[0];
        const glY = glPosition[1];

        // translate from 0-1 space to html pixel position
        const htmlX = (glX + 1) / 2.0 * this.width;
        const htmlY = this.height - (glY + 1) / 2.0 * this.height;

        return [htmlX, htmlY]
    }

document['getHTML'] = () => {
    const elements = viewer.getProductsWithState(State.HIGHLIGHTED);
    if (elements !== null) {
        const bbox = viewer.getProductBoundingBox(elements[0].id, elements[0].model);
        const center = BBox.centre(bbox);

        const wcs = viewer.getCurrentWcs();

        const boxInView = BBox.getSizeInView(bbox, cameraDir, cameraUp);

        const upleftLocal = vec3.fromValues(bbox[0], bbox[4], bbox[5]);
        const uprightLocal = vec3.fromValues(bbox[3], bbox[4], bbox[5]);
        const downleftLocal = vec3.fromValues(bbox[0], bbox[1], bbox[5]);
        const downrightLocal = vec3.fromValues(bbox[3], bbox[1], bbox[5]);

        const upleft = vec3.add(vec3.create(), upleftLocal, wcs);
        const upright = vec3.add(vec3.create(), uprightLocal, wcs);
        const downleft = vec3.add(vec3.create(), downleftLocal, wcs);
        const downright = vec3.add(vec3.create(), downrightLocal, wcs);
       
        const glCoords = [upleft, upright, downleft, downright, vec3.fromValues(center[0], center[1], center[2])];

        glCoords.forEach((c, index) => {
            const htmlCoord = viewer.getHTMLPosition(c);
            const cube = document.createElement('div');
            document.body.appendChild(cube);
            cube.setAttribute("class", `cube${index}`);
            cube.style.backgroundColor = 'red';
            cube.style.position = 'absolute';
            cube.style.width = '20px';
            cube.style.height = '20px';
            cube.style.borderRadius = '30px';
            cube.style.left = `${htmlCoord[0] - 10}px`;
            cube.style.top = `${htmlCoord[1] - 10}px`;
        });
    }
}

4

1 回答 1

0

原来我弄错了 BBox 的存储方式。

0, 1, 2 是 minPoint 的 x, y, z。

3、4、5分别是宽、高、深。

所以结果点应该是：

const upleftLocal = vec3.fromValues(
  bbox[0],
  bbox[1] + bbox[4],
  bbox[2] + bbox[5]
);
const uprightLocal = vec3.fromValues(
  bbox[0] + bbox[3],
  bbox[1] + bbox[4],
  bbox[2] + bbox[5]
);
const downleftLocal = vec3.fromValues(bbox[0], bbox[1], bbox[2] + bbox[5]);
const downrightLocal = vec3.fromValues(
  bbox[0] + bbox[3],
  bbox[1],
  bbox[2] + bbox[5]
);
于 2022-01-07T07:58:20.023 回答