Threejs渲染器上的2D gui答案

【问题标题】：2D gui on threejs rendererThreejs渲染器上的2D gui
【发布时间】：2021-12-08 12:50:30
【问题描述】：

我在渲染器上创建 2d gui 时遇到问题。 2d gui 必须根据元素宽度动态定位，该宽度在 threejs 中绘制（元素的宽度为 X，使用 threejs 单位，菜单必须位于其最右侧 50px 等）。

有没有办法实现它？使用 sprite 或 DOM 元素直接在渲染器上绘制？

【问题讨论】：

标签： javascript user-interface three.js

【解决方案1】：

是的，使用 DOM 元素，这是唯一的方法（精灵使用图像 AFAIK），除非您需要在 3D 中移动元素，这需要 css 渲染器。

如果您的对象几何体还具有width 属性，请使用它
否则计算边界框得到它；

然后你只需要找到合适的乘法因子将该值转换为像素以适合你的布局

【讨论】：

@Atranhasis 问题在于 Z 轴上的相机距离改变了它的距离以在屏幕上显示整个元素（它可能非常高），从而改变了“屏幕上”元素的宽度
当然；）那个链接呢stackoverflow.com/questions/15331358/…

【解决方案2】：

使用 html dom 元素创建你的 gui 并将它的 css 位置设置为绝对位置，以便它出现在渲染器上而不是隐藏在渲染器下方例如：

<body>
<div id="gui">Sample Gui </div> 
<!--You can add anything to this division for example I used text "sample gui"-->
<style>
#gui {
position: absolute;
top: topPosition%;
left: leftPosition%;
right: rightPosition%;
bottom: bottomPosition%;
}
</style>

添加此部分后，您的任何 gui 元素都将出现在渲染器上您也可以使用 css 的 top,left,right,bottom 属性调整 gui 元素的位置。

【讨论】：