3D Font Problems

MrBodean · August 10, 2021, 2:51pm

I am having a problem with the 3D Fonts in threejs. On the left are what mine looked like in ver 103 and earlier with BevelSize of 6 and bevelThickness of 2. All 3 sides look great.
After version 103 (104 & above) look like the fonts on the right side which all look like crap. In a Perfect world the fonts would look like the backside of those on the left (not just on the back). I would love if there is a way to pull that off. If not how can I get the new code to work properly with bevels like it use to. The code in example has not changed, its still the same code as before even up to ver 130.

Is it possible to pull the font code from old build and replace new one in the three.js file? I tried that just in the main code and saw a new option “bevelOffset:” but I tried that and still nothing like before. Also just changing that part of code did not seem to do anything differrent. Any help in the right direction is GREATLY appreciated.

prisoner849 · August 10, 2021, 3:27pm

Hi!
Could you provide a live code working example, that demonstrates the issue?
Or, at least, show the object of parameters you use for TextGeometry, and what font.

MrBodean · August 10, 2021, 4:47pm

Well in the webgl text example in any version since 104 will do this if you set the bevel to 6 like I did, you will see it, the other defaults it uses are fine. If you need I can put up examples on my site where I edit that file

prisoner849 · August 10, 2021, 5:24pm

jsfiddle, codepen or any other sandbox example is enough

I made a small example and it works as expected with the latest release: Edit fiddle - JSFiddle - Code Playground

Used the same parameters, like in the example with text, plus, changed bevelSize to 6 and bevelThickness to 2. You can see the result.

MrBodean · August 10, 2021, 10:45pm

Well your code is different from the code in the example
https://threejs.org/examples/#webgl_geometry_text
This one is the one I have been using

github.com

mrdoob/three.js/blob/37bbe4e749843c50d4ff79db6f73e43ad6d31895/examples/webgl_geometry_text.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - text</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;

This file has been truncated. show original

Yours is much closer but when I turned on light and no wireframe, you can see that there are 2 bevels instead of one? idea on how to get just one?

prisoner849 · August 10, 2021, 11:55pm

I didn’t get what you mean with this.
I updated the fiddle. Added bevelSegments (that described in the docs of TextGeometry), with the value of 12. Also, increased curveSegments value from 3 to 10.

MrBodean · August 11, 2021, 12:05am

In my pic it looks like there are 2 different bevels on yours it looks like one, I will try the changes you suggested . Thanks for all the help

MrBodean · August 11, 2021, 10:24am

Well I FOUND my problem. It was driving me nuts. I copied your code over and it was given me the same ugly text. Then I hardcoded the variables and it worked, so now i do a parseFloat() on the bevelsize and such and ALL IS WORKING… Damn Thanks sooo much…

prisoner849 · August 11, 2021, 10:25am

You’re welcome

Topic		Replies	Views
3D Fonts for Three.js Questions	2	953	September 23, 2019
Color of bevel in THREE.TextGeometry Questions text	5	1553	December 10, 2020
Adding some text in boxGeometry either all sides or not Questions geometry , text	0	850	June 25, 2022
Text example bevel seems broken Questions examples	4	908	January 21, 2020
Difficulty loading 3DText with FontLoader.js and TextGeometry.js Questions text	0	769	June 24, 2022

3D Font Problems

Related topics