A-Frame Web AR自拍相机“试戴眼镜”互换型号

Question

我正在尝试创建一个简单的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实体"#glassesModel“是固定的，我只是想不出如何将它与模型列表中的另一个- "#glasses2Model”交换。

下面是按钮的代码，它必须激活不同眼镜的交换。

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

    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}

Answer 1

多亏了A帧不和谐频道的好心人，我才能让它正常工作。我将.cantap类添加到错误的元素中。应该将其指定给<a-asset-item>，而不是<a-entity>元素，如下所示：

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

以便<a-camera>知道哪些对象是可替换的。

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

所有这些都与next-button JS很好地结合在一起。

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}