The goal is to display the uploaded image pixelated, with NEAREST texture filtering.
image-rendering property.NEAREST.I think the issue is that the images that come with the model are properly filtered, but the new uploaded one isn't.
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].pbrMetallicRoughness.baseColorTexture.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: 256px;
height: 256px;
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>