How to stick label at that where user clicks?

Questions
1


In the above video If I am rotating the GLB model the label is also changing it’s position I want if user clicks on any position it will stick there don’t change it’s position while rotating and panning… below is my code

function hotspot() {
    $("canvas").one('click', function (event) {
        let mouse = new THREE.Vector2();
        mouse.x = (event.offsetX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.offsetY / window.innerHeight) * 2 + 1;
        let [mouseX, mouseY] = d3.pointer(event);
        mouse_position = [mouseX, mouseY];
        mouse_position[0] = mouse_position[0] + 15;
        mouse_position[1] = mouse_position[1] - 15;
        const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(hotspots, true);
        console.log(camera.position);

        const hit = intersects.find((hit) =>!hit.object.userData.shadow);
        hit.face.normal.applyNormalMatrix(
            new Matrix3().getNormalMatrix(hit.object.matrixWorld));

        console.log("hit",hit);
        
        if (intersects.length > 0) {
            
            
            let dot_count =  $(".dot").length;
            const numDiv = document.createElement('div');
            numDiv.className = 'dot';
            numDiv.id = `div_${dot_count}`;
            numDiv.textContent = `${dot_count + 1}`;
            numDiv.style.marginTop = '-1em';
            const Label = new CSS2DObject(numDiv);
            Label.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
            console.log(Label.position)
            
            scene.add(Label);
}
2

Works good in my example. Maybe anybody can help. Not me
image

1 Like