是否有一种方法来插入html元素内的3D图像渲染使用Three.js?

Question

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 

方法:我试图获得画布元素，然后使用 添加文本

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);
}, []);

，其中x和y是坐标。我得到一个错误说fillText不是一个函数。那么，我错过了什么?有没有其他的方式来插入/渲染html元素在3D画布图像?

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

(仅供参考:这是dream -lichterman的一个分支项目)

Answer 1

@react-three/drei中有一个Html Component，可以用来在里面插入Html元素。下面是沙盒的链接，带有相同的示例和解释(注释):https://codesandbox.io/s/embed-html-3d-63uep?file=/src/Test.js

文档可在:https://github.com/pmndrs/drei#html