threejs manipulate particlesystem

Question

I have a problem to detect if my mouse is over a particle to push it away from the mouse with a particlesystem in threejs

I use a raycaster but nothing hits.

I also try to add a hitbox to the particle but the hitbox doesn't follow the particle.

    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;


//controle
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);
}        

a fiddle of my code

Answer 1

For your hitbox to function, make sure that you add it to the particle with particle.add(particle.hitbox). In that case, the hitbox position is fine as (0, 0, 0) because it will be added to the exact location of its parent object. When the hitbox is a child of the parent particle, it can also be referenced as such with particle.children.

Otherwise, as opposed to using a raycaster, you might try checking to see whether any particles fall within a certain range of the cursor's 2D position, and iterate through those within the bounds to push away. When needing to interact with multiple particles at once, that might be the easier option. Hope that helps!