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
Cloud Assets
Upload various 3D assets to your projects and use them to showcase your work for everyone.
Our platform allows you to create and import 3D assets to your projects. If you are a BabylonJS developer, chances are high that you will own a big library of assets that you might want to load into your scripts and present them.
If you'd like to test the code below, please follow this link to the Alien Nebula Cruiser Script, open the editor and run it.
In this lecture I walk you through the steps that are required to upload, import and manipulate your geometry in bitbybit.dev TypeScript editor.
Keep in mind that if you share Assets through your public projects with third parties, they can potentially download them. This is explained in our Terms and Conditions.
The Code
This code requires you to have an account, upload the assets that are named in accordance to the code and then run the code. The code is explained in the video.
const start = async () => {
const files = [
"alien-nebula-cruiser-1.glb",
"alien-nebula-cruiser-2.glb",
"alien-nebula-cruiser-3.glb"
]
const gltfFiles = await Promise.all(files.map(fileName => bitbybit.asset.getFile({ fileName })));
const meshes = await Promise.all(gltfFiles.map(assetFile => bitbybit.babylon.io.loadAssetIntoScene({ assetFile, hidden: false })));
const triangle = await bitbybit.occt.shapes.wire.createNGonWire({
nrCorners: 3,
center: [0, 0, 0],
direction: [0, 1, 0],
radius: 14,
});
const corners = await bitbybit.occt.shapes.edge.getCornerPointsOfEdgesForShape({ shape: triangle });
corners.forEach((corner, index) => {
if (meshes[index]) {
meshes[index].position = new BABYLON.Vector3(corner[0], corner[1], corner[2]);
}
});
const triangleBase = await bitbybit.occt.shapes.wire.createNGonWire({
nrCorners: 3,
center: [0, 0, 0],
direction: [0, 1, 0],
radius: 30,
});
const triangleOffset = await bitbybit.occt.operations.offset({ shape: triangleBase, distance: 5, tolerance: 0.1 });
const triangleFace = await bitbybit.occt.shapes.face.createFaceFromWire({ shape: triangleOffset, planar: true });
const triangleExtrusion = await bitbybit.occt.operations.extrude({ shape: triangleFace, direction: [0, 1, 0] });
const triangleFillet = await bitbybit.occt.fillets.filletEdges({ shape: triangleExtrusion, radius: 0.4 });
const options = new Bit.Inputs.Draw.DrawOcctShapeOptions();
options.faceColour = "#ff00ff";
options.edgeColour = "#000000";
const triangleMesh = await bitbybit.draw.drawAnyAsync({
entity: triangleFillet,
options,
});
const parentMesh = new BABYLON.Mesh("parent");
meshes.forEach(m => m.parent = parentMesh);
triangleMesh.position = new BABYLON.Vector3(0, -6, 0);
triangleMesh.parent = parentMesh;
const rotationVec = new BABYLON.Vector3(0, 1, 0);
const optionsLight = new Bit.Inputs.BabylonScene.DirectionalLightDto();
optionsLight.direction = [-100, -100, -100];
optionsLight.intensity = 4;
optionsLight.shadowGeneratorMapSize = 2056;
bitbybit.babylon.scene.drawDirectionalLight(optionsLight);
bitbybit.time.registerRenderFunction(() => {
parentMesh.rotate(rotationVec, 0.0005);
meshes.forEach(mesh => {
mesh.rotate(rotationVec, -0.002);
});
});
}
start();
< PreviousNext >Course lectures
These are all the lectures of the course. Navigate freely between them by clicking.
Approximate Time Required: 99 minutes
