three font outliner

에 대한

런타임시 3.js의 글리프에서 모양을 구성합니다.

예

• 모양 - URL에서 글꼴을로드합니다.
• 배열 버퍼 - 파일 시스템에서 글꼴을 선택하십시오.
• 포인트 | 라인 | 튜브 | 가장자리 | 경로를 따라 | 대포

설치

NPM을 통해 : ( npm i ycw/three-font-outliner#v2.0.0 )

 import { FontOutliner } from "three-font-outliner"

CDN을 통해 :

 import { FontOutliner } from "https://cdn.jsdelivr.net/gh/ycw/[email protected]/dist/lib.esm.js" 

용법

 // Ex. Show text "Shapes" using font "aqua.ttf".
const outliner = await FontOutliner . fromUrl ( THREE , "./aqua.ttf" ) ;
const { shapes } = outliner . outline ( "Shapes" ) ;
scene . add ( new THREE . Mesh (
    new THREE . ShapeBufferGeometry ( shapes , 16 ) . center ( ) ,
    new THREE . MeshBasicMaterial ( { color : "blue" , side : THREE . DoubleSide } )
) ) ;

라이브 결과 : 모양

문서

글꼴 분지기 만들기 :

 // Method 1: Load from `Arraybuffer` holding the font file.
const outliner = new FontOutliner ( THREE , arrayBuffer ) ;

// Method 2: Load from url. (async)
const outliner = await FontOutliner . fromUrl ( THREE , fontUrl ) ;

• 전. 배열 버퍼 - 파일 시스템에서 글꼴을 선택하십시오.
• 전. 모양 - URL에서 글꼴을로드합니다.

그런 다음 글리프를 개요하십시오.

 const result = outliner . outline ( "hello" ) ;

result . shapes ; // Array of `THREE.Shape`
result . h ; // Line height
result . w ; // Advance width
result . yMin ; // Bottom (usually a negative value)
result . yMax ; // Top

.outline() 선택 사항 옵션을 수락합니다.

 const result = outliner . outline ( "hello" , {
  size : 100 , // Font size. Default 100,
  isLTR : true , // Is left-to-right writing mode? Default true.
  isCCW : false , // Is solid shape using CCW winding? Default false.
} ) ;

유니 코드 코드 포인트로 특정 글리프가 존재하는지 확인하십시오.

 const codePoint = 65 ;
outliner . hasGlyph ( codePoint ) ; // return true / false 

크레딧

• Photopea/typr.js
• Mrdoob/Three.js

특허

MIT