Question

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

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

更新：我先从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，它将返回：

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

...恰好显示了我的期望-所有元素都存在，并且可以从控制台进行访问。但是请注意，不能使用javascript语句设置color属性。和-

SpotA.object3D.children [0] .color.r =（某些值）

...将不执行任何操作，并且光锥保持黑色。无论是用代码还是手动完成，结果都是一致的。令人沮丧。

现在，如果我查询任何组件的值，它将返回我已正确设置的值，但是灯光将被锁定，只产生黑色锥体。最终，它只会返回“ undefined”。

SpotA.object3D.children [0] .color.r = 0.73333; （输入）
  <。 0.73333
   SpotA.object3D.children [0] .color.r（输入）
  <。未定义

有什么想法吗？似乎出现故障，或者我访问的值不正确。但是文档中没有任何内容可以指导我。我必须查看元素并选择有效的方法。

Answer 1

修改DOM属性。不要直接访问这些子项（光不能保证是第一个子项，访问时尚未初始化...），例如：

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

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

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

在一帧中控制灯光实体

1 个答案: