Here's the issue:
I'm trying to place a sphere on a 3D model when I click on it using ThreeJs raycaster. It works fine when the canvas covers the entire page, but if I add a header bar to the page, the positioning is off. Here are some visual examples:
Without the header bar, the sphere appears directly under the mouse pointer without any issues: a Ok
Now with the header bar; unfortunately, the sphere is positioned lower than the mouse pointer: a Ko
The problem also occurs when scrolling down the page, even without the header bar.
Below is the JavaScript code snippet for adding the sphere and handling event listeners:
function addSphere(coords, color) {
sphere = new T.Mesh(sphereGeometry, sphereMaterial)
sphere.position.set(coords.x, coords.y, coords.z)
sphere.name = 'Sphere'
scene.add(sphere)
}
function listeners() {
document.addEventListener('resize', function() {
var width = window.innerWidth
var height = window.innerHeight
camera.aspect = width / height
camera.updateProjectionMatrix()
renderer.setSize(width, height)
}, false)
container.addEventListener('click', function(e) {
// Event handling logic here...
}, false)
}
And here is the relevant part of index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Page metadata and stylesheets -->
</head>
<body>
<div id="header-bar" style="left: 0; right: 0; top: 0; height: 44px; line-height: 44px; text-align: center; font-size: 1.4em">Header bar</div>
<div id="container"></div>
<div id="buttons">
<!-- Button elements -->
</div>
<!-- Three.js library imports and custom scripts -->
</body>
</html>
If you have an idea about what could be causing this issue, I would greatly appreciate your help. Thank you in advance!