如何覆盖（部分透明）<a-sky />，像这样做到<img />？

Question

我们正在构建家居装饰3D视图工具，客户可以点击沙发，并在3D视图中显示或隐藏。

它们为我提供了家庭背景的全景图像，以及除了沙发部分以外尺寸相同但透明的沙发图像。

我想：

<a-sky src='background.jpg' /> 
<a-sky src='sofa.jpg' /> 

希望他们覆盖。但沙发形象尽管是透明的，但会阻挡背景。更具体地说，结果是空白空间中的沙发，而不是给定背景中的沙发（这是期望的结果）。

我该如何实现自己的目标？

Answer 1

jpg格式不支持透明度。改为使用png。

设置material:transparent财产到true沙发实体。

<a-sky src='sofa.png' material="transparent:true" /> 

下面是一个工作小提琴，

https://jsfiddle.net/od6gxgyL/1/

作为一个方面说明，A-帧添加灰色边框PNG图像的不透明部分 。无法弄清楚为什么会发生这种情况。我很高兴知道是否有人解决了这个问题。