I'm in the process of creating an interactive web application. Recently, I successfully imported a glb file into my scene. Now, I'm looking to incorporate two key functionalities:
onMouseover: When hovering over one of the elements within the object, I aim to change the color of that specific element.- The 3D object comprises a Texture_Group[Object3D], detailed in the console log below. The Texture_Group is essentially a collection of 3D letters(objects) spelling out "HAJDUK". However, these letters are imported as a grouped .glb file. I intend to implement an event listener so that clicking on each individual letter(object) will load a different link corresponding to that particular object.
I'm a bit confused about whether I can achieve this using only a raycaster or if I need to delve deeper into traversing the Texture_Group and creating a conditional logic structure for this purpose. If anyone has insights on how to go about this, particularly with the raycaster and scene traversal, I would greatly appreciate the guidance. This is my first time posing a question, so if additional information is required, please do let me know.
I've utilized some online code to traverse my scene in the console.log and customized it to suit my project needs.
Here is an excerpt from my app.js code:
/*jshint esversion: 6 */
let scene, camera, renderer, h, controls, raycaster, mouse;
function init() {
// Initialization of various components including camera, renderer, lights, controls, and loader
}
init();
//Render Loop
render();
function render() {
// Request animation frame logic
}
//windowResize
function windowResize() {
//Adjust camera aspect ratio and renderer size
}
window.addEventListener('resize', windowResize, false);
//Console log traverse for scene objects
function dumpVec3(v3, precision = 3) {
// Function to format vector objects
}
function dumpObject(obj, lines = [], isLast = true, prefix = '') {
// Recursive function for logging information about scene objects
}
console.log:
Excerpt from the console.log detailing object hierarchy and properties