A帧图像亮度

Question

我有一个A帧AR场景，其中有图像（透明png），我可以四处移动并通过手势调整大小。

现在，我要根据摄像机输入估算的光线来更改图像的亮度。我有光估算位，我的最初想法是使用光估算输出的值简单地将CSS filter: brightness(x.x)应用于图像。

在<a-image>上不幸地应用CSS似乎没有任何效果。

因此，我想这可以使用材质和着色器来实现，但是我不知道怎么办，我尝试使用平面着色器并更改其不透明度，但这改变了整个图像的不透明度，所以我结束了并带有稍微不透明的黑色阴影。

这是我尝试的阴影示例：

<a-scene>
  <a-image src="http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c52d.png" 
     position="0 2 -3"
     rotation="0 0 0"
     height="5" 
     width="5"
     material="shader:flat;color:black;opacity: 0.5; transparent: true">
  </a-image>
</a-scene>

我还尝试过将标准着色器与emissiveIntensity配合使用，但我似乎无法使其与黑色配合使用，尽管我无法获得完全暗的图像，但其他任何颜色似乎都或多或少地出现在我想要的位置（就像亮度为0时一样）：

//if i change emissive to black then the image is unaffected
material="shader:standard;color:white;emissive:red;emissiveIntensity:0.5; 

//like this i can get full black but the image is no longer visible, only the shape
material="shader:standard;color:black;emissive:white;emissiveIntensity:0.5"

jsfiddle

任何想法如何实现这一目标？

Answer 1

我明白了，我所要做的就是将材质设置为标准着色器，然后再更改手动添加的环境光的强度以替换默认的A帧添加的光线。

material="shader:standard"

[如果有任何更好的方法，请发表答案。