How to add a clickable object to an array of models in AFRAME

Question

I'm trying to add a sort of hotspot to each swappable 3d model, so when the user clicks the hotspot through the screen, it shows the information. I'm trying to add the hotspot components to the next-button javascript file. I understand that in the next-button.js file I'm calling for the id='model' but I would like to call all the models so I can place on each of them a particular hotspot. Any idea how I can make it happen? Thanks! =)

Here is the HTML code

'''


  Next 3D Model





  



  
    Close
  
  
  




  
  
    
    
    
    
    

  

 
     
  

  
  
 
    
 

  
  
  


  
    
    
    
    
  

  
  

  

  

    
    
      
    

  
  
  
'''

Here is the next-button.js code

'''// Copyright (c) 2021 8th Wall, Inc.

const nextButtonComponent = () => ({
  init() {
    const modelList = ['humanModel', 'grassModel', 'dirtyModel']
    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} '''

The hotspot component js file

'''const tapHotspotComponent = {
  init() {
    const id = this.el.getAttribute('id')
    const contents = document.getElementById('contents')
    const container = document.getElementById('container')
    const childElement = document.getElementById(`${id}-child`)

    const handleClickEvent = (e) => {
      hideAll()
      container.classList.remove('collapsed')
      childElement.setAttribute('visible', true)
      childElement.setAttribute('class', 'cantap')
      const title = childElement.getAttribute('value')
      contents.innerHTML = `${title}More info about ${title} goes here.`
    }

    this.el.addEventListener('click', handleClickEvent, true)
  },
}

export {tapHotspotComponent} '''

How to add a clickable object to an array of models in AFRAME

0 Answers