Comment ajouter du texte dans l'objet en utilisant trois.js

J'ai ajouté du texte dans mon objet (un modèle de chemise) en utilisant une géométrie de texte. Voici mon code:

var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'italic 18px Arial'; ctx.textAlign = 'center'; ctx. textBaseline = 'middle'; ctx.fillStyle = 'red'; ctx.fillText('Your Text', 150, 50);` 

Ma sortie ressemble à ceci:

Entrez la description de l'image ici

Le texte ne correspond pas au modèle de chemise. Si je tourne le modèle de la chemise, le texte affiche une vue non pertinente. Je veux adapter le texte dans le modèle de chemise comme ceci:

Entrez la description de l'image ici

Comment puis-je adapter mon texte dynamique au modèle de chemise en utilisant trois.js.

Le simple fait de dessiner le texte sur votre toile 2D ne vous donnera probablement aucun résultat satisfaisant. Vous avez trois possibilités pour aborder ce problème.

1) Utilisation de textures chargées avec un THREE.TextureLoader .

2) Utilisation de THREE.TextGeometry :

3) Utilisation d'une solution CSS3D.


Vérifiez également l'exemple UI sur la page de documentation THREE.TextGeometry :

Entrez la description de l'image ici