如何在threejs webgl几何空间中使用平面几何着色器制作圆角2d Sprite始终面向相机答案

【问题标题】：How to make a rounded corner 2d Sprite with plane geometry shader always facing the camera in threejs webgl geometry space如何在threejs webgl几何空间中使用平面几何着色器制作圆角2d Sprite始终面向相机
【发布时间】：2023-03-20 17:40:01
【问题描述】：

如何将矩形纹理绘制为带圆角的 2d 精灵，如下所示：

   _____
  /     \
  |     |
  \_____/

我想，我需要使用遮罩纹理和着色器来制作圆形遮罩，但我无法将着色器材质应用于 2d 精灵！

【问题讨论】：

圆角立方体：threejs.org/examples/webgl_modifier_subdivision.html 然后面向相机：mesh.lookAt(camera.position);
@Radio 这个精灵在 3d 世界中移动，并且由于透视而变得更小，我希望它看起来像正交投影并像 hud 元素一样保持不变。

标签： three.js

【解决方案1】：

您可以使用drawing on a canvas 创建纹理或在任何图像编辑器中绘制您想要的纹理，然后将其应用到精灵。如果您希望精灵具有相同的大小，与距离无关，请查看this answer。我的两个答案都有 jsfiddle 示例。

【讨论】：

如果我要在画布上绘图，为什么要使用threejs？只是让它成为库的一部分，它无论如何都缺乏大量文档
也许这个shadertoy example 会给你一个想法来实现你想要的。但完全恕我直言，计算量越少（在 GPU 上也是如此）越好。