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

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.