Aframe A-Frame Web AR自拍相机“；试戴眼镜；互换模型

我正在尝试创建一个简单的web AR，用户只需按下一个按钮就可以试戴不同的眼镜

这是我的body.html

<div id="nextbutton" style="display: none; z-index: 30">
  <h2>Next 3D Model</h2>
</div>

<a-scene 
  next-button
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  xrextras-pause-on-hidden
  renderer="maxCanvasWidth: 960; maxCanvasHeight: 960"
  xrface="mirroredDisplay: true;  meshGeometry: eyes, face, mouth; cameraDirection: front; allowedDevices: any;">
  
  <a-assets>

    <a-asset-item id="glassesModel" class="cantap" src="./assets/Models/stereo-glasses.glb"></a-asset-item>
     <a-asset-item id="glasses2Model" class="cantap" src="./assets/Models/stereo-glasses2.glb"></a-asset-item>
  </a-assets>
  
  <xrextras-capture-button></xrextras-capture-button>
  <xrextras-capture-preview></xrextras-capture-preview>
  
  <a-camera look-controls="enabled: false"
  wasd-controls="enabled: false"
  position="0 1.6 0"
  raycaster="objects: .cantap"
  cursor="
      fuse: false;
      rayOrigin: mouse;"></a-camera>
  
  <xrextras-faceanchor>
     
   
    <xrextras-face-attachment point="noseBridge">

       <a-entity id="model" gltf-model="#glassesModel" scale="1.1 1.1 1.1" position="0 0.05 0">
        <a-plane 
          position="0.25 -0.01 0"
          height="0.25" 
          width="0.4" 
          side="back" 
          depth-write="false"
          color="#7611B6"
          opacity="0.5"
          roughness="0.25"
        ></a-plane>
        <a-plane 
          position="-0.25 -0.01 0"
          height="0.25" width="0.4" 
          side="back" 
          depth-write="false"
          color="#FFC828"
          opacity="0.5"
          roughness="0.25"
        ></a-plane>
      </a-entity>
      
    </xrextras-face-attachment>
    
  </xrextras-faceanchor>
  
  <a-light type="directional" target="#face" position="0 1.8 3" intensity="0.8"></a-light>
  <a-light type="ambient" intensity="0.8"></a-light>
  
</a-scene>

---

多亏了A-Frame discord频道的好心人，我才得以让它工作。我将

.cantap

类添加到了错误的元素中。应该将其分配给

元素，而不是

元素

<a-entity
       id="model"
       gltf-model="#glassesModel"
       class="cantap"
       scale="1.1 1.1 1.1"
       position="0 0.05 0">

<a-entity
       id="model"
       gltf-model="#glassesModel"
       class="cantap"
       scale="1.1 1.1 1.1"
       position="0 0.05 0">

<a-camera
  id="camera"
  look-controls="enabled: false"
  wasd-controls="enabled: false"
  position="0 1.6 0"
  raycaster="objects: .cantap"
  cursor="  fuse: false;
  rayOrigin: mouse;"></a-camera>

const nextButtonComponent = () => ({          
  init: function() {
    const modelList = ["glassesModel", "glasses2Model", "duckModel", "foxModel"]

    const model = document.getElementById('model')
    const nextButton = document.getElementById('nextbutton')
    nextButton.style.display = 'block'
    
    let idx = 1 // Start with the 2nd model as 1st is already in the scene on page load
    const nextModel = () => {
      // Need to remove gltf-component first due to AFrame regression: https://github.com/aframevr/aframe/issues/4341
      model.removeAttribute('gltf-model')
      // Switch to next model in the list
      model.setAttribute('gltf-model', `#${modelList[idx]}`)
 
      idx = (idx + 1) % modelList.length
    }
    nextButton.onclick = nextModel // Switch to the next model when the button is pressed.
  }
})

export {nextButtonComponent}