Блог

Главная - Вопросы по программированию - Имя переключателя onclick Javascript не работает

Имя переключателя onclick Javascript не работает

#javascript #augmented-reality

Вопрос:

Для modelviewer AR я хотел бы изменить 2 источника с помощью Javascript одним щелчком мыши. Объекты AR используют для Android и IOS каждый свой собственный документ, и при нажатии на них обоим необходимо изменить имя в соответствии с запросом. К сожалению, переключатель имен в Javascript для документа IOS не работает.

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

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

Я знаю, что это довольно простая задача, и я не должен использовать там оператора, но я не знаю, как это решить. Как я могу организовать, чтобы они оба поменяли свое имя?

Онлайн-источник: Дополненная реальность

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

Комментарии:

1. Поскольку в имени свойства есть дефис, который JS анализирует как знак минус, вам придется использовать обозначения в скобках, т. Е. modelViewer["ios-src"] = base ".glb";

2. «modelViewer.ios-src» не является допустимым JS, вам нужно будет использовать обозначения в скобках и строковый ключ.

3. Большое спасибо за ваши ответы. Я решил использовать заглавную букву, например, modelViewer.iosSrc = база ‘.usdz’;

Метки: