Bitbybit For BabylonJS Developers

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
Image showing BabylonJS logo designed in 3D using TypeScript programming language

Smart 3D Models

Our platform allows you to create and leverage smart 3D models by using our configurators and adaptive algorithms.

In this short lecture I will show you how you can use our smart 3D model algorithms to load complex ready made geometries in your BabylonJS scenes. Furthermore I'll explain how you can export those same models as GLB (GLTF) files.

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. Keep in mind that in order to run the code below you will need to be our subscriber due to the fact that we use arabic archway configurator. If you would use some of the free 3D models, that would work even if you are not our subscriber.

const engine = bitbybit.babylon.engine.getEngine(); const scene = new BABYLON.Scene(engine); bitbybit.babylon.scene.setAndAttachScene({ scene }); var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(20, 10, -20), scene); camera.setTarget(new BABYLON.Vector3(0, 5, 0)); const canvas = bitbybit.babylon.engine.getRenderingCanvas(); camera.attachControl(canvas, true); camera.speed = 0.15; camera.minZ = 0; 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 vaseOptions = new Bit.Things.ThreeDPrinting.Vases.ArabicArchway.ArabicArchwayDto(); vaseOptions.nrOfVerticalArches = 2; const vase = await bitbybit.things.threeDPrinting.vases.arabicArchway.create(vaseOptions); await bitbybit.draw.drawAnyAsync({ entity: vase }); bitbybit.babylon.io.exportGLB({ fileName: "arabic-archway.glb" }); } start();
< PreviousNext >