I am struggling to determine if my mouse is hovering over a particle in order to move it away using a particlesystem in threejs.
Despite using a raycaster, I am not getting any hits.
I also attempted to attach a hitbox to the particle, but unfortunately, the hitbox does not follow the particle properly.
for (var p = 0; p < particleCount; p++) {
// create a particle with random
// position values, -250 -> 250
var pX = Math.random() * 200 - 200 / 2,
pY = Math.random() * 150-150/2,
pZ = -5,
particle = new THREE.Vector3(pX, pY, pZ);
// create a velocity vector
particle.velocity = new THREE.Vector3(
0, // x
Math.random()*maxVelocity, // y: random vel
0); // z
// add it to the geometry
// add hitbox on particle
var material = new THREE.MeshBasicMaterial({color : 0x45a314});
var circleGeometry = new THREE.CircleGeometry(maxDistance, 8);
particle.hitbox = new THREE.Mesh(circleGeometry,material);
particle.hitbox.position.set(pX,pY,pZ);
particles.vertices.push(particle);
}
The onMouseMove function:
function handleMouseMove(event) {
event.preventDefault();
mousePos.x = (event.clientX / window.innerWidth) * 2 - 1;
mousePos.y = -(event.clientY / window.innerHeight) * 2 + 1;
//control
mouse_vector.set(mousePos.x,mousePos.y,mousePos.z);
projector.unprojectVector(mouse_vector,camera);
var direction = mouse_vector.sub(camera.position).normalize();
ray.set(camera.position, direction);
}
The update function:
function update() {
var pCount = particleCount;
while(pCount--){
// get the particle
var particle = particles.vertices[pCount];
// check if we need to reset
if (particle.y > 80 ) {
particle.z = -4;
particle.x = Math.random() * 200 - 200 / 2;
particle.y = -75;
particle.velocity.y = Math.random()*maxVelocity;
// particle.velocity.x = Math.random()*0.4-0.2;
// particle.velocity.y = Math.random()*0.4-0.2;
}
intersects = ray.intersectObject(particle.hitbox);
if(intersects.length){
console.log("hit");
}
// and the position
particle.add(
particle.velocity);
}
// flag to the particle system
// that we've changed its vertices.
particleSystem.geometry.__dirtyVertices = true;
// draw
renderer.render(scene, camera);
// set up the next call
requestAnimationFrame(update);
}
Check out a fiddle of my code