3d text is not displaying in three.js - three.js

Question

I'm learning three.js and I've done the cube successfully. Now I'm trying to make 3d text. I've copied the code from an example in the web which is the simplest one I've found (the example is here).
I've copied all the files from the example to my PC: the html, the css and the 4 referenced .js files including the font "janda_manatee_solid_regular.js". Then when I load the html the 3d text is not displayed (nothing is rendered in the canvas), but I don't get any error in the console.
I've uploaded here the html and everything else (css and js). What's the problem with this code?

Answer 1

In html code of your page (from the link you provided), there is:
<div id="canvas">
<canvas width="800" height="600"></canvas>
<canvas width="800" height="600"></canvas>
</div>
Probably, that in your source code you have it as
<div id="canvas">
<canvas width="800" height="600"></canvas>
</div>
and then in font-example.js you do this
container = document.getElementById( 'canvas' );
thus, you already have a canvas element in the canvas div and then you add one more canvas element of the same size.
var SCREEN_WIDTH = 800, SCREEN_HEIGHT = 600;
...
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
As the result, you have two canvases and you can't see the second one (with nicely looking text) because it's below the bottom of your screen.
The solution is to keep the canvas div empty in your source html:
<div id="canvas"></div>