javascript - Threejs 渲染器上的 2D GUI

标签 javascript user-interface three.js

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

有办法实现吗?使用 Sprite 或使用 DOM 元素直接在渲染器上绘制?

最佳答案

是的,使用 DOM 元素,这是唯一的方法(据我所知, Sprite 使用图像),除非您需要在 3D 中移动元素,这需要 css 渲染器。

  • 如果对象的几何图形还具有 width 属性,则使用它

  • 否则计算边界框以获取它;

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

关于javascript - Threejs 渲染器上的 2D GUI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32053324/

相关文章:

javascript - 为 Three.js 导出 Colada 纹理

javascript - 我的代码有什么问题吗? (Threejs聚光灯阴影)

javascript - 如何在对象数组中搜索唯一 ID?

Javascript - 组合多维数组的元素

ios - 不同屏幕尺寸的用户界面图像大小?

: es2, sw 的 JavaFX 图形设备初始化失败

java - 为什么gwt CellTable不显示所有结果?

javascript - TypeScript:如何导入 ES6 JavaScript 类?

javascript - Webpack 输出文件具有默认导出而不是 module.exports

canvas - Three.js 和 HTML5 Canvas toDataURL