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