Framework used: React 3D Image: glb/gltf format Rendered using: three.js packages Mission: To insert a number to each of the object and display it above them

Enfoque: he intentado obtener el elemento del lienzo y luego agregar un texto usando

 var parentofCanvas = document.getElementById("untitled.glb"); var childCanvas = parentofCanvas.firstChild; var context = childCanvas.getContext("webgl"); console.log(childCanvas); console.log(parentofCanvas.firstChild.nodeName); console.log(context); // var text = "Howdy World!"; // context.font = "25px Arial"; // context.fillStyle = "red"; // var x = 50; // var y = 100; // context.fillText(text, x, y); }, []);

donde x e y son las coordenadas. Recibo un error que dice que fillText no es una función. ¿Así que ... qué me perdí? ¿Hay alguna otra forma de insertar/renderizar elementos html en una imagen de lienzo 3D?

Enlace a codesandbox: https://codesandbox.io/s/dreamy-lichterman-lbb4z?file=/src/Test.js

(FYI: Este es un proyecto bifurcado de dreamy-lichterman)