Change model onClick of a button

Universal AR A-Frame
#1

Hello,
I have found an A-frame component to switch between multiple 3d models onClick of a button but it does not seem to work, I also do not get any console errors.
here is a glitch for the same: https://glitch.com/edit/#!/zap-ar

#2

Hi @mihir!

I believe I have answered your ticket directly with more information about your specific case, but just in case this helps anybody, here is a light answer!

This is technically an A-Frame library specific query (not Universal AR); however, I can hopefully provide some helpful ideas.

For a very basic version of this sort of thing, you could use A-Frame’s visible attribute (documentation for that here) to render the appropriate model. You could start the model with visible="false", and then use logic which would edit the attribute to true on the press of a button in a script outside your scene using the JavaScript Element.setAttribute() method.

You could of course try to consolidate this and potentially use the asset manager to load your assets and then switch the model accordingly, (using only one entity in the process) but again this would need the help of the A-Frame documentation; and we’ve not really seen anybody try this out in conjunction with our tools before (we’d love to see it though)!

I hope you found this helpful,

Have a lovely day!
Francesca :blush:

1 Like
#3

Thats a nice idea, may be I will give it a shot and update it here.

1 Like
#4

Hi @Francesca,
here is the code that I tried with the asset manager and it works well:
script:

AFRAME.registerComponent("foo", {
    init: function() {
     const modelList = ["milkshakeModel", "burgerModel", "pizzaModel"]
     const model = document.getElementById('model')
     const nextButton = document.getElementById('nextbutton')
    
     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.
  }
})

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

<a-scene foo>   
 <a-assets>
            <!-- Credit to Poly by Google for the model: https://poly.google.com/view/5ZMAz7_ucTn -->
            <a-asset-item
              id="milkshakeModel"
              src="milk-shake.glb"
            ></a-asset-item>
            <a-asset-item
              id="pizzaModel"
              src="pizza.glb"
            ></a-asset-item>
            <a-asset-item
              id="burgerModel"
              src="burger.glb"
            ></a-asset-item>
          </a-assets>
</a-scene>
#5

Hi @mihir,

That’s fantastic - wonderful job! :clap:

Smart thinking with registering this functionality as a component - that will make things a lot easier and contained for you down the line; thanks for sharing! :star:

Have a great day!
Francesca :blush:

1 Like