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

【问题标题】：How to change the color of sphere objects dynamically (used SceneBuilder in Autodesk forge)如何动态更改球体对象的颜色（在 Autodesk forge 中使用 SceneBuilder）
【发布时间】：2020-09-19 13:11:49
【问题描述】：

我正在研究 Petr Broz 的 Custom models in Forge Viewer 博客中的示例。我在动态更新球体对象的颜色时遇到问题。我从像"color": "#FF0000" 这样的 json 文件中获取球体颜色的值。我已经创建了 3 个球体，其余的球体也得到了第一个球体的颜色。为什么其他球体的颜色没有更新？如果问题出在使用相同的材料上，那么我尝试在数组中给出 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);
}

【问题讨论】：

Three.js 使用十六进制设置颜色很好 - 不知道 jsonGeomConfig 里面有什么我不知道到底出了什么问题......只是用我自己的代码进行了测试，一切正常。 ..
jsonGeomConfig 有来自 json 文件的响应。我正在从该文件中获取球体的颜色。我已经创建了三个球体对象，其中我得到了其余的第一个球体颜色，我将分享我在 json 文件 (jsonGeomConfig) 中给出的内容
{ "NumOfSphere": "3", "geom": [ { "dbId": "123", "color": "#FF0000", "Position": { "posX": "-5", "posY": "-1", "posZ": "2.5" } }, { "dbId": "1234", "color": "#0000FF", "Position": { "posX": "-5", "posY": "-0.8", "posZ": "1.8" } }, { "dbId": "12345", "color": "green", "Position": { "posX": "-3.5", "posY": "-1.5", "posZ": "1.8" } } ] }

标签： autodesk-forge autodesk-viewer

【解决方案1】：

一定要给不同颜色的材料起不同的名字......否则它会被覆盖 - 请参阅this live environment：

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

【讨论】：