有沒有辦法在使用 Three.js 渲染的 3D 圖像中插入 html 元素？

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 不是函數。 那么，我錯過了什么？ 有沒有其他方法可以在 3D 畫布圖像中插入/渲染 html 元素？

鏈接到代碼和框： https ://codesandbox.io/s/dreamy-lichterman-lbb4z ? file =/ src/Test.js

（僅供參考：這是 Dreamy-lichterman 的分叉項目）

Answer 1

@react-three/drei 中有一個 Html 組件，可用於在其中插入 HTMl 元素。 以下是沙箱的鏈接，具有相同的示例和說明（評論）： https : //codesandbox.io/s/embed-html-3d-63uep?file=/src/Test.js

可以在以下位置找到文檔： https : //github.com/pmndrs/drei#html