스프라이트에 맞춤 글꼴을 추가하는 방법

Question

Sprite을 만들 때 나는 Arial 만 사용할 수 있습니다. 다른 글꼴은 작동하지 않습니다. Roboto과 같은 맞춤 글꼴을 추가하는 방법이 있습니까?

코드 :

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> 
    } 

는 properties에서 나는 Roboto와 Ariel를 교체 시도했지만 작동하지 않았다. 어떤 아이디어?

위의 코드 (관련 부분을 작성한 것)가 작동하고 글꼴이 Ariel에 있습니다. (조금 흐릿한 것이지만 선명하고 깨끗한 텍스트를 얻는 방법을 알고 싶습니다.)

Answer 1

캔버스에서 외부 글꼴을 사용하려면 ctx.fillText()을 호출 할 때 외부 글꼴을 이미로드했는지 확인해야합니다.

단지 @font-face은 브라우저에로드하려는 경우 브라우저에 알려주므로 충분하지 않습니다. 그러나 글꼴을 사용하는 HTML에 실제 내용이 없으면 브라우저는 파일을로드하지 않습니다.

Firefox 및 Chrome에는 대신 사용할 수있는 글꼴 로딩 API가 있습니다. 또는 글꼴을 준비 할 때 감지하려면 https://fontfaceobserver.com/과 같은 것을 사용하십시오.