mouseposition interaction with THREE.Point - three.js

Question

I am learning Three.js and trying to reproduce some cool effects as a training method.
I have a Obj file globe which I want to add some particles interaction to.
my work so far : https://codepen.io/Imsenji/pen/QWOBMWN?editors=0010
What I'm trying to do: https://dala.craftedbygc.com/ ( or similar)
this is my code :
// OBJ model
const obj = new OBJLoader();
obj.load("https://res.cloudinary.com/dltqzyazm/raw/upload/v1648118569/2dgame/globe2_gl4laq.obj", function (object) {
let material = new THREE.PointsMaterial({
color: colour,
size: 0.035,
// map: cross,
});
let mesh = new THREE.Points(object.children[0].geometry, material);
mesh.scale.multiplyScalar(0.025);
mesh.rotation.y = 2 * Math.PI * 0.7;
mesh.position.x = objectsDistance * 0.5;
mesh.position.y = -objectsDistance * 0.1;
scene.add(mesh);
});
//----------------------
* Particles
*/
// Geometry
const particlesCount = 1000;
const positions = new Float32Array(particlesCount * 3);
for (let i = 0; i < particlesCount; i++) {
positions[i * 3 + 0] = (Math.random() - 0.5) * 10;
positions[i * 3 + 1] =
objectsDistance * 0.5 -
Math.random() * objectsDistance * sectionMeshes.length;
positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
}
const particlesGeometry = new THREE.BufferGeometry();
particlesGeometry.setAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
// Material
const particlesMaterial = new THREE.PointsMaterial({
color: "#c0a43c",
sizeAttenuation: true,
size: 0.2,
transparent: true,
map: cross,
});
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);
// // Interaction
var uniforms = {
mouse: {
value: new THREE.Vector3(),
},
radius: {
value: 3.5,
},
};
material.onBeforeCompile = (shader) => {
shader.uniforms.mouse = uniforms.mouse;
shader.uniforms.radius = uniforms.radius;
// console.log(shader.vertexShader);
shader.vertexShader =
`
uniform vec3 mouse;
uniform float radius;
` + shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
vec3 dir = transformed - mouse;
float dist = length(dir);
if (dist < radius){
float ratio = 1. - dist / radius;
vec3 shift = dir * 2. * (ratio * ratio);
transformed += shift;
}
`
);
};
var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
window.addEventListener("mousemove", (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, uniforms.mouse.value);
});
it seems like raycaster.ray.intersectPlane(plane, uniforms.mouse.value); not working. that's my question.
any help/advice would be appreciated.