Shags / react-msdf-text Public

Notifications You must be signed in to change notification settings
Fork 1
Star 5

Display text in WebGL using Multichannel Signed Distance Field text fonts using React and React-Three-Fiber

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
example		example
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

react-msdf-text

Display text in WebGL using Multichannel Signed Distance Field text fonts using React and React-Three-Fiber

This project borrows heavily from Jam3's work on MSDF text in Three.js

Install

npm install --save react-msdf-text

Usage

import React, { Component } from 'react'
import { Canvas } from 'react-three-fiber'
import { Text } from 'react-msdf-text'
import 'react-msdf-text/dist/index.css'

class Example extends Component {
  render() {
    return (
      <Canvas>
        <Text text={'Hello World!'} />
      </Canvas>
    )
  }
}