Wie kann man font.fon font.files in three.js einbinden?

Question

Ich will 3D-Text in meiner Website mit dem Code (nach Labelling the vertices in AxisHelper of THREE.js) unten hinzuzufügen: vor der Verwendung Text Geometry

var textGeo = new THREE.TextGeometry('Test', { 
       size: 10, 
       height: 5, 
       curveSegments: 6, 
       font: "helvetiker", 
       style: "normal"}); 
var color = new THREE.Color(); 
color.setRGB(255, 250, 250); 
var textMaterial = new THREE.MeshBasicMaterial({ color: color }); 
var text = new THREE.Mesh(textGeo , textMaterial); 
scene.add(text); 

Dies erfordert einschließlich helvetiker_regular.typeface.js Font-Datei als Three.js es zum Laden braucht Text-Geometrie.

Was ich finde, ist JSON-Datei wie "helvetiker_regular.typeface.json" (https://github.com/mrdoob/three.js/tree/master/examples/fonts).

Nur ein Anfänger in JS Programmierung. Kann mir jemand sagen, wie ich es einfügen kann, damit mein Code funktioniert?

Answer 1

Sie werden die Schriftart eine Schriftart loader laden zuerst verwenden müssen:

var fontLoader = new THREE.FontLoader(); 
fontLoader.load("../path/to/font.json",function(tex){ 
    var textGeo = new THREE.TextGeometry('Test', { 
      size: 10, 
      height: 5, 
      curveSegments: 6, 
      font: tex, 
    }); 
    var color = new THREE.Color(); 
    color.setRGB(255, 250, 250); 
    var textMaterial = new THREE.MeshBasicMaterial({ color: color }); 
    var text = new THREE.Mesh(textGeo , textMaterial); 
    scene.add(text); 
}) 

So etwas wie das funktionieren wird, wenn Sie gerade laden wollen es einmal und dont care über das halten die Textur für eine andere Zeit. Wenn Sie das "tex" -Objekt behalten möchten, können Sie es irgendwo im Code vorladen und es für alle zukünftigen Textgeometry-Objekte zugänglich machen.