javascript - 在查看器中定位 html 的最佳方法是什么?
问题描述
所以,我试图在查看器中定位 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。你怎么做到这一点?
解决方案
看看这篇博客文章:
https://forge.autodesk.com/blog/3d-markup-icons-and-info-card
它有源代码和一个示例 repo,显示了如何定位 HTML DIV 元素以显示粘在 Forge Viewer 中的 3D 对象上。
推荐阅读
- react-native - 如何使用 react-navigation v5 获取 id 的参数?
- f# - 指定泛型返回类型的 F# 接口
- flutter - 在颤振中,如何在用户第一次访问该网站时创建一个 cookie,并检查该 cookie 是否存在于所有后续访问中?
- r - R 格式表中的不均匀对齐与 kableExtra 相结合
- python - 如何打乱python列表以保留某些元素的出现?
- mysql - 在mysql中生成数素数
- ios - iOS HealthKit 项目使用 HKActivitySummaryQuery - 总结总是无
- swift - 如何从视图中关闭 nspopover?
- swift - 使用 Xcode 和 Swift 将嵌套字典保存到 UserDefaults
- reactjs - 如何在发送 Content-Type multipart/form-data 的同时将图像/jpeg 文件上传到 s3 上的预签名 url?