javascript - 有没有办法在使用 Three.js 渲染的 3D 图像中插入 html 元素?
问题描述
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 的一个分叉项目)
解决方案
@react-three/drei中有一个 Html 组件,可用于在其中插入 HTMl 元素。以下是具有相同示例和说明(评论)的沙箱链接:https ://codesandbox.io/s/embed-html-3d-63uep?file=/src/Test.js
可以在以下位置找到文档:https ://github.com/pmndrs/drei#html
推荐阅读
- sql - 用连接替换子查询
- c++ - C++:是否值得使用 static_cast 来避免比较数字的条件?
- string - MATLAB:将字符串数组中的第一个字母大写
- cron - 如何每天通过 Cron Jobs Cpanel 压缩文件夹
- java - 如何判断哪个玩家获胜
- java - 如何为 API 测试创建 JSESSIONID
- ruby-on-rails - Rails - Puma 随机无法启动工人
- sql - Postgresql:适用于(时间戳,字符串)的多列索引
- tensorflow - 下载预编译的二进制文件 libtensorflow.so 和 libtensorflow_framework.so
- hyperledger-fabric - 作曲家网络开始:没有来自任何对等方的有效响应。来自尝试的对等通信的响应是一个错误:错误:REQUEST_TIMEOUT