javascript - CSS 转换后更新 Three.js Raycaster

Question

我正在使用 Three.js 尝试 WebGL。我是初学者，我决定尝试类似于 this 的东西.我已经能够实现其中的大部分。我目前面临的问题是在向左移动 Canvas 后更新光线转换器和对象。每当我在 Canvas 移动后悬停时，它不会反射(reflect)在球体上，除非我将鼠标向东移动，离球体有一段距离。我查看了几篇文章，我尝试移动相机和球体位置但无济于事。

代码如下:

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) 请包含您的 fiddle 的完整代码。当(不是如果)你的 fiddle 消失时，你的问题的上下文和这个答案也会消失。

2) 您将鼠标事件附加到文档，而不是移动的部分。改用这个:

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

3) clientX/clientY不要表现得像你期望的那样。使用 offsetX/offsetY获取相对于 Canvas 的坐标(前提是您遵循了步骤 2)。 (不要担心 MDN 说它是实验性的，它在支持 WebGL 的浏览器中工作得很好。)

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