Issue is raycasting position

I am facing this issue when I click on GLB, text position goes very far from where I click, I need where I click text comes to that position, I don’t know where is the issue,

cn.clientWidth is canvas width and cn.clientHeight is canvas height

$("#canvasModel").one('click', function (event) {

        var mouseVector = new THREE.Vector2(
            (event.offsetX / cn.clientWidth) * 2 - 1,
            -(event.offsetY / cn.clientHeight) * 2 + 1);
            console.log('MOUSEVECTOR ===== ',mouseVector);
        var raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(mouseVector, camera)
        var intersects = raycaster.intersectObjects(hotspots, true);
        if (intersects.length > 0) {
            console.log("Intersected object:", intersects.length);
            const numDiv = document.createElement('div');
                let dot_count = $(".t").length;    
                numDiv.className = 't';
       = `t_${dot_count}`;
                numDiv.innerHTML = "Hello";
       = '-1em';
                const Label = new CSS2DObject(numDiv);
                Label.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);

above is a code, someone guide me where I am doing wrong?. Thanks for your help

I don’t see the root cause for your issue in your code example. Do you mind demonstrating the issue with a live example?

In latest three.js versions the recursive parameter of intersectObjects() is true by default. So you can just write:

var intersects = raycaster.intersectObjects(hotspots);