How can I add 2d text to three.js (already tried sprites, fontLoader, etc)?

Question

I'm to add 2d text as labels next to an object, as shown in the image. I've tried sprites (which, as far as I understand, don't work in newer versions of three.js), fontLoader, and a couple of rendering mechanisms--but I have not had any success, unfortunately.

I see that I can use CSS3D, but I'm not sure what to grab from the sample codes. If someone could point me in the right direction, I would appreciate it.

Image showing what I'm trying to achieve

If anyone has any advice, I would greatly appreciate it.

The following are some key parts of my code:

    <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
      <script src="https://unpkg.com/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://unpkg.com/three@0.132.2/examples/js/loaders/DRACOLoader.js"></script>
    <script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script>

 <canvas id="c"></canvas>


    window.addEventListener('load', init);

   function init() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    const canvasElement = document.querySelector('#c');
    const renderer = new THREE.WebGLRenderer({
        canvas: canvasElement,
    });
    renderer.setSize(width, height);

    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xf5e8c6 );




    loader.load('js/PricklyPearObject/scene.gltf', (gltf) => {
        const model = gltf.scene;

         model.scale.set( 0.1,0.1,0.1);
           model.position.set(-2, 0, 0);
        scene.add(model);
    });

I tried using sprites, fontloader, and an approach using render but could not get them to work.

Answer 1

I'll show you a quick and easy way to achieve this when no experience with coding. You can use "Model Viewer". Go to: https://modelviewer.dev/ Click their Editor shown in the pic ->>

Then, drag your glTF or GLB model to the scene. Then click "Edit" button, then "Add Hotspot" button. Add the text as a label. See the pic below:

Then you can setup the camera (initial position etc.), improve the lights and shadow, or add styles and customize the material. When you are happy with your model, copy the "snippet code" to add it to your HTML (without forgetting to add the scripts), or "download the scene" as a Three.js project and check the code and run it with simply "Go Live" button in VS Code.

Hope it helps.