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" />

下面是一个工作小提琴，

作为旁注，A-Frame在不透明部分周围添加灰色边框 png图像。无法弄清楚为什么会这样。我很高兴知道是否有人解决了这个问题。