Skip to content

A text component for A-Frame that wraps THREE.TextTexture

License

Notifications You must be signed in to change notification settings

antoniohof/aframe-text-texture-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aframe-text-texture-component

A light text component for A-Frame that wraps THREE.TextTexture. Attention: Only compatible with THREE.TextTexture version 18.8.6

https://unpkg.com/[email protected]/THREE.TextTexture.js

  • supports unicode
  • supports outline
  • supports padding, line height and text align
  • supports transparency

Example

Try it

Usage

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://unpkg.com/[email protected]/THREE.TextTexture.js"></script>
  <script src="https://antoniohof.github.io/aframe-text-texture-component/dist/aframe-text-texture-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity text-texture="text: Texture Based Text with accented characters (á, ã, â...); scale: 1.5" position="0 0 -10"> </a-entity>
  </a-scene>
</body>

Parameters

    autoRedraw: {
      default: true,
      type: "boolean"
    },
    text: {
      default: "",
      type: "string"
    },
    textAlign: {
      default: "center",
      oneOf: ["center", "left", "right"],
      type: "string"
    },
    textLineHeight: { default: 1 },
    fontFamily: {
      default: 'Open Sans',
      type: "string"
    },
    fontSize: {
      default: 60,
      min: 1,
      max: 128,
      type: "int"
    },
    fontWeight: {
      default: "normal",
      oneOf: ["normal", "bold"],
      type: "string"
    },
    fontVariant: {
      default: "normal",
      oneOf: ["normal", "small-caps"],
      type: "string"
    },
    fontStyle: {
      default: "normal",
      oneOf: ["normal", "italic"],
      type: "string"
    },
    padding: {
      default: 0.25,
      min: 0,
      max: 1,
      type: "number"
    },
    fillStyle: {
      default: "#fff",
      type: "color"
    },
    lineWidth: {
      default: 0,
      min: 0,
      max: 0.5,
      type: "number"
    },
    strokeStyle: {
      default: "#fff",
      type: "color"
    },
    opacity: {
      default: "1",
      min: 0,
      max: 1,
      type: "number"
    },
    scale: {
      default: 1,
      type: "number"
    }