I created the sphere with material and and tried make it clickable though raycasting which is not working.
camera, scene and lights and imported gltf are there working properly but this part of code has some issues.

//here I crated 3d object
const hotspot = new THREE.SphereGeometry(2,32,32);
const mat = new THREE.MeshBasicMaterial({color:0x00ff00});
const mesh = new THREE.Mesh(hotspot, mat);
mesh.position.set(-85,-10,0);
mesh.name= 'hotspot';
scene.add(mesh);
const raycaster = new THREE.Raycaster();
document.addEventListener('mousedown',onMousedown);
function onMousedown(event)
{
    const pointer = new THREE.Vector2(
        (event.clientX/renderer.domElement.clientWidth)*2-1,
        -((event.clientY/renderer.domElement.clientHeight)*2-1),
    );
    raycaster.setFromCamera(pointer,camera);
    const intersections = raycaster.intersectObject(mesh, true);
    if(intersections.length>0)
    {
        const selectedObject = intersections[0].object;
        const color = new THREE.Color(Math.random(), Math.random(), Math.random());
        selectedObject.material.color = color;
        console.log("object was clicked");
    }
}
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
//for intractive control
const controls = new OrbitControls(camera, renderer.domElement);

I tried many things from youtube and all it didn't work out. Its is not showing any error but also not working.