@seregpie/three.text-plane NPM

THREE.TextPlane

class THREE.TextPlane extends THREE.Mesh

Optimally displays the text as a plane.

demo

Try it out!

dependencies

THREE.TextTexture

setup

npm

npm i @seregpie/three.text-plane

import TextPlane from '@seregpie/three.text-plane';

browser

<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/@seregpie/three.text-texture"></script>
<script src="https://unpkg.com/@seregpie/three.text-plane"></script>

The class is globally available as THREE.TextPlane.

usage

let plane = new THREE.TextPlane({
  alignment: 'left',
  color: '#24ff00',
  fontFamily: '"Times New Roman", Times, serif',
  fontSize: 8,
  fontStyle: 'italic',
  text: [
    'Twinkle, twinkle, little star,',
    'How I wonder what you are!',
    'Up above the world so high,',
    'Like a diamond in the sky.',
  ].join('\n'),
});
scene.add(plane);

Update the plane.

plane.fontFamily = 'Arial, Helvetica, sans-serif';
plane.fontStyle = 'normal';
plane.text = [
  'When this blazing sun is gone,',
  'When he nothing shines upon,',
  'Then you show your little light,',
  'Twinkle, twinkle, through the night.',
].join('\n');

members

constructor

new THREE.TextPlane({
  alignment: 'center',
  backgroundColor = 'rgba(0,0,0,0)',
  color: '#fff',
  fontFamily: 'sans-serif',
  fontSize: 1,
  fontStyle: 'normal',
  fontVariant: 'normal',
  fontWeight: 'normal',
  lineGap: 0.25,
  padding: 0.5,
  strokeColor: '#fff',
  strokeWidth: 0,
  text: '',
}, material)

argument	description
`alignment`	The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`.
`backgroundColor`	The background color.
`color`	The color.
`fontFamily`	The font family.
`fontSize`	The font size.
`fontStyle`	The font style.
`fontVariant`	The font variant.
`fontWeight`	The font weight.
`lineGap`	The vertical distance between the text lines. The value is relative to the font size.
`padding`	The space around the text. The value is relative to the font size.
`strokeColor`	The stroke color.
`strokeWidth`	The stroke width. The value is relative to the font size.
`text`	The text.
`material`	An instance of `THREE.Material`. If not provided, a default instance will be created.