START DOCUMENTATION

Introduction With TypeScript

Make your own 3D website With TypeScript

TypeScript is very powerful programming language than can express complex ideas in a simple way. In this tutorial Matas Ubarevicius builds a simple 3D cube with TypeScript and bitbybit-runner.js library.

Simple geometry of OCCT cube is used on purpose. Main goal is to learn how you can integrate our 3D TypeScript code into your JavaScript web development workflows.

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.

TypeScript code

In the following TypeScript code you will find the final code that was exported to JavaScript via "Export to Runner" popover.

TypeScript

Simple Cube

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-babylonjs.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":"typescript","version":"0.19.1","script":"async function(t,e,i,n,s){s.mockBitbybitRunnerInputs({size:1});const a=s.getBitbybitRunnerInputs(),{occt:b}=e,u=(async()=>{const t=await b.shapes.solid.createCube({size:a.size,center:[0,0,0]}),i=await b.fillets.filletEdges({shape:t,radius:.4}),n=new s.Inputs.Draw.DrawOcctShapeSimpleOptions;n.faceColour=\\"#0000ff\\",n.edgeWidth=1,n.precision=.005;return{cubeMesh:await e.draw.drawAnyAsync({entity:i,options:n})}})();s.setBitbybitRunnerResult(u)}(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>