Comment ajouter TextGeometry dans three.js?

Comment ajouter du texte dans three.js? J'ai essayé ce code mais il produit une erreur de Uncaught TypeError: Cannot read property 'offsetX' of undefined. Comment puis-je réparer cela?Comment ajouter TextGeometry dans three.js?

Voici mon .json file.

var loader = new THREE.FontLoader(); 
loader.load('https://thefortcity.dev/build/fonts/FontAwesome_Regular.json', function (font) { 
    var textGeometry = new THREE.TextGeometry("text", { 
     font: font, 

     size: 50, 
     height: 10, 
     curveSegments: 12, 

     bevelThickness: 1, 
     bevelSize: 1, 
     bevelEnabled: true 
    }); 

    var textMaterial = new THREE.MeshPhongMaterial( 
     { color: 0xff0000, specular: 0xffffff } 
    ); 

    var mesh = new THREE.Mesh(textGeometry, textMaterial); 

    scene.add(mesh); 
});

Source

2017-10-19 Merida

Le problème que je suppose n'est pas le javascript, est votre json essayer de passer ici si n'est pas à Big. –

@headmax j'ai mis à jour mon poste – Merida

merci;) pour l'ajout. –

Le problème est que vous utilisez Font Awesome. Si vous jetez un coup d'oeil à votre fichier de définition de police, vous ne trouverez pas les définitions de l'une des lettres dans "text" qui est ce que vous voulez afficher. Si vous essayez quelque chose d'autre, comme:

/** 
    below boxes stand for: 
    - fa-volume-up [&#xf028;] 
    - fa-font [&#xf031;] 
    - fa-italic [&#xf033;] 
    - fa-align-right [&#xf038;] 
*/ 
var textGeometry = new THREE.TextGeometry("   ", {

alors cela devrait fonctionner. Vous pouvez copier les symboles ci-dessus à partir du cheatsheet et les coller dans votre code pour vérifier si cela fonctionne.

À titre d'exemple, vous pouvez essayer this plunkr.

Source

2017-10-19 08:30:59

ohh merci! Je n'ai pas remarqué ça. L'erreur a disparu mais elle n'affiche pas le texte. J'ai essayé différentes polices afin que je puisse utiliser le texte. Comment puis-je le montrer sur l'écran? Je peux afficher .BoxGeometry fine – Merida

J'ai mis à jour votre question - vous devriez positionner votre maillage de sorte que vous pouvez voir le texte - essayez de définir (x, y, z) comme 'mesh.position.x = -100;' –

I J'ai essayé de changer les valeurs et il ne s'affichera toujours pas. J'ai essayé de sortir la scène et elle la lit réellement mais c'est bizarre qu'elle ne s'affiche pas. J'essaie trois.js avec ar.js – Merida

Comment ajouter TextGeometry dans three.js?

Répondre

Questions connexes