I am new to diving into the world of WebGL with Three.js. As a beginner, I wanted to experiment with something similar to this. I've managed to get most of it working, but I'm currently struggling with updating the raycaster and object after shifting the canvas to the left. When I hover over the sphere after moving the canvas, the interaction doesn't reflect on the sphere unless I move the mouse further eastward, away from the sphere. I've explored various resources, attempted to adjust the camera and sphere positions, but haven't had any luck.
Here's the code snippet:
let scene, camera, renderer;
var raycaster, mouse, INTERSECTED;
let SCREEN_WIDTH = window.innerWidth
let SCREEN_HEIGHT = window.innerHeight
let canvas = document.getElementById('scene')
let objects = []
init();
animate();
$(".hamburger").on("click", function () {
$(".hamburger").toggleClass("active");
$("#scene").toggleClass("slide-left");;
});
function init() {
// Initialization code here
}
// Additional functions go here