У меня есть простая модель, состоящая из нескольких коробок. Я пытаюсь использовать слияние геометрии буфера, чтобы уменьшить количество вызовов отрисовки. Однако я не могу изменить прозрачность / непрозрачность геометрии после слияния.
Я уже пробовал следующие вещи:
Я устанавливаю непрозрачность элемента, используя 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>
Может кто-нибудь сказать, пожалуйста, что я делаю не так? Как я могу управлять непрозрачностью после слияния?
Заранее спасибо!