仅使用 ThreeJS 构建交互式 UI 而无需 HTML DOM 覆盖的最佳方法
The best approach to use only ThreeJS for building interactive UI without HTML DOM overlays
我可以在 ThreeJS 的 3D 场景上为 UI、文本、按钮等创建一个 2D 层吗？
理想情况下像 ThreeJS 中的 PixiJS 引擎？我已经看到 PixiJS 提供了一些 3D 功能，那么为什么不将这两个库组合成一个超级强大的东西呢？我只是不想在 WebGL canvas 上放置任何 HTML Dom 元素，因为这可能会降低移动设备的性能。
解决此问题的一种方法是将 UI 实现为屏幕 space 精灵，如以下官方示例所示（查看红色精灵的渲染方式）：
https://threejs.org/examples/webgl_sprites
我们的想法是使用单独的正交相机和额外的 WebGLRenderer.render() 调用来渲染它们。此外， THREE.Sprite 的实例确实支持光线投射，这在实现交互时当然很有用。
Bui根据 Mugen87 的回答，您还可以使用 THREE.Shape 使视觉容器适应用户屏幕尺寸：
https://threejs.org/docs/#api/en/extras/core/Shape
您可以使用 THREE.Shape 制作基于网格的文本，如本例所示：
https://threejs.org/examples/?q=text#webgl_geometry_text_shapes
您还应该看看 three-mesh-ui，一个用于使用 three.js 构建基于网格的用户界面的插件ui：
https://github.com/felixmariotto/three-mesh-ui
我可以在 ThreeJS 的 3D 场景上为 UI、文本、按钮等创建一个 2D 层吗？ 理想情况下像 ThreeJS 中的 PixiJS 引擎？我已经看到 PixiJS 提供了一些 3D 功能，那么为什么不将这两个库组合成一个超级强大的东西呢？我只是不想在 WebGL canvas 上放置任何 HTML Dom 元素，因为这可能会降低移动设备的性能。
解决此问题的一种方法是将 UI 实现为屏幕 space 精灵，如以下官方示例所示（查看红色精灵的渲染方式）：
https://threejs.org/examples/webgl_sprites
我们的想法是使用单独的正交相机和额外的 WebGLRenderer.render() 调用来渲染它们。此外， THREE.Sprite 的实例确实支持光线投射，这在实现交互时当然很有用。
Bui根据 Mugen87 的回答，您还可以使用 THREE.Shape 使视觉容器适应用户屏幕尺寸： https://threejs.org/docs/#api/en/extras/core/Shape
您可以使用 THREE.Shape 制作基于网格的文本，如本例所示： https://threejs.org/examples/?q=text#webgl_geometry_text_shapes
您还应该看看 three-mesh-ui，一个用于使用 three.js 构建基于网格的用户界面的插件ui： https://github.com/felixmariotto/three-mesh-ui