Issue is raycasting position

Questions
1

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,

2
21918×1148 59.3 KB

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

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


        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);
        console.log(intersects);
        if (intersects.length > 0) {
            console.log("Intersected object:", intersects.length);
            const numDiv = document.createElement('div');
                let dot_count = $(".t").length;    
                numDiv.className = 't';
                numDiv.id = `t_${dot_count}`;
                numDiv.innerHTML = "Hello";
                numDiv.style.marginTop = '-1em';
                const Label = new CSS2DObject(numDiv);
                Label.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
                scene.add(Label);

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

2

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);