我可以用上传的文件改变模型查看器的纹理吗？(客户方)

Question

挑战

目标是允许用户上传他们的纹理，以预览模型-查看器模型。

到目前为止我尝试过的

1. I使其工作，但使用<input type="file">代替<input type="file">，可以将上传的图像显示为<img>元素.

示例

https://jsfiddle.net/pynrdk25/11/

​

document.getElementById("urlA").addEventListener("change", function() {
  const file = this.files[0];

  if (file) {
    const reader = new FileReader();
    document.getElementById("modelA").model.materials[0].pbrMetallicRoughness.baseColorTexture.texture.source.setURI(this.value);
    reader.readAsDataURL(file);
  }
})

body {
  background-color: rgba(255,255,255,0.85)
}
h1 {
  margin: 0;
  font-size:  16pt;
  font-family: Arial, Helvetica, sans-serif;
  color: #4a5a8a
  
}
model-viewer {
  width: 512px;
  height: 512px;
  border: 2px solid black;
  background-color: #484E61
}
input[type="file"] {
  margin: 15px auto
}

<script src="https://unpkg.com/@google/model-viewer@1.12.0/dist/model-viewer-umd.js"></script>
<h1>Upload an image to preview it in the model</h1>
<input type="file" id="urlA">
<model-viewer
id="modelA"
camera-controls
src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
shadow-intensity="0"
environment-image="neutral"
exposure="0.5"
></model-viewer>

​

Answer 1

我不太了解模型查看器或您试图更改的纹理，但我可以提供详细信息，说明为什么您的代码没有正确获取文件的内容。

您需要订阅FileReader上的FileReader事件并访问result属性以获得生成的数据URI。

​

document.getElementById("urlA").addEventListener("change", function() {
  const file = this.files[0];
  const viewer = document.getElementById("modelA");

  if (!file) return;

  const reader = new FileReader();
  reader.addEventListener('load', async function() {
    const texture = await viewer.createTexture(reader.result);
    viewer.model.materials[0].normalTexture.setTexture(texture);
  });
  reader.readAsDataURL(file);
})

body {
  background-color: rgba(255,255,255,0.85)
}
h1 {
  margin: 0;
  font-size:  16pt;
  font-family: Arial, Helvetica, sans-serif;
  color: #4a5a8a
  
}
model-viewer {
  width: 512px;
  height: 512px;
  border: 2px solid black;
  background-color: #484E61
}
input[type="file"] {
  margin: 15px auto
}

<script src="https://unpkg.com/@google/model-viewer@1.12.0/dist/model-viewer-umd.js"></script>
<h1>Upload an image to preview it in the model</h1>
<input type="file" id="urlA">
<model-viewer
id="modelA"
camera-controls
src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
shadow-intensity="0"
environment-image="neutral"
exposure="0.5"
></model-viewer>

​