If you already use BabylonJS you can adapt bitbybit and it's CAD features in your web applications, games or 3D configurators. BabylonJS is amazing game engine that sits at the core of our technology stack.
Intermediate
Free
TypeScript
Bitbybit For BabylonJS Developers
TypeScript
First Contact
In this lecture we are going to have a first contact between BabylonJS and Bitbybit.
Let's first see how some of the bitbybit.dev algorithms can be used in the context of BabylonJS by getting our hands dirty in code. There's nothing that beats first contact experience with the framework or a library and we hope to not disappoint.
The Code
This is the code that you should copy and paste into the editor. You can also type it in yourself. The code is explained in the video.
type Point3 = Bit.Inputs.Base.Point3;
// We use bitbybit to get the default engine
const engine = bitbybit.babylon.engine.getEngine();
const scene = new BABYLON.Scene(engine);
// It is important to inform bitbybit that we use non-default scene
bitbybit.babylon.scene.setAndAttachScene({ scene });
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(4, 4, -4), scene);
camera.setTarget(BABYLON.Vector3.Zero());
// We can only re-use the existing rendering canvas from default engine
const canvas = bitbybit.babylon.engine.getRenderingCanvas();
camera.attachControl(canvas, true);
camera.speed = 0.15;
camera.minZ = 0;
// BabylonJS way of creating lights
const light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);
light.intensityMode = BABYLON.Light.INTENSITYMODE_ILLUMINANCE;
light.intensity = 1;
const start = async () => {
const gridOptions = new Bit.Inputs.Draw.SceneDrawGridMeshDto();
bitbybit.draw.drawGridMesh(gridOptions);
const points: Point3[] = [
[2, 1, 2],
[2, 1, 0],
[-2, 2, -2],
[0, 1, 2]
];
const pointDrawOptions = new Bit.Inputs.Draw.DrawBasicGeometryOptions();
pointDrawOptions.colours = ["#ff00ff"];
bitbybit.draw.drawAnyAsync({
entity: points,
options: pointDrawOptions
});
const wireThroughPoints = await bitbybit.occt.shapes.wire.interpolatePoints({
points,
periodic: true,
tolerance: 0.01,
});
const wireDrawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();
wireDrawOptions.edgeColour = "#0000ff";
bitbybit.draw.drawAnyAsync({
entity: wireThroughPoints,
options: wireDrawOptions
});
const extrusion = await bitbybit.occt.operations.extrude({
shape: wireThroughPoints,
direction: [0, 2, 0]
});
const extrusionFaces = await bitbybit.occt.shapes.face.getFaces({
shape: extrusion
});
const bottomFace = await bitbybit.occt.shapes.face.createFaceFromWire({
shape: wireThroughPoints,
planar: false
});
const shell = await bitbybit.occt.shapes.shell.sewFaces({
shapes: [...extrusionFaces, bottomFace],
tolerance: 0.001
});
const fillet = await bitbybit.occt.fillets.filletEdges({
shape: shell,
radius: 0.2,
});
const thickSolid = await bitbybit.occt.operations.makeThickSolidSimple({
shape: fillet,
offset: -1
});
const filletThick = await bitbybit.occt.fillets.filletEdges({
shape: thickSolid,
radiusList: [0.1, 0.4],
indexes: [3, 7],
});
const finalDrawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();
finalDrawOptions.precision = 0.002;
const mesh = await bitbybit.draw.drawAnyAsync({
entity: filletThick,
options: finalDrawOptions
});
}
start();
< OverviewNext >Course lectures
These are all the lectures of the course. Navigate freely between them by clicking.
Approximate Time Required: 99 minutes
