show delay hide show... on entity in aframe for AR

Question

I'm a bit of Dev noonb, but I would like to create a flow in AR app which allows me to show/delay/hide/show type of behavirous.

I'm using aframe as a platform so now trying design it.

The experience will consist of 5 scences with multiple assets displayed and then hidden after some animations are played.

I tried to change the visible =true/false at the scene level but 8th wall is not loading once I have added extra scene.

Is the best way to create a function to control unhide at the entity level? any help would be hugely appreciated.

here is what I have so far

<a-entity
    id="model"
    gltf-model="#animatedModel"
    class="cantap"
    scale="55 55 55"
    animation-mixer="clip: FLOAT"
    xrextras-hold-drag 
    xrextras-two-finger-rotate
    xrextras-pinch-scale
    shadow
    visible="true">
  </a-entity>

and it is controlled by the button at the moment but I would like for it to happen automatically after x seconds passes

const nextButtonComponent = () => ({
  init() {
    const visibilityList = ['text', 'sun']
   const model = document.getElementById('model')
   const sunmodel = document.getElementById('sunmodel')
    const nextButton = document.getElementById('nextbutton')

    nextButton.style.display = 'block'

   
    const nextAnimation = () => {
      model.setAttribute('visible', false)
      sunmodel.setAttribute('visible', true)
    
    }
    nextButton.onclick = nextAnimation // Switch to the next animation when the button is pressed.
  },
})

export {nextButtonComponent}

atomarch atomarch · Accepted Answer · 2020-10-02T22:41:41

You could do this a few different ways.

Yes, you could have both models in your scene, and when desired hide one, show the other. In your example a button click does the swap, but if you want a time delay, look at using setTimeout()

Alternatively, you could swap one model for the other. Check out this example: https://www.8thwall.com/playground/model-swap

It also uses a button tap to change the model (by removing the gltf-model attribute on your entity and then setting a new one). Here you could also change the code such that instead of being triggered by a button tap, your "change" function could be called after X seconds using setTimeout()

https://www.w3schools.com/jsref/met_win_settimeout.asp

show delay hide show... on entity in aframe for AR

1 Answers