Question

我有一个包含多个盒子的简单模型。我正在尝试使用缓冲区几何合并来减少绘图调用的数量。但是，合并后我无法更改几何的透明度/不透明度。

我已经尝试了以下操作：

我正在使用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>

谁能告诉我，我在做什么错？合并后如何处理不透明度？

提前谢谢！

Answer 1

如果要设置合并网格的不透明度，则可以使用材质组件在父实体上设置不透明度：

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

提琴here。

使用缓冲区几何图形合并后，无法更改几何图形的透明度/不透明度

1 个答案: