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

實時結果：形狀

文件

製作字體Outliner：

 // 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.
} ) ;

檢查某些字形是否存在Unicode代碼點：

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

學分

• Photopea/typr.js
• MRDOOB/TRIX.JS

執照

麻省理工學院