Babylon.Font

에 대한

AssemblyScript로 작성된 WASM을 사용하여 Babylonj에 대한 텍스트 메쉬를 생성합니다.

예

설치

CDN과 함께

https://cdn.jsdelivr.net/gh/ycw/babylon.font@ {Version }/build/babylon.font.js

또는 NPM

 npm i ycw/babylon.font
npm i ycw/babylon.font#{VERSION_TAG}

용법

 import * as BABYLON from "babylonjs"
import * as opentype from "opentype.js"
import earcut from "earcut"
import { Compiler , Font , TextMeshBuilder } from "babylon.font" ;

( async function ( ) {
  const compiler = await Compiler . Build ( ) ;
  const font = await Font . Install ( "a.ttf" , compiler , opentype ) ;
  const builder = new TextMeshBuilder ( BABYLON , earcut ) ;
  const scene = . . ;
  const mesh = builder . create ( { font , text : "foo" } , scene ) ;
} ) ( ) ;

문서

Compiler

 // (1) auto-probe .wasm url
await Compiler . Build ( ) ;

// (2) specify .wasm url
await Compiler . Build ( wasmUrl ) ;

서명 (2)은 Bundler / Dev 서버를 사용할 때 유용합니다.

 // ex. obtain static asset url for ViteJS/Vite
import wasmUrl from "babylon.font/build/optimized.wasm?url" ;
const compiler = await Compiler . Build ( wasmUrl ) ;

---

Font

 await Font . Install ( fontUrl , compiler , opentype ) ;
// fontUrl:  font(.otf/.ttf) url
// compiler: a Compiler instance
// opentype: the 'opentype.js' lib

• .measure(text, fontSize) : 텍스트 측정; Metrics 반환하십시오.

Metrics

• .advanceWidth
• .ascender
• .descender

---

TextMeshBuilder

텍스트 메쉬 빌더를 구성하십시오

 new TextMeshBuilder ( BABYLON , earcut ) ;
// BABYLON: the 'babylonjs' lib
// earcut: the 'earcut' lib

• .create(options, scene) : 압출 된 텍스트 메쉬를 만듭니다.
  • 메쉬가 생성되면 Mesh 반환합니다.
  • 메쉬가 생성되지 않으면 null 반환합니다. 예를 들어 텍스트는 모두 공백입니다.
  • WASM이 처리하지 못한 경우 undefined 반환 (예 : MEM에서)

 builder . create ( {
  font , // Font instance
  text , // text
  size , // font size; default is 100
  ppc , // points per curve, [0, 255], default is 2
  eps , // decimation threshold, default is 0.001

  // plus `BABYLON.MeshBuilder.CreatePolygon` options
  depth ,
  sideOrientation ,
  faceColors ,
  faceUV ,
  backUVs ,
  frontUVs ,
  updatable ,
} , scene ) ;

전. 폴백

 var mesh = builder . create ( opt1 , scene )
if ( mesh === undefined ) mesh = builder . create ( opt2 , scene ) 

감사해요

Maxgraey- 어셈블리 스크립트/WASM 최적화를 도와줍니다

opentypejs- JavaScript를 사용하여 OpenType 글꼴을 읽고 씁니다.

이어 컷 - WebGL 앱을위한 가장 빠르고 작은 JavaScript 다각형 삼각 분해 라이브러리

Babylonjs- 강력하고 아름답고 간단하며 개방형 게임 및 렌더링 엔진은 친절한 JavaScript 프레임 워크로 가득합니다.

어셈블리 스크립트 - Binaryen을 사용하여 webAssembly에 TypeScript (기본적으로 유형이있는 JavaScript)의 엄격한 서브 세트를 컴파일합니다.

특허

MIT