A-Frame中如何为<a-triangle>添加深度？

你之前的三种尝试都无法生成真正带深度的3D三角形，原因如下：

• <a-triangle>是平面几何体，本身不支持depth属性，直接添加无效；
• box+triangle分组只是两个平面叠加，并非立体的三角棱柱；
• Z轴缩放仅拉伸平面，不会赋予几何体真正的厚度。

正确实现方式：使用extrude几何体 #

A-Frame的原生extrude几何体可以将2D路径拉伸为3D实体，完美实现带深度的三角形：

<a-entity>
  <!-- 定义三角形路径并拉伸出深度 -->
  <a-geometry 
    primitive="extrude" 
    path="0 1, -1 -1, 1 -1, 0 1"  <!-- 闭合的三角形顶点坐标 -->
    depth="0.5"                     <!-- 拉伸的厚度（深度） -->
    color="#6173F6"
  ></a-geometry>
</a-entity>

参数说明 #

• path：按顺序定义三角形的顶点坐标，最后回到起点形成闭合路径；
• depth：设置拉伸的厚度，数值越大，三角形的深度越明显；
• 你可以调整path里的坐标来改变三角形的形状，修改depth数值调整厚度。

内容的提问来源于stack exchange，提问作者phlpp77