获得相同值的 A-Frame 的 True 和 False？

问题描述

我是 A-frame 的新手，所以非常感谢任何帮助。当用户查看另一个对象 [rune] 时，我正在使用 aframe-event-set-component 来更改一个对象 [drgn] 的可见性。在此可见性转变期间，当龙可见时，我还想触发音频。但是，我发现当我记录对象的可见性时，我会得到 true 和 false，这取决于我是将它放在变量中还是只是控制台记录它。

这是相关的 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>

这是我的 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();
    }

我迷路的地方是

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

在任何时候都是真实的，而

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

准确地给出真/假

但它们应该给出相同的值，因为它们实际上是相同的东西，对吗？

因此当我尝试...

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

即使龙是不可见的，音频也会播放，因为即使 console.log(drgn.getAttribute('visible')) = 'false'

来自 drgn.attributes 的这个节点列表可能会有所帮助

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

解决方法

您遇到了类型问题。属性的值是一个字符串，而不是一个布尔值。替换：

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

与

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

由于 JS 的工作方式，字符串 "true" 和 "false" 在 if 语句中都被视为布尔值 true。

进一步阅读：https://www.sitepoint.com/javascript-truthy-falsy/