Hi, I’m learning Three.js and have built a very basic scene with a 4x4 cubes arranged into a grid like layout (much like the example here: https://threejs.org/examples/?q=instancing#webgl_instancing_raycast, except it’s cubes --BoxBufferGeometry + MeshPhongMaterial with transparency enabled and opacity set to 0.5).
Am trying to set the opacity of the objects farthest from the camera as fully opaque and the objects closest to camera are most transparent. So, the opacity of cubes increases with the farther they’re from the camera. Achieving this doesn’t seem possible anymore after Three.js removed alpha support for THREE.Color class and the alpha component of the hex is now ignored (https://github.com/mrdoob/three.js/commit/dc6e335dc9f7f38f1c79a5a6c112019d6fcce69d). There are a few (very outdated) discussions on this topic about adjusting opacity individually for lines/points (https://github.com/mrdoob/three.js/commit/dc6e335dc9f7f38f1c79a5a6c112019d6fcce69d) but that doesn’t seem to work on an InstancedMesh where opacity is set to the material entirely and not on individual matrices of the instance.
I found this thread on SO (https://stackoverflow.com/questions/12337660/three-js-adjusting-opacity-of-individual-particles) with a similar requirement but unfortunately the example uses a ParticleSystem to show a point cloud with varying alpha component. sadly, that was the closest I got to figuring it out how to do it and am still stuck.
Is there a way to have varying alpha values for each cube inside an InstancedMesh (with objects made from BoxBufferGeometry and MeshPhongMaterial)?