Is there a property that allows objects behind a fog of multiple points to be clickable? I want to be able to click on objects even when they are obscured by the fog.
Below is the code I am using to create and animate the fog:
const loadFogEffect = () => {
const geometry = new THREE.Geometry();
const particleCount = 50;
const texture = new THREE.TextureLoader().load('fog.png');
let material = new THREE.PointsMaterial({
size: 5,
map: texture,
// blending: THREE.AdditiveBlending,
depthWrite: false,
transparent: true,
sizeAttenuation: true,
color: 'rgb(30,30,30)',
});
const range = 1;
for (let i = 0; i < particleCount; i++) {
const x = THREE.Math.randInt(-range, range);
const y = THREE.Math.randInt(-range, range);
const z = THREE.Math.randInt(-range, range);
const point = new THREE.Vector3(x, y, z);
point.velocityX = THREE.Math.randFloat(0.008, -0.035);
point.velocityY = THREE.Math.randFloat(0.008, -0.035);
point.velocityZ = THREE.Math.randFloat(0.008, -0.035);
geometry.vertices.push(point);
}
points = new THREE.Points(geometry, material);
points.layers.set(noReflectionLayer);
scene.add(points);
};
const animateFog = () => {
points.geometry.vertices.forEach((v) => {
v.y = v.y + v.velocityY;
v.z = v.z + v.velocityZ;
if (v.z >= 2 && v.y === 0) {
v.x = THREE.Math.randInt(0.001, -0.001);
v.y = THREE.Math.randInt(0.001, -0.001);
v.z = 2;
}
});
points.geometry.verticesNeedUpdate = true;
};
Your assistance is greatly appreciated!