控制框架中的光实体

Question

我在 A-Frame 中使用了一些实体，但似乎无法正确控制颜色（即强度）。我可以访问并设置值一次但在那之后，它被锁定并且不会响应任何修改。有一些明显的解决方案吗？

我的应用是拥有一组聚光灯，当您在虚拟环境中经过它们时，它们的强度会主动增减。

更新：我通过定义一组聚光灯和一些变量来开始我的 A-Frame 脚本：

<a-light type="spot" angle="21" color="#BBB" position="33.1 -17 39" target="#Pic01" id="Spot01"></a-light>  
<a-light type="spot" angle="21" color="#BBB" position="38.1 -17 39" target="#Pic02" id="Spot02"></a-light>
<a-light type="spot" angle="21" color="#BBB" position="43.1 -17 39" target="#Pic03" id="Spot03"></a-light>
<a-light type="spot" angle="21" color="#BBB" position="48.1 -17 39" target="#Pic04" id="Spot04"></a-light>
...  
<script> 
  var SpotA=document.querySelector('#Spot01');  
  var SpotB=document.querySelector('#Spot02');  
  var SpotC=document.querySelector('#Spot03');  
  var SpotD=document.querySelector('#Spot04');  
  ...  
</script>  
Later in the code in a script block, I would use:
<script>  
  ...  
  SpotA.object3D.children[0].color.r=xxx;  (some decimal value)  
  SpotA.object3D.children[0].color.g=xxx;  (some decimal value)  
  SpotA.object3D.children[0].color.b=xxx;  (some decimal value)

这通常会奏效，但有时会发生某种情况，光锥会完全变黑，虽然您可以设置甚至读回这些值，但无法恢复对光的控制。如果我尝试使用十六进制值（例如#3AA）设置颜色并且有时随机使用单个 rgb 组件，则总是会发生这种情况。

如果我从控制台手动查询 SpotA，它 returns:

'< a-light type="spot" angle="21" color="#B0B0B0" position="33.1 -17 39" target="#Pic01" id="Spot01" light="">

... 这完全符合我的预期 - 所有元素都存在并且可以从控制台访问。但是请注意，不能使用 javascript 语句设置颜色属性。并且-

SpotA.object3D.children[0].color.r= (some value)

...什么都不做，光锥保持黑色。无论是用代码还是手动完成，结果都是一致的。令人沮丧。

现在，如果我查询任何组件的值，它 return 是我正确设置的值，但光线将被锁定，只产生一个黑色锥体。最终只会return"undefined".

SpotA.object3D.children[0].color.r=0.73333; (enter)
<. 0.73333
SpotA.object3D.children[0].color.r (enter)
<. undefined

有什么想法吗？有些东西似乎坏了，或者我可能错误地访问了这些值。但是文档中没有任何内容可以指导我；我必须查看元素并选择有效的元素。

Answer 1

修改DOM 属性。不要直接访问children（光不保证是第一个children，访问时没有初始化...）例如：

SpotA.setAttribute('color', 'red');

您可以使用以下任何一种颜色格式：

rgb(250, 0,0)
rgb(100%,0%,0%)
hsl(0, 100%, 50%)
#ff0000
#f00
red

控制框架中的光实体

controlling light entity in a-frame

javascript

aframe