3D Text not rendering properly

Questions
, , ,
1

I’ve added some basic 3D text to my scene but it always fails to render all sides (and colors). I’m using r175

fontLoader.load(‘js/three/fonts/helvetiker_bold.typeface.json’,(font)=>{font3D=font;});
//
var geometry = new TextGeometry(‘TEXT’,{
font: font3D,
size: 400,
height: 80,
bevelEnabled: false});
geometry.center();
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
flatShading: true,
side: THREE.DoubleSide,
transparent: true,
opacity:1});
object[n][no] = new THREE.Mesh(geometry,material);

IMG_1313
IMG_13131947×995 312 KB

2

Try setting bevelEnabled to true. I’m not sure why, but this seems to resolve the issue. You can see the same behavior in the official example, and it only seems to happen in version r175

1 Like
3

Set bevelEnabled to true. Now I’ve got this. (I’m migrating from r148)
I’ve lost the shadows from the lights: (which were fine in 148)

const light1 = new THREE.PointLight(0xffffff, 500, 10000); // intensity boosted for physical lighting
light1.decay = 2;
light1.position.set(0, 1000, scene_z);
light1.castShadow = true;
light1.shadow.radius = 4;
scene.add(light1);

// Ambient fill light — just to soften dark areas
const light2 = new THREE.AmbientLight(0xffffff, 0.4); // reduce a bit for better realism
scene.add(light2);

// Secondary overhead light — infinite range with no decay (legacy style fill)
const light3 = new THREE.PointLight(0xffffff, 2, 0); // slightly stronger
light3.decay = 0;
light3.position.set(0, 1500, scene_z);
light3.castShadow = true;
scene.add(light3);

// Light attached to the camera — acts like a flashlight
const light4 = new THREE.PointLight(0xffffff, 1.2, 0); // stronger camera light
light4.decay = 0;
light4.position.set(0, 350, 0);
camera.add(light4);

IMG_1314
IMG_13141816×906 216 KB

4

Try setting depth. I had a textgeometry stretching problem and solved it by setting the depth of the textgeometry.

5

You’re running into some migration issues. A lot has changed since version r148. Keep in mind that breaking changes are typically introduced every 10 versions. Between r148 and r175, the biggest changes involve lighting and color management.

Check out these migration guides for more details:

  • :light_bulb: Lighting: Updates to lighting in three.js r155
    Most of the changes affect light intensity. Try tweaking the values to see how they translate in the new version.

  • :artist_palette: Color Management: Updates to Color Management in three.js r152
    The main updates involve color encoding. About 90% of the time, you’ll need to set the appropriate colorSpace on your textures. If you’re not using textures or custom shaders, you’re likely unaffected.

  • :warning: Console warnings: Keep an eye on the console (F12) and read the warnings. It will let you know if any properties are deprecated, need replacing, or are no longer supported.