XBIM Web 查看器 - 从 WCS 计算 HTML position

Question

我试图在选定的 object 的边界框的顶面上放置一个叠加层。 我正在做的是：

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

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

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

但是，只有中心点是正确的，其他顶点是关闭的。 和截图一样，蓝色地板是选中的object。

这是代码：

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