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

Questions
,
1

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!

2

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

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

OMG! I might have overlooked this! Thank You!

1 Like