时间戳

首页 > 解决方案 > 在 babylon.js 中为 3d 模型添加按钮

babylonjs - 在 babylon.js 中为 3d 模型添加按钮

问题描述

我是 babylon.js 的新手，我正在尝试创建类似的东西

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

我已经导入了模型并在场景中添加了一个按钮，当我单击它时，数据会按预期显示。问题是远离模型的按钮。

这就是我所做的。 https://www.babylonjs-playground.com/#JUKXQD#341

有没有比我做的更好的方法？

标签： babylonjs

解决方案

Sketchfab 上的按钮不是 3D 按钮，而是作为 HTML 层添加到呈现 3D 的画布顶部的 HTML 按钮。在每一帧上，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";

    })
});

推荐阅读