从WCS中计算HTML位置

Question

我试图在选定对象的包围框的顶部放置一个覆盖层。我要做的是：

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`;
        });
    }
}

​

Answer 1

结果我搞错了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]
);