Animation of Text

Questions
, ,
1

I have uploaded the three.js files and directories to my Internet Server last week.
The rotation of spheres and cubes functioned without problems.

But I cant display text. Thats the solution I have seen in a tutorial:

var loader = new THREE.FontLoader();
var font =  loader.load( 'three/examples/fonts/helvetiker_regular.typeface.json'); 

    var logo = new THREE.TextGeometry( '24H', {font: font, size: 80, height: 5, curveSegments: 12, bevelEnabled: true, 
                     bevelThickness: 10, bevelSize: 8, bevelSegments: 5});

var material = new THREE.MeshPhongMaterial({color:0xFF0033});
var mesh = new THREE.Mesh(logo, material);
mesh.position.z = -1000;
scene.add(mesh);

Internet Explorer: Mistake Three.js line 11487: array unknown or Null Pointer
Opera: THREE.TextGeometry: font parameter is not an instance of THREE.Font. line 27569 …

2

Maybe the font was not finished loading when you tried to use it? You could try this:

var loader = new THREE.FontLoader();
var font = loader.load( 'three/examples/fonts/helvetiker_regular.typeface.json', function(font) 
{
	var logo = new THREE.TextGeometry( '24H', {font: font, size: 80, height: 5, curveSegments: 12, bevelEnabled: true, bevelThickness: 10, bevelSize: 8, bevelSegments: 5}); 
	var material = new THREE.MeshPhongMaterial({color:0xFF0033});
	var mesh = new THREE.Mesh(logo, material);
	mesh.position.z = -1000;
	scene.add(mesh);
});
3

Thank you Bill.
That was the right solution for IE and Opera.
Now the text will be displayed on the canvas
and I can go on learning three.js.

Greetings
Little User

1 Like