Skip to main content

Advanced: 3D text and patterns

bitbybit.advanced holds tools that do in one call what would take many steps of the open-source API:

  • text3d: letters built from the outlines of real fonts, standing free or laid onto a face;
  • patterns: pyramids raised over the cells of a face;
  • dimensions: measurement annotations, and navigation: camera moves and points of interest, both on their own page.

These are platform algorithms: their source is closed, and they run in the editors on bitbybit.dev and in the runners, not in the npm packages. Most of them work for everyone. The pyramid patterns compute only for members of the Silver and Gold plans; without a plan they stop the run with a message that says so (Plans).

3D text​

text3d.create builds a text from one of the shipped fonts: fontType is the family and fontVariant its weight or style, and not every family has every variant. The letters are drawn on the XZ plane and extruded along Y by height in model units; a height of 0 gives flat letter faces instead of solids. The text is then turned by rotation degrees about Y, its Y axis is turned to direction, and the point originAlignment picks lands on origin.

Here a word stands up and faces the viewer: direction points it along -Z and rotation turns the letters upright:

Bitbybit Platform

A name in 3D text in Rete

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "facing": {
      "id": "facing",
      "name": "bitbybit.vector.vectorXYZ",
      "customName": "vector xyz",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "x": 0,
        "y": 0,
        "z": -1
      },
      "inputs": {},
      "position": [
        40,
        40
      ]
    },
    "text": {
      "id": "text",
      "name": "bitbybit.advanced.text3d.create",
      "customName": "text 3d",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "text": "bitbybit",
        "fontType": "Roboto",
        "fontVariant": "Regular",
        "fontSize": 1.5,
        "height": 0.4,
        "rotation": -90,
        "origin": [
          0,
          0,
          0
        ],
        "direction": [
          0,
          1,
          0
        ],
        "originAlignment": "centerBottom"
      },
      "inputs": {
        "direction": {
          "connections": [
            {
              "node": "facing",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        460,
        40
      ]
    }
  },
  "modules": {}
}

The result is a text model, not one shape. getCompoundShape gives the whole text as one shape to fillet, cut, export or draw, getCharacterShapes one shape per character with an outline (spaces have none), and getCharacterCenterCoordinates their centers.

Text on a face​

createTextOnFace lays the text onto a face so that it follows the surface, curved faces included. It is placed in the face's own UV space: fontSize is measured in the face's U and V values, and originParamU and originParamV place the anchor as fractions of the face's range. faceTextVar chooses what comes back: the letters alone, raised letters sewn into the face, or the face with the letters cut out. getFaceCutout and its siblings then read the faces left after the cut, the islands inside letters such as the inside of an O among them.

createTextsOnFace puts several texts on one face in one result, each prepared with definition3dTextOnFace.

On bitbybit.dev with BabylonJS, the methods ending in Url do the same with a font file of your own, loaded from a URL: TTF, OTF or WOFF.

Patterns on faces​

patterns.facePatterns.pyramidSimple.createPyramidSimple splits each face evenly over its UV range into uNumber by vNumber cells and raises a four-sided pyramid on every cell, height model units along the surface normal; a negative height points the other way. createPyramidSimpleAffectors varies the heights with attractor points: a cell within an affector's radius rises more the closer it is.

The getters read the result: the compound of all pyramids, the pyramids of one face or one cell, the cells with their corner points and center points, and the polylines of the grid in U and V.

Every function​

3D text​

FunctionWhat it does
createBuilds a text from one of the shipped fonts as flat letter faces or extruded letter solids.
createTextOnFaceLays a text from one of the shipped fonts onto a face so that it follows the surface.
createTextOnFaceUrlLays a text from a font file loaded from a URL onto a face so that it follows the surface.
createTextsOnFaceLays several texts onto one face in a single result, each with its own font, size, placement and style.
createTextsOnFaceUrlLays several texts, each with a font file loaded from its own URL, onto one face in a single result.
createWithUrlBuilds a text from a font file loaded from a URL, as flat letter faces or extruded letter solids.
definition3dTextOnFacePacks the settings of one text into a definition for createTextsOnFace.
definition3dTextOnFaceUrlPacks the settings of one text with a font URL into a definition for createTextsOnFaceUrl.
drawModelDraws a text model in the scene with white faces and brown edges.
getAdvanceWidthReturns how far the text advances along its line, as the font's spacing sets it at the chosen size.
getAllFacesOfCutoutReturns every face left after cutting the letters out of the face, including the pieces inside letters.
getCharacterCenterCoordinatesReturns the center of each character of a text model as a point.
getCharacterShapeReturns the shape of one character of a text model.
getCharacterShapesReturns the shape of every character of a text model that has an outline.
getCompoundShapeReturns the single shape that holds the whole result of a text model.
getCutoutsInsideCharactersReturns the pieces of the face that stay enclosed inside characters after the letters are cut out.
getFaceCutoutReturns the main face left after cutting the letters out of the face a text was placed on.

