Aframe

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 属性，因为纹理已经加载，我只能从预加载的纹理创建 material。我需要知道第一种方法有什么问题以及如何解决它。我还需要设置其他参数吗

也尝试使用 a-sphere 而不是 a-sky 但结果相同。

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

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

Answer 1

获得正确的渲染顺序以使透明度按预期工作很困难。来自 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.

要解决您的问题，只需将 #sky1 放在 HTML 中的 #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>
    );
  }

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

Aframe - Setting opacity to `a-sky` element does not work

webvr