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

Posted 2023-03-16

【中文标题】如何动态更改球体对象的颜色（在 Autodesk forge 中使用 SceneBuilder）

【英文标题】：How to change the color of sphere objects dynamically (used SceneBuilder in Autodesk forge)

【发布时间】：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" ]

【参考方案1】：

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

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