Hello guys, I am working on adding hotspots while user click on GLB model, my code works well on pixel value if I gave of top and left attribute of Div element and Textarea element, but it creates one problem when I am rotating or panning my model this approach fails because I didn’t added into three js scene. Next approach use CSS2DObject and adding to my scene but with this I don’t know how to pass pixels values because three js units are working in meters. Can someone guide me below is the code I have written…
let newDiv, newText;
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) {
console.log('hhhhhhh',intersects);
let 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>';
newDiv = document.createElement('div');
newDiv.className = "dot";
newDiv.id = `div_${dot_count}`;
newDiv.innerHTML = `${dot_count+1}`
//document.body.append(newDiv);
const a = new CSS2DObject(newDiv);
a.position.set(mouse.x,mouse.y,0);
scene.add(a);
newText = document.createElement('textarea');
newText.className = "textField";
newText.id = `textField_${text_count}`;
newText.style.top = `${mouse.x}%`;
newText.style.left = `${mouse.y}%`;
const b = new CSS2DObject(newText);
//b.position.set(0,0,0);
scene.add(b);
updateScreenPosition();
}
});
}