This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
three.js can render text directly into a three-dimensional graphic, which is great when combined with a 3D model scene. This article looks at how to render 3D text in three.js — Hello World.
Three.js - JavaScript 3D library
TextGeometry
Geometry in three.js is generated using various Geometry classes, and 3D text is no exception. To generate a 3D text, we can use TextGeometry directly to generate.
new TextGeometry('Hello World', {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: true
});
Note, however, that the font here is a required field. The font here is not the same as the font-family in css, it must be the font in three.js.
fontLoader
The font in three.js needs to be loaded using the FontLoader, and instead of the usual font files, it is loaded as a JSON file in typeface format.
const loader = new FontLoader();
loader.load('/fonts/font.typeface.json', function (response) {
font = response;
refreshText();
});
Once loaded, the text will change to the loaded font by updating the text rendering.
??? Reason for anomaly
When using TextGeometry it is often the case that the text does not render well. This is because three.js cannot find the text in the typeface, so we can generate a typeface file ourselves.
typeface Generate
The typeface generation starts by preparing a font file, taking care to ensure that the text you want to use is supported in that font file.
Fonts can be downloaded from the following websites：
Free Fonts & Popular Downloads for Word | FontSpace
Once downloaded we can find an online typeface converion tool, such as the one I use: facetype.js Once converted, the typeface file can be used in three.js.
Full code
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in the Level Up Coding publication
- 🔔 Follow us: Twitter | LinkedIn | Newsletter
🚀👉 Join the Level Up talent collective and find an amazing job
Rendering Three-Dimensional Characters Using Three.js was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Maxwell | Sciencx (2023-02-12T17:10:27+00:00) Rendering Three-Dimensional Characters Using Three.js. Retrieved from https://www.scien.cx/2023/02/12/rendering-three-dimensional-characters-using-three-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.