fix: expose ascii font

pmndrs · Oct 31, 2023 · 00b9a7c · 00b9a7c
1 parent 4297896
commit 00b9a7c
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/effects/ASCII.tsx b/src/effects/ASCII.tsx
@@ -47,6 +47,7 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
 `
 
 interface IASCIIEffectProps {
+  font?: string
   characters?: string
   fontSize?: number
   cellSize?: number
@@ -56,6 +57,7 @@ interface IASCIIEffectProps {
 
 class ASCIIEffect extends Effect {
   constructor({
+    font = 'arial',
     characters = ` .:,'-^=*+?!|0#X%WM@`,
     fontSize = 54,
     cellSize = 16,
@@ -75,12 +77,12 @@ class ASCIIEffect extends Effect {
     const charactersTextureUniform = this.uniforms.get('uCharacters')
 
     if (charactersTextureUniform) {
-      charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize)
+      charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize)
     }
   }
 
   /** Draws the characters on a Canvas and returns a texture */
-  public createCharactersTexture(characters: string, fontSize: number): THREE.Texture {
+  public createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture {
     const canvas = document.createElement('canvas')
     const SIZE = 1024
     const MAX_PER_ROW = 16
@@ -95,7 +97,7 @@ class ASCIIEffect extends Effect {
     }
 
     context.clearRect(0, 0, SIZE, SIZE)
-    context.font = `${fontSize}px arial`
+    context.font = `${fontSize}px ${font}`
     context.textAlign = 'center'
     context.textBaseline = 'middle'
     context.fillStyle = '#fff'