解决AR model-viewer点击切换资源时ios-src属性赋值不生效问题

带中划线的HTML自定义属性无法直接通过JS的点语法赋值，JS会将ios-src中的-解析为减法运算符，实际执行的是无效的表达式运算，自然不会更新对应的属性值。

有两种可用的写法：

• 方案1：使用setAttribute方法更新属性（兼容性最优，适合所有自定义属性场景）
• 方案2：使用model-viewer暴露的小驼峰格式属性iosSrc直接赋值

把原来的modelViewer.ios-src = base + '.usdz';替换成下面任意一种即可：

// 方案1写法
modelViewer.setAttribute('ios-src', base + '.usdz');

// 方案2写法
modelViewer.iosSrc = base + '.usdz';

window.switchSrc = (element, name) => {
  const base = "../../assets/ShopifyModels/" + name;
  modelViewer.src = base + '.glb';
  // 替换原来的错误写法即可
  modelViewer.setAttribute('ios-src', base + '.usdz');
  modelViewer.poster = base + '.png';
  const slides = document.querySelectorAll(".slide");
  slides.forEach((element) => {element.classList.remove("selected");});
  element.classList.add("selected");
};

注意：如果你的usdz资源和glb资源不在同一目录，需要单独调整usdz的路径拼接规则，匹配你实际的资源存放位置。

内容的提问来源于stack exchange，提问作者Perpetuum