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

Question

我正在尝试使用 THREE.BufferGeometry 使用两个或多个索引面组在 A-Frame 中注册自定义几何图形， 因为许多顶点将被共享， 我想在创建后更改网格， 无需移动多个点并担心模型中出现孔洞。 我想要几组面，我想为每组分配不同的材质。

我知道用不同的材料制作嵌套的实体组可能更容易， 但我正在努力节省 CPU 和 GPU 时间以及内存。

我可以在网上找到的所有旧示例都使用了三个几何图形， 不是三.BufferGeometry。没有人使用当前版本，因为 THREE.Geometry 已贬值。

我根据我在在线文档中找到的新格式信息做了八九个变体。 在 ChatGPT 的“帮助”下，我什至尝试了 20 多个新版本的代码。

它的代码也没有工作。

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);

我还尝试了以下方法：

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;
  }
});