如何动态更改球体对象的颜色（使用Autodesk forge中的SceneBuilder）

Question

我正在研究 Petr Broz 的 Custom models in Forge Viewer 博客中的示例。我在动态更新球体对象的颜色时遇到问题。我从这样的 json 文件中获取球体颜色的值 "color": "#FF0000"。我创建了 3 个球体，其余部分也获得了第一个球体的颜色。为什么其他球体的颜色没有更新？如果问题出在使用相同的 material 上，那么我也尝试在数组中提供 sphereMaterial，如下所示。这是错误的吗？我该如何更新颜色？

var spherecolor='';
var sphereMaterial = [];
const button = document.getElementById('button-geometry');
  button.addEventListener('click', async function () {
  const sceneBuilder = await viewer.loadExtension('Autodesk.Viewing.SceneBuilder');
  const modelBuilder = await sceneBuilder.addNewModel({ conserveMemory: true, modelNameOverride: 'My Custom Model' });
  for (var i = 0; i < numOfSphere;i++) {
    addGeometry(modelBuilder, jsonGeomConfig.geom[i].dbId, i);
  }
});
function addGeometry(modelBuilder, dbId, i) {
  const sphereGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.SphereGeometry(0.05, 8, 10));
  //Getting spherecolor from json file
  spherecolor = jsonGeomConfig.geom[i].color;
  sphereMaterial[i] = new THREE.MeshPhongMaterial({ color: spherecolor });
  const sphereTransform = new THREE.Matrix4().compose(
    new THREE.Vector3(jsonGeomConfig.geom[i].Position.posX, jsonGeomConfig.geom[i].Position.posY, jsonGeomConfig.geom[i].Position.posZ),
    new THREE.Quaternion(0, 0, 0, 1),
    new THREE.Vector3(2,2,2)
  );
  modelBuilder.addMaterial('MyCustomMaterial', sphereMaterial[i]);
  const sphereGeomId = modelBuilder.addGeometry(sphereGeometry);
  const sphereFragId = modelBuilder.addFragment(sphereGeomId, 'MyCustomMaterial', sphereTransform);
  modelBuilder.changeFragmentsDbId(sphereFragId, dbId);
}

Answer 1

一定要给不同颜色的材料起不同的名字...否则它会被覆盖 - 参见this 现场环境：

  modelBuilder.addMaterial('MyCustomMaterial'+i, sphereMaterial[i]);
  const sphereGeomId = modelBuilder.addGeometry(sphereGeometry);
  const sphereFragId = modelBuilder.addFragment(sphereGeomId, 'MyCustomMaterial'+i, sphereTransform);

如何动态更改球体对象的颜色（使用Autodesk forge中的SceneBuilder）

How to change the color of sphere objects dynamically (used SceneBuilder in Autodesk forge)

autodesk-forge

autodesk-viewer