0

I am new to A-frame so any help is much appreciated. I am using the aframe-event-set-component to change the visibility of one object [drgn] when the user looks at another object [rune]. During this visibility shift, when the dragon is visible, I would also like to trigger audio. However, I am finding that when I log the visibility of the object, I am getting both true and false depending on if I put it in a variable or just console log it.

Here's the relevant HTML

    <a-entity gltf-model="#rune" position="0 -30 0" 
         event-set__enterRune="_event: mouseenter;_delay:2000; _target: #drgn; visible: true" >
    </a-entity>

    <a-entity id="drgn" gltf-model="./models/dragon2.glb" scale="2 2 2" position="38.751 -14.271 13.046" rotation="0 -90 0" visible="false" animation-mixer></a-entity>

Here is my JavaScript

  var a_land = new Audio('./audio/dragonLand.wav');
  var a_roar = new Audio('./audio/DragonRoar.wav');
  var a_flap = new Audio('./audio/wingflap.wav');

  var rune = document.querySelector('#rune');
  var drgn = document.querySelector('#drgn');

  const dragonVisibility = drgn.getAttribute('visible');
  const dragonVisibility2 = drgn.attributes[5]; 

  function checkVisible () {
    console.log(drgn.getAttribute('visible'));
    console.log(dragonVisibility);
    setTimeout(checkVisible, 5000)
  };
  setTimeout(checkVisible, 5000)



  if (dragonVisibility == true) {
    console.log('play sounds');
    a_land.play();
    }

Where I am lost is that

const dragonVisibility = drgn.getAttribute('visible');

is giving true at all times, Whereas

console.log(drgn.getAttribute('visible'));

is giving true/false accurately

but they should be giving the same value since they are in fact the same thing, right?

Because of this when I try...

  if (dragonVisibility == true) {
    console.log('play sounds');
    a_land.play();
    }

the audio plays even when the dragon is invisible because dragonVisibility is always logging as true even though console.log(drgn.getAttribute('visible')) = 'false'

This nodelist from drgn.attributes may be helpful

NamedNodeMap {0: id, 1: gltf-model, 2: scale, 3: position, 4: rotation, 5: visible, 6: animation-mixer, id: id, gltf-model: gltf-model, scale: scale, position: position, rotation: rotation, …}
0: id
1: gltf-model
2: scale
3: position
4: rotation
5: visible
baseURI: "http://127.0.0.1:5501/"
childNodes: NodeList []
firstChild: null
isConnected: false
lastChild: null
localName: "visible"
name: "visible"
namespaceURI: null
nextSibling: null
nodeName: "visible"
nodeType: 2
nodeValue: "false"
ownerDocument: document
ownerElement: a-entity#drgn
parentElement: null
parentNode: null
prefix: null
previousSibling: null
specified: true
textContent: "false"
childNodes: NodeList []
firstChild: null
isConnected: false
lastChild: null
localName: "visible"
name: "visible"
namespaceURI: null
nextSibling: null
nodeName: "visible"
nodeType: 2
nodeValue: "false"
ownerDocument: document
ownerElement: a-entity#drgn
parentElement: null
parentNode: null
prefix: null
previousSibling: null
specified: true
textContent: "false"
value: "false"
6: animation-mixer
length: 7
animation-mixer: animation-mixer
gltf-model: gltf-model
id: id
position: position
rotation: rotation
scale: scale
visible: visible
__proto__: NamedNodeMap
irina fawcett
  • 41
  • 3

1 Answers1

0

You are having an issue with types. The value of the attribute is a string, not a boolean. Replace:

const dragonVisibility = drgn.getAttribute('visible');

with

const dragonVisibility = drgn.getAttribute('visible') === 'true';

Due to the way JS works, both the strings "true" and "false" are considered Boolean true in your if statement.

Further reading: https://www.sitepoint.com/javascript-truthy-falsy/

  • When I try that "console.log(drgn.getAttribute('visible'));" is still the only correct one whereas "dragonVisibility" is now always false instead of always true. I just need to get a const that logs the visibility accurately, not to set the const to true or false. It only logs correctly in console.log(drgn.getAttribute('visible')); but not if that same information drgn.getAttribute('visible') is put into a const/var. Then its either always true or always false instead of matching the actual visibility. – irina fawcett Jul 20 '21 at 15:38
  • Just a note: the general approach to boolean attributes is to add/remove them, like with `disabled`. This way you can check for the attribute's presence and use that instead. –  Jul 20 '21 at 19:58