Three Spritetext

https://www.npmjs.com/package/three-spritetext
Admin
Three Spritetext is a sprite-based text component for Three.js that renders text on canvas as a...
Tokens:3,127
Snippets:55
Trust Score:9.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install three-spritetext

Source: https://www.npmjs.com/package/three-spritetext?activeTab=readme

Install the three-spritetext package using npm.

```bash
npm i three-spritetext
```

--------------------------------

### SpriteText Constructor

Source: https://www.npmjs.com/package/three-spritetext

Initializes a new SpriteText instance. You can optionally provide the initial text, text height, and color.

```APIDOC
## SpriteText Constructor

**SpriteText** ([_text_ , _textHeight_ , _color_])

### Description
Initializes a new SpriteText instance. You can optionally provide the initial text, text height, and color.

### Parameters

*   **text** (string) - Optional - The text to be displayed on the sprite.
*   **textHeight** (number) - Optional - The height of the text.
*   **color** (string) - Optional - The fill color of the text.
```

--------------------------------

### Import SpriteText (Script Tag)

Source: https://www.npmjs.com/package/three-spritetext

Include the SpriteText library using a script tag for direct HTML integration. The library will be available globally.

```html
<script src="//cdn.jsdelivr.net/npm/three-spritetext"></script>
```

--------------------------------

### SpriteText Constructor and Properties

Source: https://www.npmjs.com/package/three-spritetext?activeTab=dependencies

The SpriteText component can be instantiated with optional text, text height, and color. Its appearance and behavior can be further customized through various properties.

```APIDOC
## SpriteText Constructor

**SpriteText** ([_text_ , _textHeight_ , _color_])

### Description
Initializes a new SpriteText instance.

### Parameters
- **text** (string) - Optional - The text to be displayed.
- **textHeight** (number) - Optional - The height of the text.
- **color** (string) - Optional - The fill color of the text.

## Properties

### text
- **Description**: The text to be displayed on the sprite. Supports center aligned multi-lines, using the `\n` character to define line breaks.
- **Default**: (Not specified)

### textHeight
- **Description**: The height of the text.
- **Default**: `10`

### color
- **Description**: The fill color of the text.
- **Default**: `white`

### backgroundColor
- **Description**: The canvas background color. A falsy value makes the canvas transparent.
- **Default**: `false`

### strokeWidth
- **Description**: The width of the text stroke, proportional to the text size. A value of `0` disables stroking.
- **Default**: `0`

### strokeColor
- **Description**: The color of the text stroke.
- **Default**: `white`

### fontFace
- **Description**: The font type of the text.
- **Default**: `Arial`

### fontSize
- **Description**: The resolution of the text, in terms of vertical number of pixels. Lower values may cause text to look blurry. Higher values will yield sharper text, at the cost of performance.
- **Default**: `90`

### fontWeight
- **Description**: The weight (or boldness) of the font. The weights available depend on the font-family you are using.
- **Default**: `normal`

### padding
- **Description**: The amount of padding between the text and the canvas edge. Supports either single values, or a tuple with two values representing horizontal and vertical padding.
- **Default**: `0`

### borderWidth
- **Description**: The size of the border around the canvas. Supports either single values, or a tuple with two values representing horizontal and vertical border size.
- **Default**: `0`

### borderRadius
- **Description**: The corner radius of the border. Supports either single values, or an array of four values representing the four corners in order: top-left, top-right, bottom-right, bottom-left.
- **Default**: `0`

### borderColor
- **Description**: The color of the border.
- **Default**: `white`

### offsetX
- **Description**: Shifts the content horizontally by adding a margin. Positive values shift to the right, negative to the left.
- **Default**: `0`

### offsetY
- **Description**: Shifts the content vertically by adding a margin. Positive values shift downwards, and negative upwards.
- **Default**: `0`
```

--------------------------------

### SpriteText Constructor and Properties

Source: https://www.npmjs.com/package/three-spritetext?activeTab=readme

The SpriteText component can be instantiated with optional text, textHeight, and color. It exposes various properties to customize the appearance and behavior of the text sprite.

