El objetivo es mostrar la imagen cargada pixelada, con el filtrado de textura NEAREST .
image-rendering CSS.NEAREST .Creo que el problema es que las imágenes que vienen con el modelo están correctamente filtradas, pero la nueva cargada no.
API de materiales del visor de modelos
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>