Javascript onclick switch name doesn't work

JavaScript
1

Hi there,

For a modelviewer of a AR, I would like to change 2 sources with Javascript in one single click.
The AR objects uses for Android and IOS each their own document and onclick both of them need to switch the name according the request. Unfortenatly the name switch in Javascript for the IOS document doesn’t work.

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

I know it’s quite a simple task and I should not use there an operator, but I don’t know how to solve this. How can I arrange both of them will switch their name?

Online source: Augmented Reality

<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>
2

You have to use .setAttribute() function if you want to be setting the attributes on the modelViewer object.

modelViewer.setAttribute('src', base + '.glb');
modelViewer.setAttribute('ios-src', base + '.usdz');
modelViewer.setAttribute('poster', base + '.png');

This will then set the three properties as you require. This has been tested with your code. Now if this causes the modelViewer to reload as required, I can’t say for sure, but generally changing properties, including src usually causes it to reload.

Good luck. :slight_smile:

3

Thank you for your kind reply! I solved it to use a capital e.g. modelViewer.iosSrc = base + ‘.usdz’;

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.