nuxt example of a basic occt app without jscad for now

Author: matas-bitbybit-dev

.gitignore

@@ -1,4 +1,7 @@
 node_modules
 .angular
 .vscode
-dist
+dist
+nuxt/basic/pnpm-lock.yaml
+.nuxt
+.output

nuxt/basic/BitByBitComponent.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { BitByBitBase } from '@bitbybit-dev/core';
+import { OccStateEnum } from '@bitbybit-dev/occt-worker';
+import { Scene, Engine, Color4, HemisphericLight, Vector3, ArcRotateCamera, Light } from '@babylonjs/core';
+
+onMounted(async () => {
+    const bitbybit = new BitByBitBase();
+    const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
+
+    const engine = new Engine(canvas);
+    engine.setHardwareScalingLevel(0.5);
+    const scene = new Scene(engine);
+    scene.clearColor = new Color4(26 / 255, 28 / 255, 31 / 255, 1);
+    const camera = new ArcRotateCamera('Camera', 1.3, 1.3, 20, new Vector3(0, 0, 0), scene);
+    camera.attachControl(canvas, true);
+
+    const light = new HemisphericLight('HemiLight', new Vector3(0, 1, 0), scene);
+    light.intensityMode = Light.INTENSITYMODE_ILLUMINANCE;
+    light.intensity = 1;
+    scene.metadata = { shadowGenerators: [] };
+
+    const occt = new Worker(new URL('./occ.worker', import.meta.url), { name: 'OCC', type: 'module' })
+
+    bitbybit.init(scene, occt);
+
+    engine.runRenderLoop(() => {
+        scene.render();
+    });
+
+    bitbybit.occtWorkerManager.occWorkerState$.subscribe(s => {
+    
+        if (s.state === OccStateEnum.initialised) {
+                engine.resize();
+                
+                const start = async()=>{
+                    const sphere = await bitbybit.occt.shapes.solid.createSphere({
+                        radius: 5,
+                        center: [0,0,0]
+                    });
+
+                    const circle = await bitbybit.occt.shapes.wire.createCircleWire({
+                        radius: 10,
+                        center: [0,0,0],
+                        direction: [0,1,0],
+                    });
+
+                    const points = await bitbybit.occt.shapes.wire.pointsOnWireAtPatternOfLengths({
+                        shape: circle,
+                        lengths: [0.1,0.3,0.4],
+                        includeFirst: true,
+                        includeLast: false,
+                        tryNext: false
+                    })
+
+                    bitbybit.draw.drawAnyAsync({
+                        entity: sphere
+                    });
+
+                    bitbybit.draw.drawAnyAsync({
+                        entity: circle
+                    });
+
+                    bitbybit.draw.drawAnyAsync({
+                        entity: points
+                    });
+                }
+
+                start();
+                engine.runRenderLoop(() => {
+                    scene.render();
+                });
+            } else if (s.state === OccStateEnum.computing) {
+                // Show Spinner
+            } else if (s.state === OccStateEnum.loaded) {
+                // Show Spinner
+            }
+    });
+})
+
+</script>
+
+<template>
+    <canvas id="renderCanvas"></canvas>
+</template>
+
+<style>
+    #renderCanvas {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+</style>

nuxt/basic/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

nuxt/basic/app.vue

@@ -0,0 +1,11 @@
+<script setup>
+import BitByBitComponent from "./BitByBitComponent.vue"
+</script>
+<template>
+    <div>
+        <ClientOnly fallback-tag="span" fallback="Loading bitbybit...">
+            <BitByBitComponent />
+        </ClientOnly>
+    </div>
+</template>
+

nuxt/basic/bitbybit-nuxt.js

@@ -0,0 +1,32 @@
+import ocFullJS from "@bitbybit-dev/occt/bitbybit-dev-occt/bitbybit-dev-occt.js";
+import ocFullWasm from "@bitbybit-dev/occt/bitbybit-dev-occt/bitbybit-dev-occt.wasm?url";
+
+const initOpenCascade = ({
+  mainJS = ocFullJS,
+  mainWasm = ocFullWasm,
+  worker = undefined,
+  libs = [],
+  module = {},
+} = {}) => {
+  return new Promise((resolve, reject) => {
+    new mainJS({
+      locateFile(path) {
+        if (path.endsWith('.wasm')) {
+          return mainWasm;
+        }
+        if (path.endsWith('.worker.js') && !!worker) {
+          return worker;
+        }
+        return path;
+      },
+      ...module
+    }).then(async oc => {
+      for (let lib of libs) {
+        await oc.loadDynamicLibrary(lib, { loadAsync: true, global: true, nodelete: true, allowUndefined: false });
+      }
+      resolve(oc);
+    });
+  });
+};
+
+export default initOpenCascade;

nuxt/basic/nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    compatibilityDate: '2024-04-03',
+    devtools: { enabled: true },
+    ssr: false,
+    modules: ['@pinia/nuxt'],
+})

nuxt/basic/occ.worker.ts

@@ -0,0 +1,14 @@
+/// <reference lib="webworker" />
+/*eslint no-restricted-globals: 0*/
+import initOpenCascade from './bitbybit-nuxt.js';
+import type { OpenCascadeInstance } from '@bitbybit-dev/occt/bitbybit-dev-occt/bitbybit-dev-occt.js';
+import { initializationComplete, onMessageInput } from '@bitbybit-dev/occt-worker';
+
+initOpenCascade().then((occ: OpenCascadeInstance) => {
+    initializationComplete(occ, undefined);
+});
+
+addEventListener('message', ({ data }) => {
+    console.log(data)
+    onMessageInput(data, postMessage);
+});