### Full Scene Integration with Multiple SpriteText Styles Source: https://context7.com/vasturiano/three-spritetext/llms.txt This example sets up a complete Three.js scene, demonstrating various SpriteText properties like plain text, background colors, borders, rounded corners, and outlines. It includes renderer, camera, and controls setup, along with a resize handler and animation loop. ```html

``` -------------------------------- ### Initialize SpriteText with Three.js Source: https://github.com/vasturiano/three-spritetext/blob/master/example/basic/index.html Imports SpriteText and Three.js, then initializes various text elements with different styles and positions. Requires a Three.js setup including renderer, scene, and camera. ```javascript import SpriteText from "https://esm.sh/three-spritetext?external=three"; // import SpriteText from "../../dist/three-spritetext.mjs"; import * as THREE from 'three'; import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js?external=three'; const SimpleText = new SpriteText('Basic text', 10); SimpleText.color = 'orange'; SimpleText.position.x = -45; SimpleText.position.y = 15; const ContainerText = new SpriteText('Boxed text', 8); ContainerText.color = 'orange'; ContainerText.backgroundColor = 'rgba(0,0,190,0.6)'; ContainerText.borderColor = 'lightgrey'; ContainerText.borderWidth = 0.5; ContainerText.borderRadius = 3; ContainerText.padding = [6, 2]; ContainerText.position.x = 45; ContainerText.position.y = 15; const StrokeText = new SpriteText('Stroke text', 8); StrokeText.color = 'blue'; StrokeText.strokeWidth = 1; StrokeText.strokeColor = 'lightgray'; StrokeText.padding = 4; StrokeText.position.x = 45; StrokeText.position.y = -20; const MultilineText = new SpriteText('This is\nsome multi-line\ntext', 5); MultilineText.color = 'blue'; MultilineText.borderWidth = 0.4; MultilineText.padding = 8; MultilineText.position.x = -45; MultilineText.position.y = -20; // Setup renderer const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(2, window.devicePixelRatio)); document.getElementById('container').appendChild(renderer.domElement); // Setup scene const scene = new THREE.Scene(); scene.add(SimpleText); scene.add(ContainerText); scene.add(StrokeText); scene.add(MultilineText); scene.add(new THREE.AmbientLight(0xbbbbbb)); // Setup camera const camera = new THREE.PerspectiveCamera(); camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); camera.lookAt(0, 0, 0); camera.position.z = 100; // Add camera controls const tbControls = new TrackballControls(camera, renderer.domElement); // Kick-off renderer (function animate() { // IIFE // Frame cycle tbControls.update(); renderer.render(scene, camera); requestAnimationFrame(animate); })(); ``` -------------------------------- ### text Property Source: https://context7.com/vasturiano/three-spritetext/llms.txt Gets or sets the displayed string. Supports multi-line text via '\n' and triggers an immediate canvas re-render on assignment. ```APIDOC ## `text` Property **`spriteText.text`** — Gets or sets the displayed string; supports multi-line via `\n`, and triggers an immediate canvas re-render on assignment. ### Parameters - **text** (string) - The text string to display. Can include `\n` for multi-line text. ### Request Example ```javascript const label = new SpriteText('Initial text', 10, 'white'); scene.add(label); // Update text dynamically (e.g., in an animation loop) let frameCount = 0; function animate() { requestAnimationFrame(animate); frameCount++; label.text = `Frame: ${frameCount}`; // canvas re-renders automatically renderer.render(scene, camera); } animate(); ``` ``` -------------------------------- ### Constructor Source: https://context7.com/vasturiano/three-spritetext/llms.txt Creates a new SpriteText instance and immediately renders its canvas texture. Supports optional initial text, text height, and color. ```APIDOC ## Constructor **`new SpriteText(text?, textHeight?, color?)`** — Creates a new sprite text instance and immediately renders its canvas texture. ### Parameters - **text** (string) - Optional - The initial text string to display. - **textHeight** (number) - Optional - The world-space height of a single line of text. Defaults to 10. - **color** (string) - Optional - The fill color of the text. Accepts any CSS color string. Defaults to 'rgba(255,255,255,1)'. ### Request Example ```javascript import SpriteText from 'three-spritetext'; import * as THREE from 'three'; const scene = new THREE.Scene(); // Minimal usage — defaults: textHeight=10, color='rgba(255,255,255,1)' const label = new SpriteText('Hello World'); scene.add(label); // With explicit textHeight and color const label2 = new SpriteText('Score: 100', 8, 'gold'); label2.position.set(0, 20, 0); scene.add(label2); // Multi-line text via \n const multiline = new SpriteText('Line one\nLine two\nLine three', 5, 'cyan'); scene.add(multiline); ``` ``` -------------------------------- ### SpriteText Constructor Source: https://github.com/vasturiano/three-spritetext/blob/master/README.md Initializes a new SpriteText instance. You can optionally provide initial text, text height, and color. ```APIDOC ## SpriteText Constructor ### 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. ``` -------------------------------- ### Initialize SpriteText Component Source: https://context7.com/vasturiano/three-spritetext/llms.txt Import and create new SpriteText instances. Supports default values for textHeight and color, or explicit values. Handles multi-line text using \n. ```javascript import SpriteText from 'three-spritetext'; import * as THREE from 'three'; const scene = new THREE.Scene(); // Minimal usage — defaults: textHeight=10, color='rgba(255,255,255,1)' const label = new SpriteText('Hello World'); scene.add(label); // With explicit textHeight and color const label2 = new SpriteText('Score: 100', 8, 'gold'); label2.position.set(0, 20, 0); scene.add(label2); // Multi-line text via \n const multiline = new SpriteText('Line one\nLine two\nLine three', 5, 'cyan'); scene.add(multiline); ``` -------------------------------- ### SpriteText Properties Source: https://github.com/vasturiano/three-spritetext/blob/master/README.md Configurable properties for styling and positioning the text sprite. ```APIDOC ## SpriteText Properties ### Description These properties can be set on a SpriteText instance to customize its appearance and behavior. ### Properties - **text** (string) - The text to be displayed. Supports multi-line text using '\n'. - **textHeight** (number) - The height of the text. Default: `10`. - **color** (string) - The fill color of the text. Default: `white`. - **backgroundColor** (string | boolean) - The canvas background color. Set to `false` for transparency. Default: `false`. - **strokeWidth** (number) - The width of the text stroke. `0` disables stroking. Default: `0`. - **strokeColor** (string) - The color of the text stroke. Default: `white`. - **fontFace** (string) - The font type. Default: `Arial`. - **fontSize** (number) - The resolution of the text in pixels. Default: `90`. - **fontWeight** (string) - The weight of the font. Default: `normal`. - **padding** (number | [number, number]) - Padding around the text. Default: `0`. - **borderWidth** (number | [number, number]) - Border size around the canvas. Default: `0`. - **borderRadius** (number | number[]) - Corner radius of the border. Default: `0`. - **borderColor** (string) - The color of the border. Default: `white`. - **offsetX** (number) - Horizontal shift of the content. Default: `0`. - **offsetY** (number) - Vertical shift of the content. Default: `0`. ``` -------------------------------- ### clone() Method Source: https://context7.com/vasturiano/three-spritetext/llms.txt Creates and returns a deep copy of the SpriteText instance, ensuring all visual properties are duplicated into a new, independent object. ```APIDOC ## `clone()` Method **`spriteText.clone()`** — Returns a deep copy of the `SpriteText` instance, including all visual properties, as a new independent object. ### Example Usage ```js const original = new SpriteText('Template', 8, 'white'); original.backgroundColor = 'navy'; original.borderWidth = 0.5; original.padding = 4; // Stamp out multiple identical labels at different positions [0, 20, 40, 60].forEach((x, i) => { const copy = original.clone(); copy.text = `Node ${i}`; copy.position.set(x, 0, 0); scene.add(copy); }); ``` ``` -------------------------------- ### copy(source) Method Source: https://context7.com/vasturiano/three-spritetext/llms.txt Copies all visual properties from a source SpriteText instance into the current instance, following the Three.js Object3D.copy() convention. ```APIDOC ## `copy(source)` Method **`spriteText.copy(source)`** — Copies all visual properties from another `SpriteText` instance into this one, mirroring the Three.js `Object3D.copy()` convention. ### Example Usage ```js const src = new SpriteText('Source', 10, 'red'); src.fontWeight = 'bold'; src.padding = 5; const dest = new SpriteText('Destination'); dest.copy(src); // dest now has all of src's visual settings // dest.text remains 'Destination' scene.add(dest); ``` ``` -------------------------------- ### color Property Source: https://context7.com/vasturiano/three-spritetext/llms.txt Sets the fill color of the text. Accepts any valid CSS color string. ```APIDOC ## `color` Property **`spriteText.color`** — Sets the fill color of the text; accepts any CSS color string. ### Parameters - **color** (string) - A valid CSS color string (e.g., 'orange', '#ff6347', 'rgba(0, 200, 255, 0.9)'). ### Request Example ```javascript const label = new SpriteText('Colored text', 10); label.color = 'orange'; label.color = '#ff6347'; label.color = 'rgba(0, 200, 255, 0.9)'; scene.add(label); ``` ``` -------------------------------- ### Basic Usage of SpriteText Source: https://github.com/vasturiano/three-spritetext/blob/master/README.md Instantiate SpriteText with your desired text and add it to a ThreeJS scene. The text will automatically face the camera. ```javascript const myText = new SpriteText('My text'); const myScene = new THREE.Scene(); myScene.add(myText); ``` -------------------------------- ### Clone SpriteText Instance Source: https://context7.com/vasturiano/three-spritetext/llms.txt The clone() method returns a deep copy of the SpriteText instance, including all visual properties, as a new independent object. This is useful for creating multiple identical labels. ```javascript const original = new SpriteText('Template', 8, 'white'); original.backgroundColor = 'navy'; original.borderWidth = 0.5; original.padding = 4; // Stamp out multiple identical labels at different positions [0, 20, 40, 60].forEach((x, i) => { const copy = original.clone(); copy.text = `Node ${i}`; copy.position.set(x, 0, 0); scene.add(copy); }); ``` -------------------------------- ### Import SpriteText Component Source: https://github.com/vasturiano/three-spritetext/blob/master/README.md Import the SpriteText component for use in your project. This can be done using ES6 imports or by including the library via a script tag. ```javascript import SpriteText from 'three-spritetext'; ``` ```html ``` -------------------------------- ### Configure SpriteText Font Properties Source: https://context7.com/vasturiano/three-spritetext/llms.txt Control the font face, size, and weight using 'fontFace', 'fontWeight', and 'fontSize'. 'fontSize' affects the internal canvas resolution for sharpness and memory usage. ```javascript const label = new SpriteText('Bold Serif', 12, 'white'); label.fontFace = 'Georgia'; // any CSS font family label.fontWeight = 'bold'; // 'normal' | 'bold' | '100'–'900' label.fontSize = 120; // higher = sharper texture, more memory scene.add(label); ``` -------------------------------- ### padding Property Source: https://context7.com/vasturiano/three-spritetext/llms.txt Adds space between the text and the canvas edge. Accepts a single number for uniform padding or a `[horizontal, vertical]` tuple. All values are relative to `textHeight`. ```APIDOC ## `padding` Property **`spriteText.padding`** — Adds space between the text and the canvas edge. Accepts a single number (uniform padding) or a `[horizontal, vertical]` tuple — all values are relative to `textHeight`. ### Parameters - **padding** (number | [number, number]) - Either a single number for uniform padding on all sides, or an array `[horizontal, vertical]` specifying padding for each axis. Values are relative to `textHeight`. ### Request Example ```javascript const label = new SpriteText('Padded', 8, 'white'); label.backgroundColor = 'steelblue'; label.padding = 4; // uniform padding on all sides // or label.padding = [8, 3]; // [horizontal, vertical] padding scene.add(label); ``` ``` -------------------------------- ### Border Properties Source: https://context7.com/vasturiano/three-spritetext/llms.txt Configure a styled border around the canvas of the SpriteText. Supports borderWidth, borderRadius, and borderColor. ```APIDOC ## `borderWidth`, `borderRadius`, and `borderColor` Properties **`spriteText.borderWidth / borderRadius / borderColor`** — Draw a styled border around the canvas. `borderWidth` accepts a single number or `[horizontal, vertical]` tuple; `borderRadius` accepts a single number or a four-element array `[topLeft, topRight, bottomRight, bottomLeft]`. ### Example Usage ```js const card = new SpriteText('Tooltip', 7, 'white'); card.backgroundColor = 'rgba(0, 0, 0, 0.75)'; card.padding = [6, 2]; card.borderWidth = 0.5; card.borderColor = 'rgba(255,255,255,0.6)'; card.borderRadius = 3; // uniform rounded corners // card.borderRadius = [4, 4, 0, 0]; // or per-corner: [tl, tr, br, bl] scene.add(card); ``` ``` -------------------------------- ### Copy SpriteText Properties Source: https://context7.com/vasturiano/three-spritetext/llms.txt The copy(source) method copies all visual properties from another SpriteText instance into the current one, similar to Three.js Object3D.copy(). The text content of the destination instance remains unchanged. ```javascript const src = new SpriteText('Source', 10, 'red'); src.fontWeight = 'bold'; src.padding = 5; const dest = new SpriteText('Destination'); dest.copy(src); // dest now has all of src's visual settings // dest.text remains 'Destination' scene.add(dest); ``` -------------------------------- ### Apply Border Styles to SpriteText Source: https://context7.com/vasturiano/three-spritetext/llms.txt Use borderWidth, borderColor, and borderRadius to draw a styled border around the canvas. borderWidth and borderRadius accept single values or arrays for different sides/directions. ```javascript const card = new SpriteText('Tooltip', 7, 'white'); card.backgroundColor = 'rgba(0, 0, 0, 0.75)'; card.padding = [6, 2]; card.borderWidth = 0.5; card.borderColor = 'rgba(255,255,255,0.6)'; card.borderRadius = 3; // uniform rounded corners // card.borderRadius = [4, 4, 0, 0]; // or per-corner: [tl, tr, br, bl] scene.add(card); ``` -------------------------------- ### Offset Properties Source: https://context7.com/vasturiano/three-spritetext/llms.txt Adjust the horizontal and vertical position of the text content within the sprite using offsetX and offsetY. Values are relative to textHeight. ```APIDOC ## `offsetX` and `offsetY` Properties **`spriteText.offsetX / offsetY`** — Shift the text content horizontally or vertically within the sprite by adding extra canvas margin. Positive `offsetX` shifts right; positive `offsetY` shifts downward. Values are relative to `textHeight`. ### Example Usage ```js const shifted = new SpriteText('Offset label', 8, 'lime'); shifted.offsetX = 5; // shift text right within the sprite bounds shifted.offsetY = -3; // shift text upward scene.add(shifted); ``` ``` -------------------------------- ### textHeight Property Source: https://context7.com/vasturiano/three-spritetext/llms.txt Controls the world-space height of a single line of text. The sprite's scale is computed from this value, ensuring the text remains correctly sized relative to the scene. ```APIDOC ## `textHeight` Property **`spriteText.textHeight`** — Controls the world-space height of a single line of text; the sprite's scale is computed from this value so the text remains correctly sized relative to the scene. ### Parameters - **textHeight** (number) - The desired world-space height for a single line of text. ### Request Example ```javascript const label = new SpriteText('Resize me', 10, 'white'); scene.add(label); // Grow the label on pointer hover label.textHeight = 20; // doubles the rendered size in world units ``` ``` -------------------------------- ### backgroundColor Property Source: https://context7.com/vasturiano/three-spritetext/llms.txt Sets the canvas background fill color. Use `false` for a transparent background, or any CSS color string to fill the area behind the text. ```APIDOC ## `backgroundColor` Property **`spriteText.backgroundColor`** — Sets the canvas background fill color. Use `false` (default) for a transparent background, or any CSS color string to fill the area behind the text. ### Parameters - **backgroundColor** (string | false) - A valid CSS color string or `false` to make the background transparent. ### Request Example ```javascript const badge = new SpriteText('NEW', 6, 'white'); badge.backgroundColor = 'rgba(220, 50, 50, 0.85)'; badge.position.set(5, 5, 0); scene.add(badge); // Revert to transparent background badge.backgroundColor = false; ``` ``` -------------------------------- ### Stroke Properties Source: https://context7.com/vasturiano/three-spritetext/llms.txt Apply a text stroke (outline) around each character of the SpriteText. Configurable with strokeWidth and strokeColor. ```APIDOC ## `strokeWidth` and `strokeColor` Properties **`spriteText.strokeWidth / strokeColor`** — Apply a text stroke (outline) around each character. `strokeWidth` is proportional to the text size; `0` (default) disables stroking. ### Example Usage ```js const outlined = new SpriteText('Outlined', 10, 'yellow'); outlined.strokeWidth = 0.8; outlined.strokeColor = 'black'; scene.add(outlined); ``` ``` -------------------------------- ### Apply Text Stroke to SpriteText Source: https://context7.com/vasturiano/three-spritetext/llms.txt Use strokeWidth and strokeColor to apply an outline to each character. strokeWidth is proportional to text size; a value of 0 disables stroking. ```javascript const outlined = new SpriteText('Outlined', 10, 'yellow'); outlined.strokeWidth = 0.8; outlined.strokeColor = 'black'; scene.add(outlined); ``` -------------------------------- ### Offset SpriteText Content Source: https://context7.com/vasturiano/three-spritetext/llms.txt Use offsetX and offsetY to shift the text content horizontally or vertically within the sprite. Values are relative to textHeight, with positive offsetX shifting right and positive offsetY shifting down. ```javascript const shifted = new SpriteText('Offset label', 8, 'lime'); shifted.offsetX = 5; // shift text right within the sprite bounds shifted.offsetY = -3; // shift text upward scene.add(shifted); ``` -------------------------------- ### fontFace, fontSize, and fontWeight Properties Source: https://context7.com/vasturiano/three-spritetext/llms.txt Control the CSS font used when drawing text onto the canvas. `fontSize` sets the pixel resolution of the internal canvas; higher values yield sharper text at the cost of texture memory. ```APIDOC ## `fontFace`, `fontSize`, and `fontWeight` Properties **`spriteText.fontFace / fontSize / fontWeight`** — Control the CSS font used when drawing text onto the canvas. `fontSize` (default `90`) sets the pixel resolution of the internal canvas — higher values yield sharper text at the cost of texture memory. ### Parameters - **fontFace** (string) - Any CSS font family name (e.g., 'Georgia', 'Arial'). - **fontSize** (number) - The font size in pixels for the internal canvas rendering. Higher values result in sharper text but use more texture memory. - **fontWeight** (string | number) - The font weight. Accepts 'normal', 'bold', or numeric values from '100' to '900'. ### Request Example ```javascript const label = new SpriteText('Bold Serif', 12, 'white'); label.fontFace = 'Georgia'; // any CSS font family label.fontWeight = 'bold'; // 'normal' | 'bold' | '100'–'900' label.fontSize = 120; // higher = sharper texture, more memory scene.add(label); ``` ``` -------------------------------- ### Set SpriteText Background Color Source: https://context7.com/vasturiano/three-spritetext/llms.txt Define a background color for the canvas using 'backgroundColor'. Set to 'false' for a transparent background (default), or use any CSS color string. ```javascript const badge = new SpriteText('NEW', 6, 'white'); badge.backgroundColor = 'rgba(220, 50, 50, 0.85)'; badge.position.set(5, 5, 0); scene.add(badge); // Revert to transparent background badge.backgroundColor = false; ``` -------------------------------- ### Add Padding to SpriteText Source: https://context7.com/vasturiano/three-spritetext/llms.txt Apply padding around the text using the 'padding' property. Accepts a single number for uniform padding or a [horizontal, vertical] tuple. Values are relative to 'textHeight'. ```javascript const label = new SpriteText('Padded', 8, 'white'); label.backgroundColor = 'steelblue'; label.padding = 4; // uniform padding on all sides // or label.padding = [8, 3]; // [horizontal, vertical] padding scene.add(label); ``` -------------------------------- ### Set SpriteText Color Source: https://context7.com/vasturiano/three-spritetext/llms.txt Customize the fill color of the text using the 'color' property. Accepts any valid CSS color string. ```javascript const label = new SpriteText('Colored text', 10); label.color = 'orange'; label.color = '#ff6347'; label.color = 'rgba(0, 200, 255, 0.9)'; scene.add(label); ``` -------------------------------- ### Adjust SpriteText Height Source: https://context7.com/vasturiano/three-spritetext/llms.txt Control the world-space height of text using the 'textHeight' property. This value determines the sprite's scale, ensuring consistent text sizing relative to the scene. ```javascript const label = new SpriteText('Resize me', 10, 'white'); scene.add(label); // Grow the label on pointer hover label.textHeight = 20; // doubles the rendered size in world units ``` -------------------------------- ### Update SpriteText Dynamically Source: https://context7.com/vasturiano/three-spritetext/llms.txt Modify the 'text' property of a SpriteText instance to update its content. The canvas texture re-renders automatically on assignment. Useful for dynamic updates in animation loops. ```javascript const label = new SpriteText('Initial text', 10, 'white'); scene.add(label); // Update text dynamically (e.g., in an animation loop) let frameCount = 0; function animate() { requestAnimationFrame(animate); frameCount++; label.text = `Frame: ${frameCount}`; // canvas re-renders automatically renderer.render(scene, camera); } animate(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.