setup of pattern example

Author: matas-bitbybit-dev

webpack/threejs/src/code/patterns.ts

@@ -9,6 +9,28 @@ import { GUI } from 'lil-gui';
 
 function component() {
 
+    const showSpinner = () => {
+        const element = document.createElement('div');
+        element.id = "spinner";
+        element.className = "lds-ellipsis";
+        element.innerHTML = `
+            <div></div>
+            <div></div>
+            <div></div>
+        `;
+
+        document.body.appendChild(
+            element
+        );
+    }
+
+    const hideSpinner = () => {
+        const el = document.getElementById('spinner');
+        if (el) {
+            el.remove();
+        }
+    }
+
     let current: { group: Group | undefined, ground: Mesh | undefined, gui: GUI | undefined } = {
         group: undefined,
         ground: undefined,
@@ -24,8 +46,6 @@ function component() {
         color: string,
         downloadSTL?: () => void,
         downloadStep?: () => void
-        goHome?: () => void
-        goBitbybit?: () => void
     }
 
     const model = {
@@ -75,13 +95,12 @@ function component() {
             subdivideOptions.offsetFromBorderV = 0.01;
 
             const withHoles = await bitbybit.occt.shapes.face.subdivideToRectangleHoles(subdivideOptions);
-            const finalShape = await bitbybit.occt.operations.makeThickSolidSimple({ shape: withHoles[0], offset: 0.5 });
-            // const box = await bitbybit.occt.shapes.solid.createBox({ width: 1, height: 10, length: 1, center: [0, 0, 0] });
+            finalShape = await bitbybit.occt.operations.makeThickSolidSimple({ shape: withHoles[0], offset: 0.5 });
 
             shapesToClean = [...wires, loft, translated, ...faces, ...withHoles, finalShape];
 
             const options = new Inputs.Draw.DrawOcctShapeOptions();
-            options.precision = 0.05;
+            options.precision = 0.02;
             options.drawEdges = model.drawEdges;
             options.drawFaces = model.drawFaces;
             options.drawVertices = false;
@@ -101,15 +120,14 @@ function component() {
 
             current.group = group;
 
-            finalShape;
         }
     }
 
     const downloadStep = async () => {
         if (bitbybit && finalShape) {
             await bitbybit.occt.io.saveShapeSTEP({
                 shape: finalShape,
-                fileName: 'vase.stp',
+                fileName: 'shape.stp',
                 adjustYtoZ: true,
                 tryDownload: true
             });
@@ -134,23 +152,26 @@ function component() {
     model.downloadStep = downloadStep;
 
     const updateShape = async () => {
-        toggleInputs();
+        showSpinner();
+        disableGUI();
         current.group?.traverse((obj) => {
             scene?.remove(obj);
         });
         await createShape(bitbybit, scene);
-        toggleInputs();
+        enableGUI();
+        hideSpinner();
     }
 
     const init = async () => {
+        showSpinner();
         bitbybit = new BitByBitBase();
 
         const domNode = document.getElementById('three-canvas') as HTMLCanvasElement;
         const occt = new Worker(new URL('../occ.worker', import.meta.url), { name: 'OCC', type: 'module' });
 
         const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 1000);
         scene = new Scene();
-        scene.fog = new Fog(0xffffff, 15, 60);
+        scene.fog = new Fog(0x1a1c1f, 15, 60);
         const light = new HemisphereLight(0xffffff, 0x000000, 10);
         scene.add(light);
         await bitbybit.init(scene, occt, undefined);
@@ -159,16 +180,15 @@ function component() {
         camera.aspect = window.innerWidth / window.innerHeight;
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
-        // renderer.setSize(domNode.clientWidth, domNode.clientHeight);
-
+        renderer.setPixelRatio(window.devicePixelRatio / 1.5)
         const animation = (time: number) => {
             renderer.render(scene, camera);
             rotateGroup();
             controls.update();
         }
 
         const controls = new OrbitControls(camera, renderer.domElement);
-        camera.position.set(10, 10, 30);
+        camera.position.set(10, 10, 20);
 
         controls.update();
         controls.target = new Vector3(0, 5, 0);
@@ -186,7 +206,7 @@ function component() {
         }
         window.addEventListener("resize", onWindowResize, false);
 
-        renderer.setClearColor(new Color(0xffffff), 1);
+        renderer.setClearColor(new Color(0x1a1c1f), 1);
 
         bitbybit.occtWorkerManager.occWorkerState$.subscribe(async s => {
             if (s.state === OccStateEnum.initialised) {
@@ -222,30 +242,28 @@ function component() {
                 scene.add(ground);
 
                 createGui();
+                hideSpinner();
             }
         });
     }
 
-    const toggleInputs = () => {
-        const allInputs = document.getElementsByTagName('input');
-        for (let i = 0; i < allInputs.length; i++) {
-            allInputs[i].disabled = !allInputs[i].disabled;
-        }
+    const disableGUI = () => {
+        const lilGui = document.getElementsByClassName('lil-gui')[0] as HTMLElement;
+        lilGui.style.pointerEvents = "none";
+        lilGui.style.opacity = "0.5";
+    }
+
+    const enableGUI = () => {
+        const lilGui = document.getElementsByClassName('lil-gui')[0] as HTMLElement;
+        lilGui.style.pointerEvents = "all";
+        lilGui.style.opacity = "1";
     }
 
     const createGui = () => {
 
         const gui = new GUI();
         current.gui = gui;
         gui.$title.innerHTML = "Pattern";
-        model.goHome = () => {
-            window.location.href = "/";
-            gui.destroy();
-        };
-        model.goBitbybit = () => {
-            window.location.href = "https://bitbybit.dev";
-            gui.destroy();
-        };
 
         gui
             .add(model, "uRec", 4, 32, 4)
@@ -301,12 +319,10 @@ function component() {
 
         gui.add(model, "downloadSTL").name("Download STL");
         gui.add(model, "downloadStep").name("Download STEP");
-        gui.add(model, "goHome").name("Examples");
-        gui.add(model, "goBitbybit").name("Bitbybit.dev");
     }
 
     init();
-    
+
 }
 
 component();

webpack/threejs/src/html/patterns/index.html

@@ -6,9 +6,129 @@
     <title>Patterns</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <script defer="defer" src="../patterns.0.18.0-alpha.4.bundle.js"></script>
+    <style>
+        body {
+            background-color: rgb(26, 28, 31);
+            margin: 0px;
+            color: #ffffff;
+        }
+
+        a {
+            color: #f0cebb;
+        }
+
+        a:visited {
+            color: #f0cebb;
+            ;
+        }
+
+        #three-canvas {
+            display: block;
+            overflow-y: hidden;
+            overflow-x: hidden;
+            width: 100%;
+            height: 100%;
+        }
+
+        .logo {
+            padding: 20px;
+            background-color: rgb(26, 28, 31, 0.8);
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 12px;
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+        }
+
+        .logo img {
+            margin-bottom: 5px;
+        }
+
+        .lds-ellipsis {
+            z-index: 2;
+            top: calc(50% - 32px);
+            left: calc(50% - 32px);
+            display: inline-block;
+            position: absolute;
+            width: 64px;
+            height: 64px;
+        }
+
+        .lds-ellipsis div {
+            position: absolute;
+            top: 27px;
+            width: 11px;
+            height: 11px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.8);
+            animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        }
+
+        .lds-ellipsis div:nth-child(1) {
+            left: 6px;
+            animation: lds-ellipsis1 0.6s infinite;
+        }
+
+        .lds-ellipsis div:nth-child(2) {
+            left: 6px;
+            animation: lds-ellipsis2 0.6s infinite;
+        }
+
+        .lds-ellipsis div:nth-child(3) {
+            left: 26px;
+            animation: lds-ellipsis2 0.6s infinite;
+        }
+
+        .lds-ellipsis div:nth-child(4) {
+            left: 45px;
+            animation: lds-ellipsis3 0.6s infinite;
+        }
+
+        @keyframes lds-ellipsis1 {
+            0% {
+                transform: scale(0);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        @keyframes lds-ellipsis3 {
+            0% {
+                transform: scale(1);
+            }
+
+            100% {
+                transform: scale(0);
+            }
+        }
+
+        @keyframes lds-ellipsis2 {
+            0% {
+                transform: translate(0, 0);
+            }
+
+            100% {
+                transform: translate(19px, 0);
+            }
+        }
+    </style>
 </head>
 
 <body>
+    <div class="logo">
+        <a href="/">
+            <img src="https://bitbybit.dev/assets/logo-gold-small.png" width="50px" height="50px" />
+        </a>
+        <div>Made with <a href="https://bitbybit.dev">bitbybit.dev</a> & <a href="https://threejs.org">threejs.org</a>
+        </div>
+        <div>Source code on <a
+                href="https://github.com/bitbybit-dev/app-examples/blob/main/webpack/threejs/src/code/patterns.ts">github</a>
+        </div>
+        <div>Npm package <a href="https://www.npmjs.com/package/@bitbybit-dev/threejs">bitbybit-dev/threejs</a>
+        </div>
+    </div>
     <canvas id="three-canvas">
     </canvas>
 </body>