aframe-troika-text
Advanced tools
This package provides an A-Frame component and primitive for rendering three-dimensional text using Troika's text renderer.
It has similar performance and quality to A-Frame's built-in SDF text component, but brings some additional advantages:
It reads font files directly (ttf, otf, woff) and does not require using an external tool to pre-generate SDF textures with the glyphs you think you'll need.
It supports ligatures so you can use fonts like Material Icons.
Rather than using a fully custom shader, it patches the built-in Three.js material shaders as needed, so you don't lose all the nice standard shader features like lighting and fog.
This package registers both a component (<a-entity troika-text="value:Hello" />) and a primitive (<a-troika-text value="Hello"></a-troika-text>). Use whichever is most convenient for you.
I've attempted to keep the API as close as possible to that of A-Frame's default text component and a-text primitive, however some things don't quite map exactly.
| Property on component | Attribute on primitive | Description | Default Value |
|---|---|---|---|
| align | align | Multi-line text alignment (left, center, right, justify). | left |
| anchor | anchor | Horizontal positioning (left, center, right, align). | center |
| baseline | baseline | Vertical positioning (top, center, bottom). | center |
| clipRect | clip-rect | Four comma- or space-separated numbers defining a rectangle (minX, minY, maxX, maxY) outside which pixels will be hidden. | no clipping |
| color | color | Text color. This is a shortcut for specifying a custom material. | white |
| depthOffset | depth-offset | Depth buffer offset to help prevent z-fighting. Negative numbers are closer to camera, positives further. | 0 |
| font | font | URL to a font file - can be a .ttf, .otf, or .woff (no .woff2) | Roboto loaded from Google Fonts |
| fontSize | font-size | Em-height at which to render the font, in world units | 0.2 |
| letterSpacing | letter-spacing | Letter spacing in meters. | 0 |
| lineHeight | line-height | Line height as a multiple of the fontSize. | derived from font metrics |
| maxWidth | max-width | Maximum width of the text block at which text will start wrapping, in meters. | Infinity (no wrapping) |
| overflowWrap | overflow-wrap | Controls how text wraps: "normal" to break at whitespace characters, or "break-word" to break within words. | normal |
| value | value | The actual content of the text. Line breaks and tabs are supported with \n and \t. | '' |
| whiteSpace | white-space | How whitespace should be handled (i.e., normal, nowrap). | normal (behaves like pre-wrap) |
Note: It does not currently follow how the built-in text component interacts with a geometry component for auto-sizing and anchoring. I think that's a nice feature so it's probably worth adding; in the meantime just use the maxWidth and anchor/baseline attributes to control it manually.
By default the text will render using a MeshBasicMaterial using the color property described in the table above. But you can also change the material to gain more advanced shader features such as physically-based lighting.
If you are using the <a-troika-text> primitive, you can assign it a material component just as you would any other entity.
<a-troika-text
value="Hello!"
material="shader: standard; metalness: 0.8;"
></a-troika-text>
If you are using the troika-text="..." component, you must instead give it a troika-text-material="..." attribute to distinguish the text material from the entity's main material. You can pass it anything supported by the built in material component.
<a-entity
troika-text="value: Hello!"
troika-text-material="shader: standard; metalness: 0.8;"
></a-entity>
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>
</head>
<body>
<a-scene>
<!-- As a component: -->
<a-entity troika-text="value: Hello world!"></a-entity>
<!-- As a primitive: -->
<a-troika-text value="Hello world!"></a-troika-text>
</a-scene>
</body>
Install via npm:
npm install aframe-troika-text
Then require and use.
require('aframe');
require('aframe-troika-text');
FAQs
An A-Frame component to render text using the Troika 3D text renderer
The npm package aframe-troika-text receives a total of 650 weekly downloads. As such, aframe-troika-text popularity was classified as not popular.
We found that aframe-troika-text demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."