如何使用Aframe js创建平行四边形？无对应图元求技术帮助

嘿，我明白你在找A-Frame里创建平行四边形的办法——确实没有原生图元支持，但咱们有几个简单又实用的方案，直接上手就能用：

方法1：自定义平面顶点（最快捷） #

A-Frame的<a-plane>允许你通过geometry组件的vertices属性自定义顶点坐标，这是实现平行四边形最直接的方式。只需要调整四个顶点的位置，满足平行四边形对边平行且相等的条件就行。

代码示例： #

<a-scene>
  <!-- 基础向右倾斜的平行四边形 -->
  <a-plane 
    geometry="vertices: -1 1 0, 1 1 0, 2 -1 0, 0 -1 0"
    material="color: #4CC3D9; side: double"
    position="0 1.6 -3"
  ></a-plane>
</a-scene>

代码解释： #

• vertices参数里的四个坐标按左上、右上、右下、左下顺时针顺序排列
• 例子中我把右下顶点x轴设为2、左下设为0，形成向右倾斜的形态
• side: double确保正反两面都能看到材质，避免背面透明
• 你可以自由调整顶点的x/y/z坐标，改变平行四边形的倾斜方向、大小甚至厚度（调整z轴值即可实现3D效果）

方法2：实体组合+变换（适合复杂场景） #

如果需要后续动态调整形状，或者要拆分组件，可以用多个基础图元组合，通过position和rotation拼接成平行四边形。这种方法灵活性更强，适合需要拆分控制的场景。

代码示例： #

<a-scene>
  <a-entity position="0 1.6 -3">
    <!-- 左侧垂直边 -->
    <a-box 
      position="-0.5 0 0" 
      scale="0.1 2 0.1" 
      material="color: #4CC3D9"
    ></a-box>
    <!-- 右侧倾斜边 -->
    <a-box 
      position="1.5 0 0" 
      scale="0.1 2 0.1" 
      material="color: #4CC3D9"
      rotation="0 0 -26.565" <!-- 对应tan(1/2)的倾斜角度 -->
    ></a-box>
    <!-- 顶部连接面 -->
    <a-plane 
      position="0 1 0" 
      scale="2 0.1 1" 
      material="color: #4CC3D9"
      rotation="0 0 -13.28"
    ></a-plane>
    <!-- 底部连接面 -->
    <a-plane 
      position="0 -1 0" 
      scale="2 0.1 1" 
      material="color: #4CC3D9"
      rotation="0 0 -13.28"
    ></a-plane>
  </a-entity>
</a-scene>

方法3：自定义组件（进阶复用方案） #

如果你需要重复创建不同参数的平行四边形，可以封装一个自定义A-Frame组件，调用时只需传入参数即可生成目标图形。

代码示例： #

<script>
AFRAME.registerComponent('parallelogram', {
  schema: {
    width: {type: 'number', default: 2},
    height: {type: 'number', default: 2},
    skew: {type: 'number', default: 1}, // 倾斜程度，正数向右、负数向左
    color: {type: 'color', default: '#4CC3D9'}
  },
  init: function () {
    const {width, height, skew, color} = this.data;
    // 计算四个顶点坐标
    const vertices = [
      -width/2, height/2, 0,
      width/2, height/2, 0,
      width/2 + skew, -height/2, 0,
      -width/2 + skew, -height/2, 0
    ];
    // 基于Three.js创建几何体与材质
    const geometry = new THREE.BufferGeometry().setFromPoints(vertices.map(v => new THREE.Vector3(...v)));
    geometry.computeVertexNormals();
    const material = new THREE.MeshStandardMaterial({color, side: THREE.DoubleSide});
    // 将网格添加到实体
    const mesh = new THREE.Mesh(geometry, material);
    this.el.setObject3D('mesh', mesh);
  }
});
</script>

<a-scene>
  <a-entity 
    parallelogram="width: 3; height: 2; skew: 1.5; color: #FF6B6B"
    position="0 1.6 -3"
  ></a-entity>
</a-scene>

小提醒： #

• 自定义顶点时，务必保持顺时针或逆时针的顺序，否则可能出现材质渲染异常
• 如果需要3D平行棱柱，可以在z轴方向添加额外顶点，或者结合Three.js的挤压几何体实现

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