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
Approach: I have tried to get the canvas element and then add a text using
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);
}, []);
where x and y are the coordinates. I am getting an error saying fillText is not a function. So,what did I miss? Is there any other way to insert/render html elements in a 3D canvas image?
Link to codesandbox: https://codesandbox.io/s/dreamy-lichterman-lbb4z?file=/src/Test.js
(FYI: This is a forked project of dreamy-lichterman)
There is a Html Component in which can be used to insert HTMl elements inside. 有一个 Html 组件,可用于在其中插入 HTMl 元素。 Below is the link to the sandbox with the same example and explanation(comments): https://codesandbox.io/s/embed-html-3d-63uep?file=/src/Test.js
Documentation can be found at: https://github.com/pmndrs/drei#html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.