Как лучше расположить 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-код, который позиционирует на основе камеры. Как ты это делаешь?


person Sam Curry    schedule 26.04.2018    source источник
comment
не знаю точно, чего вы пытаетесь достичь ... но мне не хватает чего-то вроде вызова .worldToClient для преобразования координат 3D-модели мира в координаты 2D-клиента, верно?   -  person Augusto Goncalves    schedule 28.04.2018


Ответы (1)


Взгляните на эту статью в блоге:

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

В нем есть исходный код и пример репозитория, который показывает, как расположить элемент HTML DIV так, чтобы он прикреплялся к 3D-объекту в Forge Viewer.

введите здесь описание изображения

person michael beale    schedule 29.04.2018