Make your own 3D website
If you are looking for ways to create your own 3D website, you're in the right place. In this tutorial we introduce you to bitbybit-runner.js library, which hosts powerful CAD algorithms naturally embedded in Babylon.js game engine.
We will code a simple visual script that will create a 3D cube. Then we will set up the very simple website on StackBlitz. We'll include bitbybit-runner.js file from our CDN, set up very simple HTML and JavaScript code to enable us to use visual programming script in our website. Cube's size property will be controlled through UI input element on your website.
Final result
You can either visit StackBlitz project page or copy these code snippets into your website to make the result from this tutorial appear on your website.
Rete script
In the following script you will find the final code that was exported to JavaScript via "Export to Runner" popover.
Complete Code
You can also download this static index.html file and open it in your browser to see the result. It contains all of the styling, html and script inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.19.1/runner/bitbybit-runner-babylon.js"></script>
<script>
const runner = window.bitbybitRunner.getRunnerInstance();
setTimeout(async () => {
const runnerOptions = {
canvasId: 'myCanvas',
canvasZoneClass: 'myCanvasZone',
enablePhysics: false,
enableOCCT: true,
enableJSCAD: false,
enableKeyEventListeners: false,
backgroundColor: '#0000ff',
loadFonts: [],
};
await runner.run(runnerOptions);
changeSize(1);
}, 0);
let previousMesh;
async function changeSize(size) {
const res = await runner.executeScript(getInlineScript(), { size });
if (previousMesh) {
previousMesh.dispose();
}
previousMesh = res.cubeMesh;
}
window.changeSize = changeSize;
function getInlineScript() {
return '{\"type\":\"rete\",\"version\":\"0.19.1\",\"script\":\"(async function (BitByBit, bitbybit, bitbybitRunnerResult, bitbybitRunnerInputs, Bit) { const dataVarIDf383aaf1893995c7 = {property: [\\"size\\"]};let inputsVarIDf383aaf1893995c7 = {};inputsVarIDf383aaf1893995c7 = {...dataVarIDf383aaf1893995c7, ...inputsVarIDf383aaf1893995c7};const resultf383aaf1893995c7 = [{result: [bitbybitRunnerInputs[inputsVarIDf383aaf1893995c7.property[0]]]}];const dataVarIDcaa28d38f452b168 = {precision: [0.01], drawFaces: [true], faceColour: [\\"#1e00ff\\"], drawEdges: [true], edgeColour: [\\"#ffffff\\"], edgeWidth: [2]};let inputsVarIDcaa28d38f452b168 = {};inputsVarIDcaa28d38f452b168 = {...dataVarIDcaa28d38f452b168, ...inputsVarIDcaa28d38f452b168};const generatedVarIDcaa28d38f452b168 = BitByBit.HS.executeBasedOnType(inputsVarIDcaa28d38f452b168, false, (data) => bitbybit.draw.optionsOcctShapeSimple(data));const resultcaa28d38f452b168 = [{result: generatedVarIDcaa28d38f452b168, transformers: []}];const dataVarIDa9c61a71827d3e38 = {size: [1], center: [[0,0,0]]};let inputsVarIDa9c61a71827d3e38 = {};inputsVarIDa9c61a71827d3e38.size = resultf383aaf1893995c7;BitByBit.HS.updateListInputs(inputsVarIDa9c61a71827d3e38);inputsVarIDa9c61a71827d3e38 = {...dataVarIDa9c61a71827d3e38, ...inputsVarIDa9c61a71827d3e38};const generatedVarIDa9c61a71827d3e38 = await BitByBit.HS.executeBasedOnTypeAsync(inputsVarIDa9c61a71827d3e38, false, (data) => bitbybit.occt.shapes.solid.createCube(data));const resulta9c61a71827d3e38 = [{result: generatedVarIDa9c61a71827d3e38, transformers: []}]; const dataVarIDcd4c1f4de5199424 = {shape: [undefined], radius: [0.4], radiusList: [undefined], indexes: [undefined]};let inputsVarIDcd4c1f4de5199424 = {};inputsVarIDcd4c1f4de5199424.shape = resulta9c61a71827d3e38;BitByBit.HS.updateListInputs(inputsVarIDcd4c1f4de5199424);inputsVarIDcd4c1f4de5199424 = {...dataVarIDcd4c1f4de5199424, ...inputsVarIDcd4c1f4de5199424};const generatedVarIDcd4c1f4de5199424 = await BitByBit.HS.executeBasedOnTypeAsync(inputsVarIDcd4c1f4de5199424, false, (data) => bitbybit.occt.fillets.filletEdges(data));const resultcd4c1f4de5199424 = [{result: generatedVarIDcd4c1f4de5199424, transformers: []}]; const dataVarIDf2f8b4cf1de9ac4c = {entity: [undefined], options: [undefined], babylonMesh: [undefined]};let inputsVarIDf2f8b4cf1de9ac4c = {};inputsVarIDf2f8b4cf1de9ac4c.options = resultcaa28d38f452b168;inputsVarIDf2f8b4cf1de9ac4c.entity = resultcd4c1f4de5199424;BitByBit.HS.updateListInputs(inputsVarIDf2f8b4cf1de9ac4c);inputsVarIDf2f8b4cf1de9ac4c = {...dataVarIDf2f8b4cf1de9ac4c, ...inputsVarIDf2f8b4cf1de9ac4c};const generatedVarIDf2f8b4cf1de9ac4c = await BitByBit.HS.executeBasedOnTypeAsync(inputsVarIDf2f8b4cf1de9ac4c, false, (data) => bitbybit.draw.drawAnyAsync(data));const resultf2f8b4cf1de9ac4c = [{result: generatedVarIDf2f8b4cf1de9ac4c, transformers: []}]; const dataVarID613de15ba24c56db = {property: [\\"cubeMesh\\"]};let inputsVarID613de15ba24c56db = {};inputsVarID613de15ba24c56db.value = resultf2f8b4cf1de9ac4c;BitByBit.HS.updateListInputs(inputsVarID613de15ba24c56db);inputsVarID613de15ba24c56db = {...dataVarID613de15ba24c56db, ...inputsVarID613de15ba24c56db};setBitbybitRunnerResultValue(inputsVarID613de15ba24c56db.property[0], inputsVarID613de15ba24c56db.value[0]); })(BitByBit, bitbybit, bitbybitRunnerResult, bitbybitRunnerInputs, Bit);\"}';
}
</script>
<style>
body {
background-color: #1a1c1f;
color: white;
font-weight: 400;
font-family: 'IBM Plex Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 20px;
}
#myCanvas {
outline: none;
border: 1px solid white;
border-radius: 5px;
width: 100%;
}
</style>
</head>
<body>
<div class="myCanvasZone">
<canvas id="myCanvas"></canvas>
</div>
<label for="size">Size</label>
<input id="size" type="number" value="1"
min="1" max="10" step="1"
onchange="changeSize(event.target.value)" />
</body>
</html>