javascript - XBIM Web ビューアー - 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`;
        });
    }
}