As a Unity developer venturing into learning Three.js, I've come across a seemingly simple yet frustrating issue.
My goal is to import and animate a 3D logo consisting of four separate meshes (elem1 to elem4) in my Three.js application. After exporting the logo as an FBX and converting it to GLTF using an online tool, I managed to import it successfully, resize it, and even change its material without any problems.
However, my challenge lies in referencing the entire object and its individual elements to animate them within my "animate" function (the main rendering loop). The only solution I found was creating a secondary "animate" function within the loader callback, which felt awkward. I couldn't figure out how to reference them in the main scope of my application.
Upon dumping my GLTF import, I obtained this hierarchy (referred to as "nodes"):
AuxScene [Scene]
*no-name* [Object3D]
elem1 [Mesh]
elem2 [Mesh]
elem3 [Mesh]
elem4 [Mesh]
Below is a stripped-down version of my code:
'use strict';
// Code omitted for brevity
renderer.render( scene, camera );
requestAnimationFrame( animate );
function animate( time ) {
/*
This is where I would like to access my logo (both as a whole and separately).
However, root.rotation or elem1.rotation cannot be accessed here, resulting in an error.
*/
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
// Object Dumping function omitted for brevity
Thank you for any assistance.