Skip to main content

Applying Colors to 3D Geometry

Color category icon

Colors are essential for visualizing and differentiating objects in your 3D scenes. This tutorial demonstrates how to:

  1. Create colors: Using different methods from the Color class.
  2. Apply these colors: To the faces and edges of a 3D shape (a cube in this case).

We'll explore this using Rete (visual nodes), Blockly (visual blocks), and TypeScript (code). All examples will draw a cube and allow you to dynamically change its face color while keeping its edge color fixed.

For detailed information on each color function, please refer to the Color API Documentation.

The Core Idea: Defining and Using Colors​

Bitbybit primarily uses hexadecimal (hex) color strings (e.g., #FF0000 for red) when applying colors to drawn objects. The Color class provides tools to:

  • Directly define a hex color: If you know the hex code.
  • Convert RGB to Hex: If you have Red, Green, and Blue (RGB) values, you can convert them into a hex string. This is useful for creating colors programmatically or dynamically.

In these examples, we'll:

  • Create a cube using OpenCascade Technology (OCCT) via bitbybit.occt.shapes.solid.createCube.
  • Use bitbybit.color.rgbToHex to dynamically create a hex color for the cube's faces.
  • Use bitbybit.color.hexColor to define a fixed hex color for the cube's edges.
  • Apply these colors when drawing the cube using bitbybit.draw.drawAnyAsync with appropriate drawing options.

Live Examples​

Click through the tabs below to see the implementation. You can interact with the "Number Slider" in the Rete example or change the colorParam in Blockly/TypeScript to see the cube's face color update.

Bitbybit Platform

Color Usage Example

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "1edcd326bca71db9": {
      "id": "1edcd326bca71db9",
      "name": "bitbybit.math.numberSlider",
      "customName": "number slider",
      "data": {
        "options": {
          "min": 0,
          "max": 255,
          "step": 0.1,
          "width": 350,
          "updateOnDrag": false
        },
        "number": 71.1
      },
      "inputs": {},
      "position": [
        180.19574181641272,
        1338.7582581486993
      ]
    },
    "769e2845f3e8f14e": {
      "id": "769e2845f3e8f14e",
      "name": "bitbybit.color.rgbToHex",
      "customName": "rgb to hex",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "r": 255,
        "g": 0,
        "b": 255,
        "min": 0,
        "max": 255
      },
      "inputs": {
        "r": {
          "connections": [
            {
              "node": "1edcd326bca71db9",
              "output": "result",
              "data": {}
            }
          ]
        },
        "b": {
          "connections": [
            {
              "node": "1edcd326bca71db9",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        699.3462246539564,
        1252.9838222454043
      ]
    },
    "bcdc3b70d3a8359a": {
      "id": "bcdc3b70d3a8359a",
      "name": "bitbybit.occt.shapes.solid.createCube",
      "customName": "cube",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "size": 6,
        "center": [
          0,
          0,
          0
        ],
        "originOnCenter": true
      },
      "inputs": {},
      "position": [
        1125.2182618459733,
        824.1816189607747
      ]
    },
    "6ca6ab70637cce68": {
      "id": "6ca6ab70637cce68",
      "name": "bitbybit.draw.drawAnyAsync",
      "customName": "draw any async",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        }
      },
      "inputs": {
        "options": {
          "connections": [
            {
              "node": "ea659597d36f4c4a",
              "output": "result",
              "data": {}
            }
          ]
        },
        "entity": {
          "connections": [
            {
              "node": "bcdc3b70d3a8359a",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1608.9491866799408,
        972.1859613807756
      ]
    },
    "ea659597d36f4c4a": {
      "id": "ea659597d36f4c4a",
      "name": "bitbybit.draw.optionsOcctShapeSimple",
      "customName": "options occt shape simple",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "precision": 0.01,
        "drawFaces": true,
        "faceColour": "#ff0000",
        "drawEdges": true,
        "edgeColour": "#ffffff",
        "edgeWidth": 10
      },
      "inputs": {
        "faceColour": {
          "connections": [
            {
              "node": "769e2845f3e8f14e",
              "output": "result",
              "data": {}
            }
          ]
        },
        "edgeColour": {
          "connections": [
            {
              "node": "005c5f3ae7cc62fd",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1118.9540120112902,
        1174.0527117682532
      ]
    },
    "005c5f3ae7cc62fd": {
      "id": "005c5f3ae7cc62fd",
      "name": "bitbybit.color.hexColor",
      "customName": "hex color",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "color": "#ffffff"
      },
      "inputs": {},
      "position": [
        698.0846241884296,
        1673.970997209529
      ]
    }
  }
}

Conclusion​

These examples illustrate basic yet powerful ways to manage and apply colors in Bitbybit.

  • For static colors, defining them directly as hex strings (optionally via color.hexColor) is straightforward.
  • For dynamic or programmatically generated colors, converting from RGB values (using color.rgbToHex) provides great flexibility.

Experiment with different RGB values and hex codes to explore the color possibilities for your 3D creations!