Another approach is to mimic the DOM API by exposing your WebGL elements via a custom API. For example, if we want to query a DOM element by its ID, we would do so via document.getElementById('element-id'). We could do the same with jQuery's simpler API via $('#element-id').
jQuery is a JavaScript library designed to simplify many of the common client-side scripting operations that are available. It is a free, open source software that uses the permissive MIT License. For more information, please visit https://jquery.com.
To see an implementation of this approach, please refer to Three Musketeers (https://github.com/webgl/three-musketeer), an open source library, which can be included in any Three.js application with a single line of code. By including three-musketeers, we can run a variety of queries on elements in our scene, similar to DOM elements in a web page. Here are some sample queries for further illustration:
$$$.debug();
$$$ is an alias for a three-musketeers instance. The debug method enables visual debugging mode:
$$$
.find('Cube_1')
.exists();
// returns true
The find method searches the scene for an item with the ID of Cube_1. By calling exists, it returns a Boolean on whether it exists:
$$$
.findAll((node) => node.geometry.type === 'BoxGeometry');
Similar to find, findAll returns an array of items. In this case, instead of searching for a unique ID, we're looking for all of the geometries that match the BoxGeometry type:
$$$
.find('Cube_1')
.click();
We find the geometry with the unique ID, Cube_1, and trigger a mouse click event on the appropriate coordinates:
window.addEventListener('click', (event) => {
const intersectedItems = $$$.pickFromEvent(event);
console.log(intersectedItems);
});
This is a simple technique that's very helpful for debugging. Every time we click in our web page, we log all intersected geometries, given the mouse click's 2D coordinates mapped onto our 3D scene.
For more information, be sure to check out three-musketeers on GitHub (https://github.com/webgl/three-musketeers) or its documentation (https://webgl.github.io/three-musketeers).