React Three Fiber YarnSpinner Dialogue Box

• React Three Fiber (Three.js + React)
• React Three Drei
• YarnSpinner dialog syntax

A text scrolling dialog box for story-game-style dialog or narration.

Installation

 npm i react-three-yarnspinner-dialogue
 # or
 yarn add react-three-yarnspinner-dialogue

Usage

<YarnDialogue/>

• TBD: add props

Example

  <YarnDialogue
    yarn={exampleYarn}
    width="70%"
    height={150}
    transform={[0.5, 0]}
    padding={10}
    bottom={40}
    skippable
    getCharacterLabelAttributes={({character}) => {
      if(character === 'Companion') {
        return {
          labelColor: 'red',
        }
      }
    }}
  />