Need help to fix div element on GLB

Questions
1

Hello guys, I am adding hotspot by clicking on GLB model using raycasting but when I click on the top and left starts from where I clicked not from whole window length I am stuck here and don’t where is the problem below is a piece of code I am using -

let dot, mouse_position,dot_count, textField, delText, delDiv;
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;
        console.log('mouse', mouse);
        let [mouseX, mouseY] = d3.pointer(event);
        mouse_position = [mouseX, mouseY];
        mouse_position[0] = mouse_position[0] + 15;
        mouse_position[1] = mouse_position[1] - 15;
        console.log('Rabbb', mouse_position);
        const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
        const raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(hotspots, false);
        if (intersects.length > 0) {
            dot_count = $(".dot").length;
            let text_count = $(".textField").length;
            const top_offset = $(this).offset().top - $(window).scrollTop();
            const left_offset = $(this).offset().left - $(window).scrollLeft();
            const top_px = Math.round((event.clientY - top_offset - 12));
            const left_px = Math.round((event.clientX - left_offset - 12));
            const top_perc = top_px / $(this).height() * 100;
            const left_perc = left_px / $(this).width() * 100;
            dot = '<div class="dot" id="div_' + dot_count + '" style="top: ' + top_perc + '%; left: ' + left_perc + '%;">' + (dot_count + 1) + '</div>';
            //textField = '<textarea class="textField" id="textField_' + text_count + '" style="top: ' + mouse_position[1] + 'px; left: ' + mouse_position[0] + 'px;"></textarea>';

            $(dot).hide().appendTo($(this).parent()).fadeIn(350);
        }
    });
}







const tempV = new THREE.Vector3();
const cameraToPoint = new THREE.Vector3();
const cameraPosition = new THREE.Vector3();
const normalMatrix = new THREE.Matrix3();


function updatePos() {
    
    root.updateWorldMatrix(true, false);
    root.getWorldPosition(tempV);

    tempV.project(camera);

    const x = (tempV.x * .5 + .5) * canvas.clientWidth;
    const y = (tempV.y * -.5 + .5) * canvas.clientHeight;
    // console.log(x);
    // console.log(y);
    
    
   $('#div_'+dot_count).css('transform',`translate(-50%, -50%) translate(${x}px,${y}px)`);
   
}

and in render function I am calling updatePos() function