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

Question

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

以下代码无效。 （需要做这项工作。）

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

Getting the correct render order for transparency to work as intended is difficult. From the material component documentation page:

Transparency Issues

Transparency and alpha channels are tricky in 3D graphics. If you are having issues where transparent materials in the foreground do not composite correctly over materials in the background, the issues are probably due to underlying design of the OpenGL compositor (which WebGL is an API for).

In an ideal scenario, transparency in A-Frame would “just work”, regardless of where the developer places an entity in 3D space, or in which order they define the elements in markup. We can often run into scenarios where foreground entities occlude background entities. This creates confusion and unwanted visual defects.

To work around this issue, try changing the order of the entities in the HTML.

To resolve your case, simply place #sky1 after #sky2 in the HTML:

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>
    );
  }