I've been working on a model with multiple boxes and trying to optimize draw calls by using buffer geometry merger. However, I'm facing an issue where I can't change the opacity of geometries after merging.
Here are the things I've tried so far:
I attempted setting the opacity of the element using
element.setAttribute('material', {opacity: 0.6});But unfortunately, I didn't see the expected change.
I also experimented with setting the opacity by creating a
geometry.addAttribute('opacity', new THREE.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 1)0.6.
However, this approach didn't yield the desired results either.
I've set up a small example that you can check out here:
The transparency-setting function is as follows:
function setTransparency(object, value) {
var mesh;
var geometry;
var opacity;
mesh = object.object3DMap.mesh;
if (!mesh || !mesh.geometry) {
// Event listener for updating when object is set
el.addEventListener('object3dset', function reUpdate(evt) {
if (evt.detail.type !== 'mesh') {
return;
}
el.removeEventListener('object3dset', reUpdate);
self.update(oldData);
});
return;
}
geometry = mesh.geometry;
// Check 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;
}
If anyone could guide me on what might be causing the issue or how to manipulate the opacity post-merging, I would greatly appreciate it!
Thanks in advance!