Aframe - 将不透明度设置为“a-sky”元素不起作用

Question

我有两个重叠的天空元素。第二个位于 z=-1000（相机不可见）。在这个设置中，如果我将第一个天空元素的不透明度设置为 0.5，我应该会看到第二个天空元素。

以下代码不起作用。 （需要完成这项工作。）

skyEl.getObject3D("mesh").material= new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load("image url"),
    transparent: true,
    opacity: 0.5
});

但是这种方法有效。

skyEl.setAttribute('src','image url'); 
skyEl.getObject3D("mesh").material.transparent = true;
skyEl.getObject3D("mesh").material.opacity= 0.5;

在我的项目中，我无法设置 src 属性，因为纹理已经加载，我只能从预加载的纹理创建材质。我需要知道第一种方法有什么问题以及如何解决它。是否需要设置其他参数

还尝试使用a-sphere 代替a-sky，但结果相同。

DEMO：https://codesandbox.io/s/qx6zj247l6（涵盖这两种情况，请忽略所有反应和补间内容。）

PS：创建交叉淡入淡出+缩放场景过渡效果。

Answer 1

获得正确的渲染顺序以使透明度按预期工作是很困难的。来自material component documentation page：

透明度问题

透明度和 Alpha 通道在 3D 图形中很棘手。如果您遇到前景中的透明材质无法正确合成到背景中的材质的问题，则问题可能是由于 OpenGL 合成器（WebGL 是其 API）的底层设计造成的。

在理想情况下，A-Frame 中的透明度将“正常工作”，无论开发人员将实体放置在 3D 空间中的什么位置，或者他们在标记中定义元素的顺序如何。我们经常会遇到前景实体遮挡背景实体的场景。这会造成混乱和不必要的视觉缺陷。

要解决此问题，请尝试更改 HTML 中实体的顺序。

要解决您的问题，只需在 HTML 中将 #sky1 放在 #sky2 之后：

render() {
    return (
      <Scene>
        <Entity id="sky2-wrapper" rotation="0 90 0">
          <Entity id="sky2" primitive="a-sky" position="0 0 -1000" />
        </Entity>
        <Entity id="sky1" primitive="a-sky" opacity="1" />
        <Entity
          camera={{
            far: 10000,
            fov: 80,
            near: 0.05,
            active: true
          }}
          id="cam"
          rotation="0 90 0"
          mouse-cursor
          look-controls="reverseMouseDrag:true"
        />
      </Scene>
    );
  }