Update Three.js Raycaster After CSS Tranformation

Question

I am trying my hands on WebGL using Three.js. I am a beginner and I decided to try out something similar to this. I have been able to achieve most of it. The issue I am currently facing is updating the raycaster and object after moving the canvas left. Whenever I hover after the canvas has been moved, it doesn't reflect on the sphere except I move the mouse eastwards, some distance away from the sphere. I have checked out several posts, I tried moving the camera and sphere position to no avail.

Here's the code:

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() {
  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
  });
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  renderer.setClearColor(0x000000);
  
  scene = new THREE.Scene();
  
  camera = new THREE.PerspectiveCamera(
    100, SCREEN_WIDTH / SCREEN_HEIGHT, .1, 10000);
  camera.position.set(0, 0, 10);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  
  var geometry = new THREE.SphereGeometry(5, 32, 32);
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  sphere = new THREE.Mesh(geometry, material);
  objects.push(sphere)
  scene.add(sphere);
  
  raycaster = new THREE.Raycaster();
  mouse = new THREE.Vector2();
  
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('mousemove', onHover, false);
  document.addEventListener('click', onClick, false);
  window.addEventListener('resize', render, false);
  
  scene.add(new THREE.AmbientLight(0x333333));
  var light = new THREE.DirectionalLight(0xffffff, 0.8);
  light.position.set(50, 3, 5);
  scene.add(light);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}
function onDocumentMouseMove(event) {
  event.preventDefault();
  mouse.x = (event.clientX  / SCREEN_WIDTH) * 2 - 1;
  mouse.y = - (event.clientY / SCREEN_HEIGHT) * 2 + 1;
}

function onClick() {
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(objects);
  console.log("I was click: ", intersects)
}

function onHover() {
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(objects);
  
  if (intersects.length > 0) {
    if (INTERSECTED != intersects[0].object) {
      if (INTERSECTED) INTERSECTED.remove(INTERSECTED.sphere);
      INTERSECTED = intersects[0].object//.geometry;
      
      var geometry = new THREE.SphereGeometry(5.1, 32, 32);
      var material = new THREE.MeshBasicMaterial({
        color: 0xff5521,
        opacity: 0.01
      });
      sphere1 = new THREE.Mesh(geometry, material);
      INTERSECTED.sphere = sphere1
      INTERSECTED.add(sphere1);
    }
  } else {
    if (INTERSECTED) INTERSECTED.remove(INTERSECTED.sphere);
    INTERSECTED = null;
  }
}

function render() {
  sphere.rotation.x += 0.01
  camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();
  renderer.render(scene, camera);
};

body {
			height: 100%;
			padding: 0;
			margin: 0;
		}

		#scene {
			position: relative;
			height: 100%;
			-webkit-transition: transform .7s ease-in-out;
			-moz-transition: transform .7s ease-in-out;
			-ms-transition: transform .7s ease-in-out;
			-o-transition: transform .7s ease-in-out;
			transition: transform .7s ease-in-out;
		}

		.bar {
			display: block;
			height: 3px;
			width: 30px;
			background-color: #00ff00;
			margin: 5px auto;
			-webkit-transition: all .7s ease;
			-moz-transition: all .7s ease;
			-ms-transition: all .7s ease;
			-o-transition: all .7s ease;
			transition: all .7s ease;
		}

		.hamburger {
			position: fixed;
			right: 40px;
			top: 20px;
			z-index: 3;
			-webkit-transition: all .7s ease;
			-moz-transition: all .7s ease;
			-ms-transition: all .7s ease;
			-o-transition: all .7s ease;
			transition: all .7s ease;
		}

		.hamburger.active .top {
			-webkit-transform: translateY(7px) rotateZ(45deg);
			-moz-transform: translateY(7px) rotateZ(45deg);
			-ms-transform: translateY(7px) rotateZ(45deg);
			-o-transform: translateY(7px) rotateZ(45deg);
			transform: translateY(7px) rotateZ(45deg);
		}

		.hamburger.active .bottom {
			-webkit-transform: translateY(-10px) rotateZ(-45deg);
			-moz-transform: translateY(-10px) rotateZ(-45deg);
			-ms-transform: translateY(-10px) rotateZ(-45deg);
			-o-transform: translateY(-10px) rotateZ(-45deg);
			transform: translateY(-10px) rotateZ(-45deg);
		}

		.hamburger.active .middle {
			width: 0;
		}

		.slide-left {
			-webkit-transform: translateX(-250px);
			-moz-transform: translateX(-250px);
			-ms-transform: translateX(-250px);
			-o-transform: translateX(-250px);
			transform: translateX(-250px);
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
<canvas id="scene"></canvas>
<div class="hamburger">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

Answer 1

1）请附上您提琴的完整代码。当（不是如果）您的小提琴消失时，您的问题和此答案的上下文也会消失。

2）您将鼠标事件附加到文档，而不是移动的零件。使用此代替：

canvas.addEventListener('mousemove', onDocumentMouseMove, false);
canvas.addEventListener('mousemove', onHover, false);

3） clientX / clientY不要表现您对他们的期望。使用offsetX/ offsetY获取相对于画布的坐标（前提是您遵循了步骤2）。（不必担心MDN表示它是实验性的，它在支持WebGL的浏览器中可以正常工作。）

mouse.x = (event.offsetX / SCREEN_WIDTH) * 2 - 1;
mouse.y = - (event.offsetY / SCREEN_HEIGHT) * 2 + 1;