добавить кнопку в 3d модель в Вавилоне. js

Question

Я новичок ie в Вавилоне. js, и я пытаюсь создать что-то подобное

https://sketchfab.com/3d-models/anatomy-of-the-human-brain-2019-4870387fd52b4706a87b1f3337356579

I импортировал модель и добавил кнопку к сцене, когда я щелкаю по ней, данные отображаются, как и ожидалось. проблема в кнопке вдали от модели.

вот что я сделал. https://www.babylonjs-playground.com/#JUKXQD # 341

есть ли лучший способ, чем я?

Answer 1

Кнопки на sketchfab - это не кнопки 3D, а кнопки HTML, добавленные в виде слоя HTML поверх холста, который визуализирует 3D. в каждом кадре обновляется позиция HTML.

Что-то вроде этого:

https://www.babylonjs-playground.com/debug.html#JUKXQD # 344

Обратите внимание, что проекция происходит на каждом кадре:

scene.onBeforeRenderObservable.add(() => {
    pointArray.forEach(point => {
        // project from the stored picked point to the 2D screen)
        var p = BABYLON.Vector3.Project(point.position,
            BABYLON.Matrix.Identity(),
            scene.getTransformMatrix(),
            camera.viewport.toGlobal(scene.getEngine().getRenderHeight(), scene.getEngine().getRenderHeight()));
        point.element.style.top = (p.y - point.element.offsetHeight / 2) + "px";
        point.element.style.left = (p.x + point.element.offsetWidth) + "px";

    })
});