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();Course Lectures
Navigate freely between lectures by clicking on them. Approximate time required: 99 minutes.

First Contact
25 minIn this lecture we are going to have a first contact between BabylonJS and Bitbybit.

Publishing Projects
10 minIf you want to share your scripts and creations with friends, colleagues or wider community, you can do so by publishing your projects.

Smart 3D Models
9 minOur platform allows you to create and leverage smart 3D models by using our configurators and adaptive algorithms.

Cloud Assets
25 minUpload various 3D assets to your projects and use them to showcase your work for everyone.

Havok Physics
30 minPhysics engine called Havok gives our users powerful simulation features, let's learn how to use it in Bitbybit.


