A 帧图像亮度答案

【问题标题】：A-Frame Image BrightnessA 帧图像亮度
【发布时间】：2020-04-29 18:57:53
【问题描述】：

我有一个 A-Frame 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

知道如何实现吗？

【问题讨论】：

标签： javascript css three.js augmented-reality aframe

【解决方案1】：

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

material="shader:standard"

如果有更好的方法，请发布答案。

【讨论】：