I'm encountering an issue with my code that handles object "hovering". The problem arises when multiple objects overlap and can be hovered over simultaneously if the meshes intersect at the mouse point. Although I know that the intersections array is sorted to prioritize the closest element, I'm struggling to leverage this in my current code implementation. Any insights or suggestions would be greatly appreciated.
Check out a live demo along with the code snippet:
import * as THREE from 'three';
import { OrbitControls } from 'three-controls';
// ----------------------- SCENE
const scene = new THREE.Scene();
// ----------------------- CAMERA
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
10000
);
camera.position.set(0, 0, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xfff000);
document.body.appendChild(renderer.domElement);
renderer.setPixelRatio(window.devicePixelRatio);
// ----------------------- CONTROLS
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
// ----------------------- RAYCASTING
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
var raycastLayer = [];
let hovered = {};
let intersects = [];
window.addEventListener('pointermove', e => {
// Pointer movement logic
});
window.addEventListener('click', e => {
// Click event handling logic
});
// Additional code for lighting setup, glyph creation, rendering, and animation