Move the particle when the cursor is near to a particle

Questions
,
1 
   document.addEventListener('mousemove', (event) => {
      const mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, camera);

      raycaster.params.Mesh.threshold = 1
      const intersects = raycaster.intersectObjects(particles);
      
    
      if (intersects.length > 0) {

        const nearestParticle = intersects[0].object;
        console.log(nearestParticle);
        const force = new THREE.Vector3().copy(nearestParticle.position).sub(cursor).normalize().multiplyScalar(0.01);
        nearestParticle.position.add(force);
      }
    });
2 

function onMouseMove( event )
{
	mouse.x = 2*event.clientX/innerWidth - 1;
	mouse.y = -2*event.clientY/innerHeight + 1;
	
	raycaster.setFromCamera(mouse, camera);

	var intersects = raycaster.intersectObject( background );
	if( intersects.length > 0 )
	{
		var cursor = intersects[0].point;

		for( var particle of particles )
		{
			v.subVectors( particle.position, cursor );
			var dist = Math.max(v.lengthSq( ),0.01);
			if( dist < 3 )
			{
				particle.position.addScaledVector( v, Math.min(0.1/dist,1) );
				particle.position.z = 0;
			}
		}

		renderer.render( scene, camera );
	}
}
1 Like