有没有办法在使用 Three.js 渲染的 3D 图像中插入 html 元素？

Posted 2023-03-16

【中文标题】有没有办法在使用 Three.js 渲染的 3D 图像中插入 html 元素？

【英文标题】：Is there a way to insert html elements inside of a 3D image rendered using Three.js?

【发布时间】：2021-12-02 03:09:59

【问题描述】：

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 元素吗？

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

（仅供参考：这是 Dreamy-lichterman 的一个分叉项目）

【参考方案1】：

@react-three/drei中有一个Html组件，可以用来插入HTMl元素。下面是沙盒的链接，同样的例子和解释（cmets）：https://codesandbox.io/s/embed-html-3d-63uep?file=/src/Test.js

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