```APIDOC
## Constructor
**SpriteText** ([_text_ , _textHeight_ , _color_])

### Properties
Property | Description | Default  
---|---|---  
**text** | The text to be displayed on the sprite. Supports center aligned multi-lines, using the `\n` character to define line breaks. |   
**textHeight** | The height of the text. | `10`  
**color** | The fill color of the text. | `white`  
**backgroundColor** | The canvas background color. A falsy value makes the canvas transparent. | `false`  
**strokeWidth** | The width of the text stroke, proportional to the text size. A value of `0` disables stroking. | `0`  
**strokeColor** | The color of the text stroke. | `white`  
**fontFace** | The font type of the text. | `Arial`  
**fontSize** | The resolution of the text, in terms of vertical number of pixels. Lower values may cause text to look blurry. Higher values will yield sharper text, at the cost of performance. | `90`  
**fontWeight** | The weight (or boldness) of the font. The weights available depend on the font-family you are using. | `normal`  
**padding** | The amount of padding between the text and the canvas edge. Supports either single values, or a tuple with two values representing horizontal and vertical padding. | `0`  
**borderWidth** | The size of the border around the canvas. Supports either single values, or a tuple with two values representing horizontal and vertical border size. | `0`  
**borderRadius** | The corner radius of the border. Supports either single values, or an array of four values representing the four corners in order: top-left, top-right, bottom-right, bottom-left. | `0`  
**borderColor** | The color of the border. | `white`  
**offsetX** | Shifts the content horizontally by adding a margin. Positive values shift to the right, negative to the left. | `0`  
**offsetY** | Shifts the content vertically by adding a margin. Positive values shift downwards, and negative upwards. | `0`
```

--------------------------------

### SpriteText Properties

Source: https://www.npmjs.com/package/three-spritetext

Configurable properties for customizing the appearance and behavior of the SpriteText instance.

```APIDOC
## SpriteText Properties

### Properties

Property | Description | Default
---|---|---
**text** | The text to be displayed on the sprite. Supports center aligned multi-lines, using the `\n` character to define line breaks. | 
**textHeight** | The height of the text. | `10`
**color** | The fill color of the text. | `white`
**backgroundColor** | The canvas background color. A falsy value makes the canvas transparent. | `false`
**strokeWidth** | The width of the text stroke, proportional to the text size. A value of `0` disables stroking. | `0`
**strokeColor** | The color of the text stroke. | `white`
**fontFace** | The font type of the text. | `Arial`
**fontSize** | The resolution of the text, in terms of vertical number of pixels. Lower values may cause text to look blurry. Higher values will yield sharper text, at the cost of performance. | `90`
**fontWeight** | The weight (or boldness) of the font. The weights available depend on the font-family you are using. | `normal`
**padding** | The amount of padding between the text and the canvas edge. Supports either single values, or a tuple with two values representing horizontal and vertical padding. | `0`
**borderWidth** | The size of the border around the canvas. Supports either single values, or a tuple with two values representing horizontal and vertical border size. | `0`
**borderRadius** | The corner radius of the border. Supports either single values, or an array of four values representing the four corners in order: top-left, top-right, bottom-right, bottom-left. | `0`
**borderColor** | The color of the border. | `white`
**offsetX** | Shifts the content horizontally by adding a margin. Positive values shift to the right, negative to the left. | `0`
**offsetY** | Shifts the content vertically by adding a margin. Positive values shift downwards, and negative upwards. | `0`
```

--------------------------------

### Initialize and Add SpriteText to Scene

Source: https://www.npmjs.com/package/three-spritetext?activeTab=readme

Instantiate SpriteText with desired text and add it to your ThreeJS scene. The text will automatically face the camera.

```javascript
const myText = new SpriteText('My text');

const myScene = new THREE.Scene();
myScene.add(myText);
```

--------------------------------

### Import SpriteText (ESM)

Source: https://www.npmjs.com/package/three-spritetext

Import the SpriteText component using ES module syntax. This is the standard way to include the library in modern JavaScript projects.

```javascript
import SpriteText from 'three-spritetext';
```

--------------------------------

### Import SpriteText Component

Source: https://www.npmjs.com/package/three-spritetext?activeTab=readme

Import the SpriteText component for use in your project. This can be done using ES modules or a script tag.

```javascript
import SpriteText from 'three-spritetext';
```

```html
<script src="//cdn.jsdelivr.net/npm/three-spritetext"></script>
```
Tokens:
Raw