Skip to main content

Dimensions and camera navigation

These two parts of bitbybit.advanced work on the scene rather than on the model: dimensions annotate what is drawn, and navigation moves the camera. Both are platform algorithms that work for everyone (Advanced), with BabylonJS on bitbybit.dev and in its runner.

Dimensions​

A dimension is a measurement drawn in the scene: thin lines, arrowheads and a label with the measured value. The five kinds are linearDimension (the distance between two points), angularDimension (the angle between two directions from a center), radialDimension and diametralDimension (a circle's radius or diameter) and ordinateDimension (one coordinate of a point measured from an origin).

Each of them describes the dimension and returns it; drawing it is a separate step, with bitbybit.draw.drawAnyAsync as for any other entity. Here a box gets its width:

Bitbybit Platform

A box with its width dimensioned 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": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "width": 4,
        "length": 2,
        "height": 1.5,
        "center": [
          0,
          0,
          0
        ],
        "originOnCenter": true
      },
      "inputs": {},
      "position": [
        40,
        40
      ]
    },
    "width": {
      "id": "width",
      "name": "bitbybit.advanced.dimensions.linearDimension",
      "customName": "linear dimension",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "startPoint": [
          -2,
          0.75,
          1
        ],
        "endPoint": [
          2,
          0.75,
          1
        ],
        "direction": [
          0,
          0.6,
          0
        ],
        "labelOffset": 0.1,
        "decimalPlaces": 2,
        "labelSuffix": "mm",
        "labelOverwrite": "1*val",
        "removeTrailingZeros": true
      },
      "inputs": {},
      "position": [
        460,
        40
      ]
    }
  },
  "modules": {}
}

direction lifts the dimension line off the measured points, and extension lines run from each point to it. The label reads the value with decimalPlaces, labelSuffix after it and removeTrailingZeros to drop zeros; labelOverwrite is an expression in val, so val*10 shows ten times the value. The value is in model units, and an angular dimension's value is in radians: show degrees with labelOverwrite set to val*57.29578. dimensionStyle makes one style of colors, line thickness, arrow and text sizes for several dimensions.

Camera navigation​

The camera moves animate the active arc-rotate camera, the camera that orbits a target point, over animationSpeed seconds along an easing curve:

  • flyTo flies to a camera position and target;
  • zoomOn and zoomOnAspect frame a list of meshes, keeping the viewing angle;
  • focusFromAngle looks at meshes from a direction you give.

pointOfInterest describes a clickable marker, a sphere in a pulsing ring with a label, that flies the camera to a saved view when clicked; draw it with bitbybit.draw.drawAnyAsync, and style it with pointOfInterestStyle. Markers placed around a model make a guided tour of it.

Every function​

Dimensions​

FunctionWhat it does
angularDimensionDescribes a dimension showing the angle between two directions from a center point, ready to draw.
diametralDimensionDescribes a dimension showing a circle's diameter as a line across its full width, ready to draw.
dimensionStyleBuilds the look of a dimension: the colors and sizes of its lines, arrowheads and label.
drawAngularDimensionAdds an angular dimension to the scene as tube lines, cone arrowheads and a text label.
drawDiametralDimensionAdds a diametral dimension to the scene as tube lines, cone arrowheads and a text label.
drawLinearDimensionAdds a linear dimension to the scene as tube lines, cone arrowheads and a text label.
drawOrdinateDimensionAdds an ordinate dimension to the scene as tube lines, cone arrowheads and a text label.
drawRadialDimensionAdds a radial dimension to the scene as tube lines, cone arrowheads and a text label.
linearDimensionDescribes a dimension that shows the straight-line distance between two points, ready to draw.
ordinateDimensionDescribes a dimension showing a point's distance from a reference point along one axis, ready to draw.
radialDimensionDescribes a dimension showing the radius of a circle or arc from its center, ready to draw.
FunctionWhat it does
drawPointOfInterestAdds a point of interest to the scene and makes it answer hover and click.
flyToFlies the camera to a new position and target, the same motion a clicked point of interest uses.
focusFromAngleAnimates the camera to look at the given meshes from a chosen direction.
pointOfInterestDescribes a clickable marker that flies the camera to a saved view, ready to draw.
pointOfInterestStyleBuilds the look of a point of interest: its sphere, pulsing ring and label, normal and under the pointer.
zoomOnAnimates the camera so the given meshes fill the view, keeping its viewing angle.
zoomOnAspectAnimates the camera so the meshes fit the view's width and height, keeping its viewing angle.