2

I am wondering how it would be possible using JavaScript and HTMl (aframe.io) to only show a gltf model if a variable has a certain vaue. For example, if I have a variable called x and x = 5 than show the gltf but if x doesn't equal 5 than hide the gltf. Here is the code for my gltf model.

<a-gltf-model static-body position="0 0 0" rotation="0 90 0" scale="0.2 0.2 0.2" src="https://cdn.glitch.com/6632f840-a210-4bdc-a62f-bc38e65ae48a%2Fscene%20-%202021-05-16T191327.675.glb?v=1621217617851"></-a-gltf-model>
Aidan Young
  • 41
  • 1

1 Answers1

1

Because a-gltf-model creates an entity, you can use the visible attribute to show or hide your model:

<a-entity visible="false"></a-entity>

To change the value of visible, you can use ordinary DOM api's to change the attribute:

const el = document.querySelector('a-gltf-model')
if (x === 5) {
  el.setAttribute('visible', true);
} else {
  el.setAttribute('visible', false);

Docs: https://aframe.io/docs/1.2.0/components/visible.html#updating-visibility

EDIT:

how would I change this to a gltfs id so I can specifically choose which to hide and show

You can select for IDs the same way as you would for any HTML element:

<a-gltf-model id="one" ...etc ></-a-gltf-model>
<a-gltf-model id="two" ...etc ></-a-gltf-model>

// using css style selectors:
const el1 = document.querySelector('#one')
const el2 = document.querySelector('#two')
// or 
const el1 = document.getElement('#one')
const el2 = document.getElement('#two')

Docs: https://aframe.io/docs/1.2.0/introduction/javascript-events-dom-apis.html#with-queryselector

coagmano
  • 5,542
  • 1
  • 28
  • 41