BabylonJS Full Runner
The full runner bundles Babylon.js together with Bitbybit, so you don't need to load Babylon.js separately. This makes setup simpler but results in a larger bundle size.
Live Example
Complete Example
Below is a complete example that creates a parametric lofted surface with rectangle holes using OCCT:
<!doctype html>
<html lang="en">
<head>
<title>Bitbybit Runner BabylonJS Full Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load the full BabylonJS runner (includes BabylonJS) -->
<script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@latest/runner/bitbybit-runner-babylonjs.js"></script>
<script>
// Timeout ensures canvas element is available
setTimeout(async () => {
const runnerOptions = {
canvasId: 'myCanvas',
canvasZoneClass: 'myCanvasZone',
enableOCCT: true,
enableJSCAD: false,
enableManifold: false,
cameraPosition: [20, 10, 20],
cameraTarget: [10, 5, 0],
backgroundColor: "#1a1c1f",
loadFonts: ['Roboto'],
};
const runner = window.bitbybitRunner.getRunnerInstance();
const { bitbybit, Bit, BABYLON, GUI, scene } = await runner.run(
runnerOptions
);
// Model parameters
const model = {
uRec: 16,
vRec: 16,
rounding: 0.5,
drawEdges: true,
drawFaces: true,
color: '#6600ff'
}
// Create curve points for lofting
const curvePts = [
[[-10, 0, -10], [0, 3, -10], [10, -1, -10], [20, 2, -10]],
[[-10, -5, 0], [0, -3, 0], [10, 1, 0], [20, -2, 0]],
[[-10, 0, 10], [0, 3, 10], [10, -1, 10], [20, 2, 10]]
];
// Create wires from interpolated points
const wirePromises = curvePts.map((pts) => {
return bitbybit.occt.shapes.wire.interpolatePoints({
points: pts, periodic: false, tolerance: 1e-7
});
});
const wires = await Promise.all(wirePromises);
const loft = await bitbybit.occt.operations.loft({ shapes: wires, makeSolid: false });
const translated = await bitbybit.occt.transforms.translate({ shape: loft, translation: [0, 10, 0] });
const faces = await bitbybit.occt.shapes.face.getFaces({ shape: translated });
// Subdivide face with rectangle holes
const subdivideOptions = new Bit.Inputs.OCCT.FaceSubdivideToRectangleHolesDto(faces[0]);
subdivideOptions.nrRectanglesU = model.vRec;
subdivideOptions.nrRectanglesV = model.uRec;
subdivideOptions.scalePatternU = [0.9, 0.5, 0.7];
subdivideOptions.scalePatternV = [0.9, 0.5, 0.7];
subdivideOptions.filletPattern = [model.rounding];
subdivideOptions.inclusionPattern = [false, true, true, true, true];
subdivideOptions.offsetFromBorderU = 0.01;
subdivideOptions.offsetFromBorderV = 0.01;
const withHoles = await bitbybit.occt.shapes.face.subdivideToRectangleHoles(subdivideOptions);
const finalShape = await bitbybit.occt.operations.makeThickSolidSimple({
shape: withHoles[0], offset: 0.5
});
// Draw options
const options = new Bit.Inputs.Draw.DrawOcctShapeOptions();
options.precision = 0.02;
options.drawEdges = model.drawEdges;
options.drawFaces = model.drawFaces;
options.drawVertices = false;
options.edgeColour = "#000000";
options.faceColour = model.color;
const group = await bitbybit.draw.drawAnyAsync({ entity: finalShape, options });
}, 0);
</script>
<style>
body {
margin: 0;
background-color: #1a1c1f;
}
#myCanvas {
display: block;
width: 100%;
height: 100vh;
}
.myCanvasZone {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div class="myCanvasZone">
<canvas id="myCanvas"></canvas>
</div>
</body>
</html>
Key Points
Runner Script
<script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@latest/runner/bitbybit-runner-babylonjs.js"></script>
The full runner includes BabylonJS, so you don't need to load it separately.
Using setTimeout
setTimeout(async () => {
// Your code here
}, 0);
Unlike PlayCanvas and ThreeJS runners, the BabylonJS runner often uses setTimeout to ensure the canvas element is fully rendered before initialization.
Initialization
const runner = window.bitbybitRunner.getRunnerInstance();
const { bitbybit, Bit, BABYLON, GUI, scene } = await runner.run(runnerOptions);
The run() method returns:
bitbybit- The main Bitbybit API objectBit- Helper classes including input DTOsBABYLON- The BabylonJS library itselfGUI- BabylonJS GUI library for UI elementsscene- The BabylonJS Scene
Additional Options
The BabylonJS runner supports additional options:
| Option | Type | Description |
|---|---|---|
canvasId | string | The ID of your canvas element |
canvasZoneClass | string | CSS class for the canvas container |
enableOCCT | boolean | Enable OpenCASCADE kernel |
enableJSCAD | boolean | Enable JSCAD kernel |
enableManifold | boolean | Enable Manifold kernel |
enablePhysics | boolean | Enable Havok physics |
enableKeyEventListeners | boolean | Enable keyboard event listeners |
cameraPosition | number[] | Initial camera position [x, y, z] |
cameraTarget | number[] | Camera look-at target [x, y, z] |
backgroundColor | string | Scene background color (hex) |
loadFonts | string[] | Fonts to load for text operations |
Executing Rete Scripts
You can also execute exported Rete scripts:
const runner = window.bitbybitRunner.getRunnerInstance();
const { bitbybit, Bit, BABYLON, GUI } = await runner.run(runnerOptions);
// Execute an exported Rete script
runner.executeScript(exportedScriptString, { /* inputs */ });
GitHub Source
View the full source code on GitHub: BabylonJS Full Runner Examples