如何在A-Frame自定义网格中为不同索引面组设置不同材质

需求 #

使用THREE.BufferGeometry注册自定义几何体，实现：

• 多组带索引的面，共享顶点数据，修改时无需移动多个顶点、避免破面
• 每组面分配独立材质
• 避免嵌套实体组，节省CPU、GPU及内存资源

问题 #

现有示例均基于已废弃的THREE.Geometry，自行尝试多种代码变体（含ChatGPT生成版本）均无法正常运行。

尝试的代码 #

代码1 #

AFRAME.registerGeometry('my-custom-geometry', {
  init: function () {
// Define the vertices of the geometry
const vertices = [
  // First set of five shared points
  -1, 1, 0,
  -1, -1, 0,
  0, -1, 0,
  1, -1, 0,
  1, 1, 0,

  // Second set of five shared points
  -1, 1, 1,
  -1, -1, 1,
  0, -1, 1,
  1, -1, 1,
  1, 1, 1,
];

// Define the indices of the faces
const indices = [
  // Group 1
  0, 1, 2,
  2, 3, 4,
  0, 2, 4,

  // Group 2
  5, 6, 7,
  7, 8, 9,
  5, 7, 9,
];

  // Create a buffer geometry object
  const geometry = new THREE.BufferGeometry();

// Set the attributes of the buffer geometry
const positionAttribute = new THREE.Float32BufferAttribute(vertices, 3);
geometry.setAttribute('position', positionAttribute);

const indexAttribute = new THREE.Uint16BufferAttribute(indices, 1);
geometry.setIndex(indexAttribute);

// Define the groups of faces
geometry.addGroup(0, 3, 0); // Group 1, material 1
geometry.addGroup(3, 3, 1); // Group 1, material 2
geometry.addGroup(6, 3, 2); // Group 1, material 3
geometry.addGroup(9, 3, 3); // Group 2, material 4
geometry.addGroup(12, 3, 4); // Group 2, material 5
geometry.addGroup(15, 3, 5); // Group 2, material 6

// Register the geometry with A-Frame
this.geometry = geometry;
  }
});

// Define the materials for the groups of faces
const materials = [
  new THREE.MeshBasicMaterial({ color: 'red' }),
  new THREE.MeshBasicMaterial({ color: 'green' }),
  new THREE.MeshBasicMaterial({ color: 'blue' }),
  new THREE.MeshBasicMaterial({ color: 'yellow' }),
  new THREE.MeshBasicMaterial({ color: 'purple' }),
  new THREE.MeshBasicMaterial({ color: 'orange' }),
];

// Create a mesh object with the registered geometry and materials
const mesh = new THREE.Mesh(
  AFRAME.scenes[0].systems.geometry.getGeometry('my-custom-geometry'),materials);

// Add the mesh object to the scene
AFRAME.scenes[0].object3D.add(mesh);

代码2 #

AFRAME.registerGeometry('custom-geometry', {
  schema: {},
  init: function () {
var geometry = new THREE.BufferGeometry();

// Define vertices and indices
var vertices = [
  // Define vertices here
];
var indices = [
  // Define indices here
];

// Set vertex and index data
geometry.setIndex(indices);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

// Create two groups of faces
geometry.addGroup(0, 3, 0);  // Group 1: 3 faces, starting at index 0
geometry.addGroup(3, 3, 1);  // Group 2: 3 faces, starting at index 3

// Define materials for each group
var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Create mesh and apply materials to groups
var mesh = new THREE.Mesh(geometry, [material1, material2]);
mesh.geometry.groups.forEach(function (group) {
  mesh.geometry.addGroup(group.start, group.count, group.materialIndex);
});

// Add mesh to A-Frame entity
this.geometry = mesh.geometry;
  }
});

解决方案 #

1. 正确注册带分组的BufferGeometry #

AFRAME.registerGeometry('multi-group-geo', {
  init: function () {
    // 共享顶点数据：z=0和z=1两个平面的顶点
    const vertices = [
      -1, 1, 0,
      -1, -1, 0,
      0, -1, 0,
      1, -1, 0,
      1, 1, 0,
      -1, 1, 1,
      -1, -1, 1,
      0, -1, 1,
      1, -1, 1,
      1, 1, 1
    ];

    // 索引数据：每个三角面对应3个顶点索引
    const indices = [
      // z=0平面的3个三角面
      0, 1, 2,
      2, 3, 4,
      0, 2, 4,
      // z=1平面的3个三角面
      5, 6, 7,
      7, 8, 9,
      5, 7, 9
    ];

    const geometry = new THREE.BufferGeometry();
    // 设置顶点位置属性
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    // 设置索引属性
    geometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));

    // 为每个三角面分配材质分组
    // 参数说明：start（起始索引位置）、count（索引数量）、materialIndex（材质数组索引）
    geometry.addGroup(0, 3, 0);   // 第1个三角面 → 材质0
    geometry.addGroup(3, 3, 1);   // 第2个三角面 → 材质1
    geometry.addGroup(6, 3, 2);   // 第3个三角面 → 材质2
    geometry.addGroup(9, 3, 3);   // 第4个三角面 → 材质3
    geometry.addGroup(12, 3, 4);  // 第5个三角面 → 材质4
    geometry.addGroup(15, 3, 5);  // 第6个三角面 → 材质5

    // 计算法线（使用MeshStandardMaterial等需要光照的材质时必须）
    geometry.computeVertexNormals();

    this.geometry = geometry;
  }
});

2. 在A-Frame中使用该几何体 #

方式1：HTML直接引用

<a-scene>
  <a-entity 
    geometry="primitive: multi-group-geo"
    id="multi-mesh"
  ></a-entity>
</a-scene>

<script>
// 定义材质数组
const materials = [
  new THREE.MeshBasicMaterial({ color: 'red', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'green', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'blue', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'yellow', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'purple', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'orange', side: THREE.DoubleSide })
];

// 为实体绑定材质数组
document.querySelector('#multi-mesh').object3D.children[0].material = materials;
</script>

方式2：JS动态创建实体

// 创建材质数组
const materials = [
  new THREE.MeshBasicMaterial({ color: 'red', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'green', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'blue', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'yellow', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'purple', side: THREE.DoubleSide }),
  new THREE.MeshBasicMaterial({ color: 'orange', side: THREE.DoubleSide })
];

// 获取场景并创建实体
const scene = AFRAME.scenes[0];
const entity = document.createElement('a-entity');
entity.setAttribute('geometry', 'primitive: multi-group-geo');
// 绑定材质数组
entity.object3D.children[0].material = materials;
scene.appendChild(entity);

关键注意点 #

• addGroup的参数必须与索引数组对应：每个三角面占3个索引，因此分组的start依次为0、3、6...，count固定为3。
• 如果使用需要光照的材质（如MeshStandardMaterial），必须调用geometry.computeVertexNormals()计算法线，否则模型会显示黑色。
• 建议设置材质的side: THREE.DoubleSide，确保几何体正反两面都可见。
• 尽量通过A-Frame实体管理网格，而非直接添加THREE.Mesh到场景，避免框架生命周期冲突。

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