Can't get TextGeometry to work

Questions
,
1

First night with Three.js. I feel like I’m following the docs exactly, but I can’t get TextGeometry to work

import * as THREE from 'three';

import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const fontLoader = new FontLoader();

fontLoader.load( 'node_modules/three/examples/fonts/gentilis_regular.typeface.json', function ( font ) {

	const textGeometry = new TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		depth: 50,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelOffset: 0,
		bevelSegments: 5
	} );
    const textMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const textMesh = THREE.Mesh( textGeometry, textMaterial );
    scene.add(textMesh);
} );

function animate() {

    renderer.render( scene, camera );

}
2

I don’t see you positioning the camera in your code. Is it possible the camera is inside the text, and therefore looking out/through it?

Try:
camera.position.set(0,0, -100); // or 100

after you create it.

also, do:

scene.add(camera);

after you create the camera.

2 Likes
3

You forgot create new instance of the Mesh

const textMesh = new THREE.Mesh( … );

And like @manthrax mentioned tweak camera as well…

1 Like
4

haha good catch!

Also @gherkinboy, definitely check the developer console for any errors in red! when you hit problems like this. I think this issue would have probably appeared in the console output.

5

Ah, good advice. Checked the developer console and I was missing “new” before textMesh. And I had to reposition the camera to see the text. Thanks a bunch!

6

Did it a couple of times in very specific cases, as camera doesn’t need to be a part of the scene graph :thinking:
What’s the advantage of this approach here and in general? No kidding. Now I doubt if I did it correctly all the time :slight_smile:

2 Likes
7

If its not in the scene graph, its matrix/matrixworld doesn’t get autoUpdated during render traversal.. so if you change camera.position for instance.. it might not get reflected during render. Things like OrbitControls explicitly deal with it internally, and I don’t know for sure if this is still an issue.. but it’s bitten me a few times before.

1 Like
8

In general, if you want to programmatically control the camera in a VR session, independent camera will not work, because it will get updated from the VR headset. So, the camera is placed in user-defined Object3D (which is a child of the scene) and this object is moved programmatically. Thus you control the outer object, while the VR headset controls the inner camera.

9

@manthrax
Сhecked it once again just in case, as I was pretty sure, that renderer manages this internally: three.js/src/renderers/WebGLRenderer.js at 0af9729d0c143a86a1d725d6e2c3ad83301f3f34 · mrdoob/three.js · GitHub
I dug into it in one of the previous versions (can’t say which one, but several years ago), and the updating of camera matrices was there. :thinking:

@PavelBoytchev
For me, VR is rather something exotic, than the general case.
But thanks for the info anyway :slight_smile:

3 Likes
10

Ahh good to know. :slight_smile:

1 Like