หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

เกี่ยวกับ

สร้างตาข่ายข้อความสำหรับ babylonjs โดยใช้ WASM เขียนในแอสเซมบลีสคริปต์

ตัวอย่าง

การติดตั้ง

ด้วย 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 Server: 

 // 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 หากไม่มีการสร้างตาข่ายเช่นข้อความทั้งหมดเป็นช่องว่างทั้งหมด
    • ส่งคืน undefined หาก WASM ล้มเหลวในการประมวลผล (เช่นออกจาก 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 - อ่านและเขียนแบบอักษร Opentype โดยใช้ JavaScript

EARCUT - คลังรูปสองเหลี่ยมจาวาสคริปต์ที่เร็วและเล็กที่สุดสำหรับแอพ WebGL ของคุณ

BABYLONJS - เกมที่ทรงพลังสวยงามเรียบง่ายและเปิดกว้างและทำให้เอ็นจิ้นที่อัดแน่นอยู่ในกรอบ JavaScript ที่เป็นมิตร

Assemblyscript - รวบรวมชุดย่อยที่เข้มงวดของ TypeScript (โดยทั่วไป JavaScript กับประเภท) ไปยัง WebAssembly โดยใช้ Binaryen

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด