Para un visor de modelos de un AR, me gustaría cambiar 2 fuentes con Javascript con un solo clic. Los objetos AR utilizan para Android e IOS cada uno su propio documento y, al hacer clic, ambos deben cambiar el nombre de acuerdo con la solicitud. Desafortunadamente, el cambio de nombre en Javascript para el documento IOS no funciona.

 modelViewer.src = base + '.glb'; modelViewer.ios-src = base + '.usdz';

https://modelviewer.dev/examples/augmentedreality/#webXR

Sé que es una tarea bastante simple y no debería usar un operador allí, pero no sé cómo resolver esto. ¿Cómo puedo arreglar que ambos cambien su nombre?

Fuente en línea: Realidad Aumentada

 <model-viewer src="../../assets/ShopifyModels/Chair.glb" ios-src="../Chair.usdz" poster="../Chair.png" shadow-intensity="1" ar ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model carousel"> <button slot="ar-button" id="ar-button"> View in your space </button> <div class="slider"> <div class="slides"> <button class="slide selected" onclick="switchSrc(this, 'Chair')"> </button><button class="slide" onclick="switchSrc(this, 'Mixer')"> </button><button class="slide" onclick="switchSrc(this, 'Canoe')"> </button></div> </div> </model-viewer> <script type="module"> const modelViewer = document.querySelector("model-viewer"); window.switchSrc = (element, name) => { const base = "../../assets/ShopifyModels/" + name; modelViewer.src = base + '.glb'; modelViewer.ios-src = base + '.usdz'; modelViewer.poster = base + '.png'; const slides = document.querySelectorAll(".slide"); slides.forEach((element) => {element.classList.remove("selected");}); element.classList.add("selected"); }; document.querySelector(".slider").addEventListener('beforexrselect', (ev) => { // Keep slider interactions from affecting the XR scene. ev.preventDefault(); }); </script>