Three.js如何将纹理或形状投射到网格的指定局部区域？

你要实现的这类跟随网格表面形变的选中标识，通用实现方案是投射式贴花，不需要手动做射线拾取、法线调整，性能和效果都更稳定。

具体实现路径 #

• 引擎原生组件方案
  大部分商用游戏引擎都自带成熟的贴花投射工具，直接调用即可：
  • Unity引擎：URP/HDRP管线提供原生Decal Projector组件，你只需要创建带透明圆环纹理的贴花材质，将组件挂载到角色脚下调整投射框的大小范围，组件会自动将纹理投射到范围内所有复杂网格表面，自动适配高度、坡度。如果使用内置渲染管线，可直接套用公开的内置管线贴花Shader模板。
  • Unreal引擎：直接创建Decal Actor，设置材质和投射范围后绑定到角色脚下即可实现同款效果。
• 自定义Shader实现逻辑
  如果你需要自己写Shader实现核心逻辑，步骤如下：
  1. 定义投射盒的世界空间边界，即你需要投射形状的三维范围，比如选中圈可定义为角色脚下长宽2m、上下各延伸0.5m的立方体
  2. 在片元着色器中将当前被渲染片元的世界坐标转换到投射盒的局部坐标系
  3. 抛弃局部坐标系下的高度轴数值，用剩余两个轴的坐标作为UV采样你的圆环纹理
  4. 可增加法线过滤逻辑：计算片元法线和投射方向的夹角，夹角超过阈值的区域不显示贴花，避免侧面出现拉伸变形
  5. 将采样得到的贴花颜色和片元原有颜色做透明度混合输出即可
• 优化建议
  • 可给贴花设置层级过滤，只投射你需要的目标网格层（比如地形层、角色层），减少不必要的计算开销
  • 透明圆环材质要调整渲染队列，确保在所有不透明物体渲染完成后再渲染，避免出现穿透显示问题
  • 动态跟随的选中圈只需要每帧更新投射盒的中心位置跟随目标对象即可，整体性能开销极低

效果示例 #

内容的提问来源于stack exchange，提问作者Ertuğrul Çetin