Cannot access children of Object3D/Group [Solved]

object3d
#1

Hi! INew guy here. I love Three JS!

Context: I needed to get dynamic text into my 3D Objects (Object3D’s). So I had to push the text into my objects at run time. So, I did something bad and I used the ‘fontLoader’ to create a dynamic text injector. At least, it feels kind of bad, but it works … sort of. What happens is that the text --(textGeometries/meshes) – are created in the object/group (tried both) but I cannot access them. I can see the text objects as children of the parent object (if I console the array) but I cannot access them as in [object.child traversal].

Code:

var loader = new THREE.SVGLoader();
var loadIcon = function(url, target, color, pos, rot, nScale, nName) {

  loader.load(url,
  function ( data ) {
      
      var paths = data.paths, iNumber;
      var group = new THREE.Object3D();

            group.name = nName || "";

            for ( var i = 0; i < paths.length; i ++ ) {
                    var path = paths[ i ];
                    var material = new THREE.MeshBasicMaterial({ 
                          color: 0xffffff, 
                          });

                     var shapes = path.toShapes( true );
                           for ( var j = 0; j < shapes.length;  j ++ ) {
                                  var shape = shapes[ j ];
                                  var geometry = new THREE.ShapeBufferGeometry( shape );
                                  var mesh = new THREE.Mesh( geometry, material );
                                        group.add( mesh ); 
                                        mesh.position.set( pos.x, pos.y, 20 );
                                        if( nScale ){
                                            mesh.scale.set( nScale.x, nScale.y, nScale.z );
                                        }
                           }
            }

            target.add( group );
},
function ( xhr ) {
   console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
  console.log( 'An error happened' );
});
}

I call this to launch the icons into my objects:

   loadIcon('svg-icons/SVG/sphere.svg', target, 0xffffff, iconPos, iconRot, iconScale, "name");

And I have another one of these I use for text:

  loadFont('fonts/helvetiker_regular.typeface.json', dynamicText[ i ], 12, target, 0xffffff, titlePos, titleRot, "text");

Again, it works, my text and icons show up exactly where they are supposed to. I have control over every aspect of their properties. Except when I go to access them as children of the parent container they are placed in. I can only access the top 2 children that were placed in the object using a standard “target.add(mesh)”. However, the meshes that were added using these dynamic text functions arent accessible. I can see them in the DOM as children of the object. They even have names.

I am trying to access them so that I can addEventListeners to them.

My scene is large, proprietary, and fairly complex. Posing a working example will take some effort. It has a working 3D globe as well as a bunch of rotating 3D objects around that. If this seems like its not an easy question and requires an example then I can create one but I’m hoping that its easy though.

So, obv, I know that injecting 3Dtext directly into your main animation sequence isnt ideal, and I would love to load these peaces of text/icons up front, but they must be read from an array at creation time so I’m not sure that’s possible.

I have tried accessing the objects a few different ways so far. I tried object traversal with both “instanceOf Object3D” and “instanceOf Mesh”, “isMesh” etc. These methods only get the top 2 children although there [7] total.

That shows the children as both the Object3D and also tried the Mesh version. As you can see there are [7] in the array but "children[2 - 6] " are not accessible. I can access only “children[0]” and “children[1]”. This is regardless of accessing them as Object3D or Mesh. Regardless of adding them to the target as Group() or Object3D();

Here is another that shows the actual child array with [7] children but only getting a count of [2].

I’m confused. Any Help?

It is those round icons on the right of the windows. They are obviously there but I cannot programmatically access them in the child array as objects. I can only see them.

#2

FIXED: I went ahead and loaded the fonts upfront with the “manager”. After using loading the right way I can now access my child objects with a slightly different textInjector. I see now that what I did was a good idea but implemented poorly.