在查看器中定位 html 的最佳方法是什么？答案

【问题标题】：What is the best way to position html in the viewer?在查看器中定位 html 的最佳方法是什么？
【发布时间】：2018-10-07 17:59:12
【问题描述】：

因此，我试图在查看器中定位 HTML，使其看起来像是场景的一部分。所以，当你移动相机时，我希望它的位置，就观察者而言，保持在它所在的位置。现在，我尝试移动 HTML 以在相机移动时模拟这一点；但是，我不确定我的等式是否不正确或者我不存在。它似乎略微移动，但几乎没有相机移动时应该移动的那么多。换句话说，如果我将 html 放在查看器中的立方体顶部，并移动相机，我希望 html 跟随立方体。这是我尝试过的：

    this.viewer.addEventListener(av.CAMERA_CHANGE_EVENT, function(e){
    console.log($(`.draggable`).attr(`originalPos`));
    console.log(e.camera);
    var width = window.innerWidth, height = window.innerHeight;
    var widthHalf = width / 2, heightHalf = height / 2;
    let originalPos = $(`.draggable`).attr(`originalPos`).split(` `);
    let originalX = originalPos[0];
    let originalY = originalPos[1];
    $(`.draggable`).css(`position`, `absolute`);
    let pixelX = (e.camera.position.x * .0005 + .5) * e.target.container.clientWidth;
    let pixelY = (e.camera.position.y * -.009 + .5) * e.target.container.clientHeight;
    $(`.draggable`).css(`left`, e.camera.position.x + pixelX);
    $(`.draggable`).css(`top`,  e.camera.position.y + pixelY);
});
$(`#viewer .adsk-viewing-viewer`).append(`<h1 originalPos = "50px 100px" class = "draggable" style="position: absolute; top: 50px; left: 100px;">Test</h1>`);

但这似乎没有正确的缩放比例。它不会停留在我想要的位置。我在您制作的 MarkupsCore 工具中看到了类似的概念，而且面积测量工具似乎有一些基于相机定位的 html。你是怎么做到的？

【问题讨论】：

不知道你想要达到什么目的......但我错过了类似 .worldToClient 调用将 3D 世界模型坐标转换为 2D 客户端坐标的东西，对吧？

标签： javascript autodesk-forge autodesk-viewer autodesk

【解决方案1】：

看看这篇博客文章：

https://forge.autodesk.com/blog/3d-markup-icons-and-info-card

它有源代码和一个示例 repo，它显示了如何定位 HTML DIV 元素以显示粘在 Forge 查看器中的 3D 对象上。

【讨论】：