在CSS Tranformation之後更新Three.js Raycaster

Question

我正在嘗試使用Three.js的WebGL。我是一名初學者，我決定試試類似this的東西。我已經能夠實現它的大部分。我目前面臨的問題是在將畫布左移之後更新raycaster和對象。只要我在畫布移動後懸停，除了將鼠標向東移動一段距離外，它不會反射到球體上。我已經檢查了幾個帖子，我試圖移動相機和球體的位置無濟於事。

下面的代碼：

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 { 
 
\t \t \t height: 100%; 
 
\t \t \t padding: 0; 
 
\t \t \t margin: 0; 
 
\t \t } 
 

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

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

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

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

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

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

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

<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;