Skip to main content

Using Text: Formatting and 3D Fonts

Text category icon

Text is a fundamental way to convey information and add detail to your designs. This tutorial demonstrates two key text operations in Bitbybit:

  1. Formatting Text Strings: How to create dynamic text by inserting values into a template string.
  2. Creating 3D Text Geometry: How to take a string and turn it into a 3D object that can be rendered in your scene.

We'll explore this using Rete (visual nodes), Blockly (visual blocks), and TypeScript (code). All examples will format a personalized greeting and then display that greeting as 3D text.

For detailed information on each text function, please refer to the Text API Documentation.

The Core Idea: From String to 3D Object​

The process involves a few steps:

  1. Prepare Your Text:
    • Define the base string you want to display.
    • Use the text.format() method to insert dynamic values (like names or adjectives) into placeholders within your string (e.g., "Hi {0}, you are {1}!").
  2. Generate 3D Text:
    • Use the advanced.text3d.create() method (from the bitbybit.advanced.text3d namespace) to convert your formatted string into 3D geometry.
    • This method allows you to specify the text content, font type, size, thickness (height), rotation, and other parameters to customize the appearance of the 3D text.
  3. Draw the 3D Text:
    • Use draw.drawAnyAsync() to render the generated 3D text object in the scene.
3D Text Feature

The advanced.text3d.create() functionality for generating 3D text geometry is part of Bitbybit's advanced, proprietary features. While you can use it freely within the bitbybit.dev platform and via our Runners, its source code is not open. The basic text formatting functions (like text.format()) are part of the open-source @bitbybit-dev/base package.

Live Examples​

Click through the tabs below to see the implementation. Each example will create the text "Hi John, you are awesome!" and display it as a 3D model.

Bitbybit Platform

Text Formatting And 3D Fonts

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "e51f1cebbbae25d4": {
      "id": "e51f1cebbbae25d4",
      "name": "bitbybit.text.format",
      "customName": "format",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "text": "Hi {0}, you are {1}!",
        "values": [
          "World"
        ]
      },
      "inputs": {
        "values": {
          "connections": [
            {
              "node": "f4eb250a27a91bba",
              "output": "list",
              "data": {}
            }
          ]
        }
      },
      "position": [
        399.1515481894714,
        317.67783254941753
      ]
    },
    "f4eb250a27a91bba": {
      "id": "f4eb250a27a91bba",
      "name": "bitbybit.lists.createList",
      "customName": "create list",
      "data": {},
      "inputs": {
        "listElements": {
          "connections": [
            {
              "node": "0b2160a0ad9c8877",
              "output": "result",
              "data": {}
            },
            {
              "node": "d258ec68e21669ea",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        28.52019681370868,
        393.87997844264095
      ]
    },
    "d258ec68e21669ea": {
      "id": "d258ec68e21669ea",
      "name": "bitbybit.text.create",
      "customName": "create",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "text": "awesome"
      },
      "inputs": {},
      "position": [
        -431.5143578525457,
        444.65038651781117
      ]
    },
    "0b2160a0ad9c8877": {
      "id": "0b2160a0ad9c8877",
      "name": "bitbybit.text.create",
      "customName": "create",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "text": "John"
      },
      "inputs": {},
      "position": [
        -431.2924713328231,
        184.24991413435163
      ]
    },
    "a90e6a83f49020c6": {
      "id": "a90e6a83f49020c6",
      "name": "bitbybit.advanced.text3d.create",
      "customName": "text 3d",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "text": "bitbybit.dev",
        "fontType": "Roboto",
        "fontVariant": "Regular",
        "fontSize": 2,
        "height": 0.2,
        "rotation": 180,
        "origin": [
          0,
          0,
          0
        ],
        "direction": [
          0,
          1,
          0
        ],
        "originAlignment": "centerMiddle"
      },
      "inputs": {
        "text": {
          "connections": [
            {
              "node": "e51f1cebbbae25d4",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        778.5000526533418,
        314.427689068662
      ]
    }
  }
}

Conclusion​

This tutorial covered two useful text operations:

  • String formatting using text.format() allows for dynamic text content.
  • 3D text creation using advanced.text3d.create() enables you to bring text into your 3D scenes as physical geometry.

Experiment with different template strings, values, fonts, and 3D text parameters to customize your textual elements in Bitbybit!