Skip to main content

Technical drawings from a model

A technical drawing shows a part from one direction as lines: the edges the eye sees, and often the edges hidden behind faces, drawn thinner or dashed. bitbybit.occt.operations.hiddenLines makes that drawing from any shape and any view, flat on the ground plane, ready to draw in the scene or to export as SVG or DXF.

Here a box with a hole through it is seen from a corner. The drawing lies on the ground in front of the part, its visible edges white and thick and its hidden edges thin and grey:

Bitbybit Platform

A part and its hidden-line drawing in Rete

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "box": {
      "id": "box",
      "name": "bitbybit.occt.shapes.solid.createBox",
      "customName": "box",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "width": 4,
        "length": 3,
        "height": 2,
        "center": [
          0,
          1,
          -6
        ],
        "originOnCenter": true
      },
      "inputs": {},
      "position": [
        40,
        40
      ]
    },
    "hole": {
      "id": "hole",
      "name": "bitbybit.occt.shapes.solid.createCylinder",
      "customName": "cylinder",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "radius": 0.6,
        "height": 3,
        "center": [
          0,
          -0.5,
          -6
        ],
        "direction": [
          0,
          1,
          0
        ],
        "angle": 360,
        "originOnCenter": false
      },
      "inputs": {},
      "position": [
        40,
        520
      ]
    },
    "tools": {
      "id": "tools",
      "name": "bitbybit.lists.createList",
      "customName": "create list",
      "async": false,
      "drawable": false,
      "data": {},
      "inputs": {
        "listElements": {
          "connections": [
            {
              "node": "hole",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        460,
        520
      ]
    },
    "part": {
      "id": "part",
      "name": "bitbybit.occt.booleans.difference",
      "customName": "difference",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "keepEdges": false,
        "strategy": "oneAfterAnother"
      },
      "inputs": {
        "shape": {
          "connections": [
            {
              "node": "box",
              "output": "result",
              "data": {}
            }
          ]
        },
        "shapes": {
          "connections": [
            {
              "node": "tools",
              "output": "list",
              "data": {}
            }
          ]
        }
      },
      "position": [
        460,
        40
      ]
    },
    "view": {
      "id": "view",
      "name": "bitbybit.frame.create",
      "customName": "frame",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "origin": [
          0,
          1,
          -6
        ],
        "normal": [
          1,
          1,
          1
        ],
        "direction": [
          1,
          0,
          -1
        ]
      },
      "inputs": {},
      "position": [
        460,
        800
      ]
    },
    "drawing": {
      "id": "drawing",
      "name": "bitbybit.occt.operations.hiddenLines",
      "customName": "hidden lines",
      "async": true,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "exact": true,
        "smoothEdges": false,
        "hiddenEdges": true,
        "focus": 0,
        "precision": 0.01
      },
      "inputs": {
        "shape": {
          "connections": [
            {
              "node": "part",
              "output": "result",
              "data": {}
            }
          ]
        },
        "frame": {
          "connections": [
            {
              "node": "view",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        880,
        40
      ]
    },
    "visible": {
      "id": "visible",
      "name": "bitbybit.json.getValueOnProp",
      "customName": "get value on prop",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "property": "visible"
      },
      "inputs": {
        "json": {
          "connections": [
            {
              "node": "drawing",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1300,
        40
      ]
    },
    "hidden": {
      "id": "hidden",
      "name": "bitbybit.json.getValueOnProp",
      "customName": "get value on prop",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "property": "hidden"
      },
      "inputs": {
        "json": {
          "connections": [
            {
              "node": "drawing",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1300,
        400
      ]
    },
    "bright": {
      "id": "bright",
      "name": "bitbybit.draw.optionsOcctShape",
      "customName": "options occt shape",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "faceOpacity": 1,
        "edgeOpacity": 1,
        "edgeColour": "#ffffff",
        "faceColour": "#ff0000",
        "vertexColour": "#ff00ff",
        "edgeWidth": 3,
        "vertexSize": 0.03,
        "drawEdges": true,
        "drawFaces": true,
        "drawVertices": false,
        "precision": 0.01,
        "angularDeflection": 0.5,
        "relativeDeflection": false,
        "drawEdgeIndexes": false,
        "edgeIndexHeight": 0.06,
        "edgeIndexColour": "#ff00ff",
        "drawFaceIndexes": false,
        "faceIndexHeight": 0.06,
        "faceIndexColour": "#0000ff",
        "drawTwoSided": true,
        "backFaceColour": "#0000ff",
        "backFaceOpacity": 1,
        "edgeArrowSize": 0,
        "edgeArrowAngle": 15,
        "keepMeshData": false,
        "allowQualityDecrease": true,
        "forceFaceDeflection": false,
        "drawIsoCurves": false,
        "isoCurvesU": 5,
        "isoCurvesV": 5,
        "isoCurvesColour": "#808080",
        "surfaceAnalysis": "none",
        "draftDirection": [
          0,
          1,
          0
        ]
      },
      "inputs": {},
      "position": [
        1300,
        760
      ]
    },
    "drawVisible": {
      "id": "drawVisible",
      "name": "bitbybit.draw.drawAnyAsync",
      "customName": "draw any async",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        }
      },
      "inputs": {
        "entity": {
          "connections": [
            {
              "node": "visible",
              "output": "result",
              "data": {}
            }
          ]
        },
        "options": {
          "connections": [
            {
              "node": "bright",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1720,
        40
      ]
    },
    "grey": {
      "id": "grey",
      "name": "bitbybit.draw.optionsOcctShape",
      "customName": "options occt shape",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "faceOpacity": 1,
        "edgeOpacity": 1,
        "edgeColour": "#7a7a7a",
        "faceColour": "#ff0000",
        "vertexColour": "#ff00ff",
        "edgeWidth": 1,
        "vertexSize": 0.03,
        "drawEdges": true,
        "drawFaces": true,
        "drawVertices": false,
        "precision": 0.01,
        "angularDeflection": 0.5,
        "relativeDeflection": false,
        "drawEdgeIndexes": false,
        "edgeIndexHeight": 0.06,
        "edgeIndexColour": "#ff00ff",
        "drawFaceIndexes": false,
        "faceIndexHeight": 0.06,
        "faceIndexColour": "#0000ff",
        "drawTwoSided": true,
        "backFaceColour": "#0000ff",
        "backFaceOpacity": 1,
        "edgeArrowSize": 0,
        "edgeArrowAngle": 15,
        "keepMeshData": false,
        "allowQualityDecrease": true,
        "forceFaceDeflection": false,
        "drawIsoCurves": false,
        "isoCurvesU": 5,
        "isoCurvesV": 5,
        "isoCurvesColour": "#808080",
        "surfaceAnalysis": "none",
        "draftDirection": [
          0,
          1,
          0
        ]
      },
      "inputs": {},
      "position": [
        1720,
        760
      ]
    },
    "drawHidden": {
      "id": "drawHidden",
      "name": "bitbybit.draw.drawAnyAsync",
      "customName": "draw any async",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        }
      },
      "inputs": {
        "entity": {
          "connections": [
            {
              "node": "hidden",
              "output": "result",
              "data": {}
            }
          ]
        },
        "options": {
          "connections": [
            {
              "node": "grey",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        2140,
        400
      ]
    }
  },
  "modules": {}
}

The view​

The view is a frame (see Frames). The eye sits on the side the frame's normal points to and looks back along it, and the drawing's x runs along the frame's direction. A normal of [0, 0, 1] gives a front view, [0, 1, 0] a plan from above, [1, 1, 1] the corner view of the example. The drawing is centered on the frame's origin, so put the origin at the part's middle.

hiddenLines returns two compounds of edges: visible and hidden. Its options:

  • hiddenEdges (true) collects the hidden edges; with false, hidden stays empty.
  • smoothEdges (false) also draws the edges where faces meet without a crease, such as the borders of a fillet.
  • focus (0) gives a perspective view from that distance; 0 is a parallel view, as technical drawings use.
  • exact (true) works from the exact geometry; false works from a mesh, which is faster for big models and draws parallel views only.

SVG​

bitbybit.occt.io.saveShapeSvg draws the same view straight into an SVG file and downloads it, with the hidden edges dashed when drawHidden is true. saveShapeSvgAndReturn returns the SVG text as well, to show on a page or send elsewhere. Both take the shape and the frame, not the result of hiddenLines.

DXF​

The drawing lies flat on the ground plane, which is what the DXF export needs. Turn each compound into paths with bitbybit.occt.io.shapeToDxfPaths, put each on its own layer with dxfPathsWithLayer (the visible edges on one layer in black, the hidden ones on another in grey) and write the file with dxfCreate. CAD programs then show, hide or restyle each layer. DXF drawings walks through the DXF steps on text and patterns.

Sections through a part, which drawings often show beside the views, are on Sections and slices.