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();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.


