All Projects → vasturiano → Three Spritetext

vasturiano / Three Spritetext

Licence: mit
A sprite based text component for ThreeJS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Three Spritetext

aframe-bmfont-text-component
A-Frame component for rendering bitmap fonts.
Stars: ✭ 62 (-41.51%)
Mutual labels:  threejs, text
Three Csgmesh
Conversion of a CSG library for use with modern THREE.js
Stars: ✭ 101 (-4.72%)
Mutual labels:  threejs
Sky Shader
☀️ WebGL sky and sun shader editor
Stars: ✭ 90 (-15.09%)
Mutual labels:  threejs
Threejs Example For Miniprogram
这是一个 three.js 在微信小程序里的使用示例
Stars: ✭ 96 (-9.43%)
Mutual labels:  threejs
Completely
Java autocomplete library.
Stars: ✭ 90 (-15.09%)
Mutual labels:  text
Qake
Qake voxel-engine demo
Stars: ✭ 100 (-5.66%)
Mutual labels:  threejs
Threejs Starter
Stars: ✭ 89 (-16.04%)
Mutual labels:  threejs
Left
Distractionless Writing Tool
Stars: ✭ 1,538 (+1350.94%)
Mutual labels:  text
Cda Locale
Showing Microsoft Cloud Developer Advocates speaking, 2017 and 2018
Stars: ✭ 101 (-4.72%)
Mutual labels:  threejs
Fe Daily Record
📚前端书籍汇集点 + 每日好文推荐 + 公开课学习资料 + 各种大会资料
Stars: ✭ 94 (-11.32%)
Mutual labels:  threejs
Import Three Examples
this is webpack plugin, It was created to solve the problem of threeJs modular development.
Stars: ✭ 94 (-11.32%)
Mutual labels:  threejs
Awesome Aframe
[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
Stars: ✭ 1,310 (+1135.85%)
Mutual labels:  threejs
Roguebot
My simple rogue-like game for Telegram
Stars: ✭ 100 (-5.66%)
Mutual labels:  text
Sms Bomber
A very, very simple sms bomber written in python and now java. You can adjust the amount of texts sent, and the interval at which they are sent (if you want any). For educational purposes only.
Stars: ✭ 91 (-14.15%)
Mutual labels:  text
React 3d Viewer
A 3D model viewer component based on react.js 一个基于react.js的组件化3d模型查看工具
Stars: ✭ 100 (-5.66%)
Mutual labels:  threejs
Ternion
A simple starter kit to prototype quickly your ideas with Three.js
Stars: ✭ 89 (-16.04%)
Mutual labels:  threejs
Hlviewer.js
Half-Life in WebGL
Stars: ✭ 93 (-12.26%)
Mutual labels:  threejs
Gradient Screens
🌈 Gradients applied to buttons, texts and backgrounds in Flutter
Stars: ✭ 97 (-8.49%)
Mutual labels:  text
Portfolio
💼 My personal portfolio built with React and three.js.
Stars: ✭ 106 (+0%)
Mutual labels:  threejs
Whoosh
[Prototype] Control a 3D spaceship with hand movements
Stars: ✭ 104 (-1.89%)
Mutual labels:  threejs

three-spritetext

NPM package Build Size Dependencies

A sprite based text component for ThreeJS. The text is drawn to canvas, converted into a Texture and then used as a material on a Sprite. Because a sprite is being used, the text will always face the camera, and has its orientation fixed relative to the camera.

Quick start

import SpriteText from 'three-spritetext';

or

var SpriteText = require('three-spritetext');

or even

<script src="//unpkg.com/three-spritetext"></script>

then

var myText = new SpriteText('My text');

var myScene = new THREE.Scene();
myScene.add(myText);

API reference

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

Giving Back

paypal If this project has helped you and you'd like to contribute back, you can always buy me a ☕!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].