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!