1

I'm trying to put an overlay over the top face of the bounding box of selected object. What I'm doing is:

1- Get the vertices of the bounding box top face in WCS, from center point

2- Translate each vertices into point in HTML space

3- Put a div at the point in HTML space

However, only the center point is correct, other vertices are off. Like in the screenshot, the blue floor is the selected object. enter image description here

Here is the code:

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

1 Answer 1

0

Turns out I mistook how BBox are stored.

0, 1, 2 are x, y, z of minPoint.

3, 4, 5 are width, height, depth.

So the resulting points should be:

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]
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.