3Dコンテンツの幅が広がる！model-viewerでマテリアルの金属質と粗さを変える方法

<model-viewer id="sphere" camera-controls="" touch-action="pan-y" interaction-prompt="none" src="path/to/gltf" ar="" alt="A 3D model of a sphere">
  <div class="controls">
    <div>
      <p>Metalic: <span id="metalness-value"></span></p>
      <input id="metalness" type="range" min="0" max="1" step="0.01" value="1">
    </div>
    <div>
      <p>Roughness: <span id="roughness-value"></span></p>
      <input id="roughness" type="range" min="0" max="1" step="0.01" value="0">
    </div>
  </div>
</model-viewer>
<script>
const modelViewerParameters = document.querySelector("model-viewer#sphere");

modelViewerParameters.addEventListener("load", (ev) => {

  let material;
  for (let i = 0; i < modelViewerParameters.model.materials.length; i++) {
    if (modelViewerParameters.model.materials[i].name === 'body') {
      material= modelViewerParameters.model.materials[i];
      break;
    }
  }
  if (material == null) return;

  let metalnessDisplay = document.querySelector("#metalness-value");
  let roughnessDisplay = document.querySelector("#roughness-value");

  metalnessDisplay.textContent = material.pbrMetallicRoughness.metallicFactor;
  roughnessDisplay.textContent = material.pbrMetallicRoughness.roughnessFactor;

  // Defaults to gold
  material.pbrMetallicRoughness.setBaseColorFactor([0.7294, 0.5333, 0.0392]);

  document.querySelector('#metalness').addEventListener('input', (event) => {
      material.pbrMetallicRoughness.setMetallicFactor(event.target.value);
      metalnessDisplay.textContent = event.target.value;
  });

  document.querySelector('#roughness').addEventListener('input', (event) => {
      material.pbrMetallicRoughness.setRoughnessFactor(event.target.value);
      roughnessDisplay.textContent = event.target.value;
  });
});
</script>