[SOLVED]rasyCasters not working as intended, it won't show the object while hovering the mouse over it

Hello There! First of all I’m quite new to Three.js and overall 3D Objects. The thing is that I want to learn Three.js and I thing I have gotten the basics, although there’s a problem with the current code. I have setup a RayCaster object and it won’t print the objects when my mouse is in the plane. When I reload and keep the mouse there, the array would show to have 5 Objects while when I hover the mouse in the plane the objects will disappear and the array won’t be populated anymore.

This is what prints when I reload:

Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]
​
0: Object { distance: 42.86250627814996, point: {…}, faceIndex: 5, … }
​
1: Object { distance: 42.86250627814996, point: {…}, faceIndex: 8, … }
​
2: Object { distance: 43.58898943540672, point: {…}, index: 0, … }
​
3: Object { distance: 43.588989435406724, point: {…}, index: 22, … }
​
4: Object { distance: 43.588989435406724, point: {…}, index: 2, … }
​
5: Object { distance: 43.588989435406724, point: {…}, index: 4, … }
​
6: Object { distance: 43.58898943540673, point: {…}, index: 20, … }
​
7: Object { distance: 43.58898943540674, point: {…}, index: 0, … }
​
8: Object { distance: 43.58898943540674, point: {…}, index: 0, … }
​
9: Object { distance: 43.58898943540674, point: {…}, index: 0, … }
​
length: 10

When I hover the mouse on the plane (or the object):

Array []
​
length: 0
​
<prototype>: Array []

My Code:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const boxGeometry = new THREE.BoxGeometry();
const theeBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
const theeBox = new THREE.Mesh(boxGeometry, theeBoxMaterial);
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45, // FoV a.k.a. Field of View
    window.innerWidth / window.innerHeight, // aspect
    0.1, // near clipping plane
    1000 // far clipping plane
);


// only for debugging, just print what object does the mouse intersects
const rayCasters = new THREE.Raycaster();
const mousePos = new THREE.Vector2();
window.addEventListener('mousemove', function(msp){
    mousePos.x = (msp.clientX / this.window.innerWidth) * 2 - 1;
    mousePos.y = (msp.clientY / this.window.innerHeight) * 2 + 1;
});

scene.add(axesHelper);
scene.add(theeBox);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(-10, 30, 30);


function animateTheeBox() {
    orbit.update();
    // only for debugging, just print what object does the mouse intersects
    rayCasters.setFromCamera(mousePos, camera);
    const intersect = rayCasters.intersectObjects(scene.children);
    console.log(intersect);
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animateTheeBox);

This is the minimal reproducing code. Thank You in Advance!

You need to invert the mouse Y. Try with the following line:

mousePos.y = -(msp.clientY / this.window.innerHeight) * 2 + 1;
1 Like

OMG! I might have overlooked this! Thank You!

1 Like