Patterns​

FunctionWhat it does
facePatterns.pyramidSimple.createPyramidSimpleRaises a pyramid of the same height on every cell of a U by V grid over each face.
facePatterns.pyramidSimple.createPyramidSimpleAffectorsRaises a pyramid on every cell of a U by V grid over each face, with heights shaped by attractor points.
facePatterns.pyramidSimple.drawModelDraws a pyramid model in the scene with white faces and brown edges.
facePatterns.pyramidSimple.getAllPyramidCellsReturns the cells of every face of a pyramid model as one flat list, face after face.
facePatterns.pyramidSimple.getAllPyramidCellsOnFaceReturns the cells of one face of a pyramid model.
facePatterns.pyramidSimple.getAllPyramidUCellsOnFaceReturns the cells of one face of a pyramid model, the same list getAllPyramidCellsOnFace returns.
facePatterns.pyramidSimple.getAllPyramidUCellsOnFaceAtUReturns the cells of one face that share a U index, a row of cells running along V.
facePatterns.pyramidSimple.getAllPyramidUCellsOnFaceAtVReturns the cells of one face that share a V index, a row of cells running along U.
facePatterns.pyramidSimple.getCellOnIndexReturns the cell at one U and V index on one face of a pyramid model.
facePatterns.pyramidSimple.getCenterPointsOfCellsReturns the center of each given cell, the average of its four corner points.
facePatterns.pyramidSimple.getCompoundShapeReturns the single compound that holds every pyramid on every face of a pyramid model.
facePatterns.pyramidSimple.getCompoundShapeCellOnFaceReturns the pyramid of one cell on one face as a compound of its triangular sides.
facePatterns.pyramidSimple.getCompoundShapeOnFaceReturns the compound of the pyramids on one face of a pyramid model.
facePatterns.pyramidSimple.getCompoundShapesOfCellsReturns the pyramid of each given cell as a compound of its triangular sides.
facePatterns.pyramidSimple.getCornerNormalOfCellsReturns the surface normal stored at one chosen corner of each given cell.
facePatterns.pyramidSimple.getCornerNormalsOfCellsReturns the surface normals stored at the corners of each given cell.
facePatterns.pyramidSimple.getCornerPointOfCellsReturns one chosen corner point of each given cell.
facePatterns.pyramidSimple.getCornerPointsOfCellsReturns the four corner points of each given cell.
facePatterns.pyramidSimple.getEndPolylineWireUReturns the grid polyline at the end of a face's U range, running along V.
facePatterns.pyramidSimple.getEndPolylineWireVReturns the grid polyline at the end of a face's V range, running along U.
facePatterns.pyramidSimple.getFaceShapesOfCellsReturns one triangular side of each given cell's pyramid.
facePatterns.pyramidSimple.getPolylineWiresUCompoundReturns every grid polyline of constant U on a face, each running along V, as one compound.
facePatterns.pyramidSimple.getPolylineWiresVCompoundReturns every grid polyline of constant V on a face, each running along U, as one compound.
facePatterns.pyramidSimple.getStartPolylineWireUReturns the grid polyline at the start of a face's U range, running along V.
facePatterns.pyramidSimple.getStartPolylineWireVReturns the grid polyline at the start of a face's V range, running along U.
facePatterns.pyramidSimple.getTopPointsOfCellsReturns the apex point of each given cell.
facePatterns.pyramidSimple.getWireShapesOfCellsReturns the closed triangular outline of one side of each given cell's pyramid.