Comment ajouter une police personnalisée à l'image-objet

Question

Pour autant que je sache, je ne peux utiliser Arial lors de la création d'un Sprite. Les autres polices ne fonctionnent pas. Est-il possible d'ajouter des polices personnalisées comme Roboto?

code:

const makeTextSprite = (_text, properties) => { 
    const text = _text; 
    const canvas = document.createElement('canvas'); 
    const context = canvas.getContext('2d'); 
    context.translate(0.5, 0.5); 
    const metrics = context.measureText(text); 
    const textWidth = metrics.width; 

    context.font = properties.font; 
    context.fillStyle = properties.fillStyle; 
    context.strokeStyle = properties.strokeStyle; 
    context.lineWidth = properties.lineWidth; 

    context.fillText(text, 125, 75); 

    const texture = new THREE.Texture(canvas); 
    texture.needsUpdate = true; 
    return texture; 
}; 

componentDidMount() { 
    const properties = { 
     font: '5px Arial', 
     fillStyle: 'rgb(142, 142, 142)', 
     strokeStyle: 'rgba(255,0,0,1)', 
     lineWidth: 4, 
    }; 

    const texture1 = makeTextSprite('Text Here', properties); 

    this.spriteMaterial1.map = texture1; 
} 

render() { 
    return 
     <React3 
      mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below 
      width={canvasWidth} 
      height={canvasHeight} 
      clearColor={'#ffffff'} 
      antialias 
     > 
     <scene ref={(ref) => { this.scene = ref; }}> 
      <perspectiveCamera 
       name="camera" 
       fov={45} 
       aspect={canvasWidth/canvasHeight} 
       near={1} 
       far={1000} 
       position={this.cameraPosition} 
       ref={(ref) => { this.camera = ref; }} 
      /> 

      <sprite position={this.position1} scale={this.scale} > 
       <spriteMaterial ref={(ref) => { this.spriteMaterial1 = ref; }} /> 
      </sprite> 
     </scene> 
    </React3> 
    } 

En properties j'ai essayé de remplacer Ariel avec Roboto mais il ne fonctionne pas. Des idées?

Le code ci-dessus (vient d'écrire les parties pertinentes) fonctionne et me donne la police au Ariel. (Il est également un peu flou.)

Answer 1

Pour utiliser des polices externes dans le canevas, vous devez vous assurer qu'elles sont déjà chargées lors de l'appel ctx.fillText().

Juste le @font-face ne suffit pas car il indique simplement au navigateur où le trouver SI il veut le charger. Mais à moins qu'il n'y ait un contenu réel dans le code HTML qui utilise la police, le navigateur ne chargera pas le fichier. Pour Firefox et Chrome, il existe l'API de chargement de polices que vous pouvez utiliser à la place. Sinon, utilisez quelque chose comme https://fontfaceobserver.com/ pour détecter quand la police est prête.