1

複数のボックスで構成される単純なモデルがあります。バッファ ジオメトリのマージを使用して、ドロー コールの数を削減しようとしています。ただし、マージ後にジオメトリの透明度/不透明度を変更することはできません。

私はすでに次のことを試しました：

を使用して要素の不透明度を設定していますelement.setAtribute('material', { opacity: 0.6 });

ただし、正しい変更が行われているとは思いません。

を作成し、geometry.addAttribute('opacity',THREE.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 1)すべての要素を に設定する不透明度を設定しようとしました0.6。

しかし、これもうまくいきませんでした。

ここで見つけることができる最小限の例を作成しました: https://glitch.com/~ambitious-chill

透明度を設定する関数:

function setTransparency(object, value) {
    var mesh;
    var geometry;
    var opacity;
    mesh = object.object3DMap.mesh;
    if (!mesh || !mesh.geometry) {
        el.addEventListener('object3dset', function reUpdate(evt) {
            if (evt.detail.type !== 'mesh') {
                return;
            }
            el.removeEventListener('object3dset', reUpdate);
            self.update(oldData);
        });
        return;
    }
    geometry = mesh.geometry;

    // Empty geometry.
    if (!geometry.attributes.position) {
        console.warn('Geometry has no vertices', el);
        return;
    }
    if (!geometry.attributes.opacity) {
        geometry.addAttribute('opacity',
            new THREE.BufferAttribute(
                new Float32Array(geometry.attributes.position.array.length), 1
            )
        );
    }
    opacity = geometry.attributes.opacity.array;

    for (i = 0; i < opacity.length; i += 1) {
        opacity[i] = 1 - value;
    }
    geometry.attributes.opacity.needsUpdate = true;
}
<!DOCTYPE html>
<html>
  <head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> 
    <script src="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script> 
  </head>
 
  <body>
    <a-scene stats>
    <a-entity buffer-geometry-merger material="vertexColors: vertex">
      <a-entity geometry="primitive:box; skipCache:true; buffer:true; width:32.0;  height:1.0;  depth:40.0"
                position="19.0 1.5 23.0"
                shader="flat"
                flat-shading="true">
      </a-entity>
      <a-entity geometry="primitive:box; skipCache:true; buffer:true; width:7.0;  height:11.0;  depth:7.0"
                position="28.5 7.5 9.5"
                shader="flat"
                flat-shading="true">
      </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

誰が私に教えてもらえますか、私は何が間違っていますか? マージ後に不透明度を操作するにはどうすればよいですか?

前もって感謝します！

4

1 に答える 1

1

マージされたメッシュの不透明度を設定する場合は、マテリアル コンポーネントを使用して親エンティティに不透明度を設定できます。

<a-entity buffer-geometry-merger material="opacity: 0.5; transparent: true">
  <a-box></a-box>
  <a-cylinder></a-cylinder>
</a-entity>

ここでフィドル。

于 2019-07-10T16:33:50.597 に答える