3D-Text wird nicht angezeigt in three.js

Question

Ich lerne three.js und ich habe den Würfel erfolgreich gemacht. Jetzt versuche ich, 3d Text zu machen. Ich habe den Code von einem Beispiel im Web kopiert, das das einfachste ist, das ich gefunden habe (das Beispiel ist here). Ich habe alle Dateien aus dem Beispiel auf meinen PC kopiert: die HTML-, die CSS- und die 4 referenzierten .js-Dateien einschließlich der Schriftart "janda_manatee_solid_regular.js". Wenn ich dann den HTML-Code lade, wird der 3D-Text nicht angezeigt (es wird nichts in der Zeichenfläche gerendert), aber ich bekomme keinen Fehler in der Konsole.

Ich habe here die HTML und alles andere (css und js) hochgeladen. Was ist das Problem mit diesem Code?

Answer 1

im HTML-Code Ihrer Seite (aus dem Link, den Sie zur Verfügung gestellt), gibt es:

<div id="canvas"> 
    <canvas width="800" height="600"></canvas> 
    <canvas width="800" height="600"></canvas> 
</div> 

Wahrscheinlich, dass in Ihrem Quellcode Sie es als

<div id="canvas"> 
    <canvas width="800" height="600"></canvas> 
</div> 

haben und dann in font-example.js Sie tun dies

container = document.getElementById('canvas'); 

so haben Sie bereits ein Element Canvas in der canvas div und dann fügen Sie ein weiteres Canvas-Element derselben Größe hinzu.

var SCREEN_WIDTH = 800, SCREEN_HEIGHT = 600; 
... 
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 

Als Ergebnis haben Sie zwei Leinwände und man kann die zweiten nicht sehen (mit gut aussehenden Text), weil es unter dem unteren Rande des Bildschirms ist. Die Lösung ist, die canvas div leer in Ihrem HTML-Quellcode zu halten:

<div id="canvas"></div>