cesium 加载gltf 设置material

Cesium是一个强大的JavaScript库，用于创建交互式3D地球和空间可视化应用程序。加载GLTF（GL Transmission Format，一种广泛使用的3D模型文件格式）并在Cesium中设置材质（Material），你可以按照以下步骤操作：

1. 首先，确保你已经包含了Cesium库和相关的插件，如果还没有，可以在HTML中添加：

<script src="https://cesium.com/downloads/cesiumjs/releases/latest/Cesium/Cesium.js"></script>

2. 使用`Cesium.load`函数异步加载GLTF模型，并设置材料属性。例如，假设你有一个名为"model.gltf"的文件：

cesium.SceneMode.SCENE3D.then(function(sceneModeChangedEvent) {
  // 创建场景
  var viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode: sceneModeChangedEvent.newValue,
  });

  // 加载模型
  viewer.scene.primitives.add(Cesium.GltfLoader.load(
    'model.gltf',
    undefined,
    function(gltf) {
      // 获取模型根节点
      var modelRoot = gltf.scene.root;

      // 定义材质（这里以PBRMaterial为例）
      var material = new Cesium.PBRMaterial({
        roughness: 0.5,
        metalness: 0.2, // 设置金属度
        baseColorTexture: gltf.images[0], // 使用GLTF的第一个纹理作为基础颜色
      });

      // 将材质应用到模型的每个几何体上
      for (var primitive of modelRoot.children) {
        if (primitive.geometry) {
          primitive.material = material;
        }
      }
    },
    function(error) {
      console.error('Error loading GLTF:', error);
    }
  ));
});

在这个例子中，我们设置了基础颜色纹理、粗糙度和金属度等材质属性。