3D Sprites as a child to GLB Models

Questions
,
1

I would like to add a sprite object as a child using (add or attach method) to .glb models.
When I try doing this using add method and setting position of sprite as local to parent(GLB), it does not get add to exact position.
Similarly when I am using .attach() method, and setting position of sprite as world co-ordinates, it does not get attach to exact position.

Where I am going wrong?

function AddArrow(posObject, arrowName ,parentModelName) {

  var path = baseUrl+"scene1.glb"+token;

    const loader = new GLTFLoader();

    const onLoad = (gltf, position) => {

      const model = gltf.scene;

      var currentModel = scene.getObjectByName(parentModelName);  

      model.scale.set(1, 1, 1);

      model.name = arrowName + parentModelName;

      model.position.copy(position);

      // scene.add(model);

      if(posObject.annot){

        var spritey = makeTextSprite(posObject.annot, { fontsize: 24, borderColor: { r: 0, g: 0, b: 255, a: 1.0 }, backgroundColor: { r: 255, g: 255, b: 255, a: 1.0 } });

        spritey.name = "annot" + arrowName + parentModelName;

        var intersectedWorld = currentModel.localToWorld(position);

        console.log(intersectedWorld);

        spritey.position.set(intersectedWorld.x, intersectedWorld.y, intersectedWorld.z);

        scene.add(spritey);

        currentModel.attach(spritey);

      }

      

      currentModel.add(model);       //use .attach() for maintaining world transform of child object(model).

      arrowCounter+=1;

    };

    // the loader will report the loading progress to this function

    const onProgress = (xhr) => {

      $("#model_load_bar_container").show();

      var current = xhr.loaded / xhr.total * 100;

      current += "%";

      $("#model_load_bar").css("width", current);

      console.log((xhr.loaded / xhr.total * 100) + '% loaded');

      if (xhr.loaded == xhr.total) {

        $("#model_load_bar").css("width", "0%");

        $("#model_load_bar_container").hide();

      }

    };

    // the loader will send any error messages to this function, and we'll log them to to console

    const onError = (errorMessage) => { console.log(errorMessage); };

    // load the first model. Each model is loaded asynchronously,

    const position = new THREE.Vector3(posObject.px, posObject.py, posObject.pz);

    loader.load(path, gltf => onLoad(gltf, position), onProgress, onError);

  }
2

What do you mean with “exact position”? Notice that the position of a 3D object does not necessarily represent its center point. This circumstance might cause the confusion in your case.

3

I have a glb model and I want to add sprite 3D text at specific position on that model.
Its like when I click anywhere on 3D model, at the intersected positions I want to add sprites.
The intersected Positions are local to parent model.

When I set those intersected points as the positions of sprites, it does not gets added at that position