first iteration of orbit camera for threejs implemented

Author: matas-bitbybit-dev

examples/vite/threejs/starter-template/src/main.ts

@@ -1,20 +1,21 @@
 import "./style.css"; // Basic styling
-import { BitByBitBase, Inputs, initBitbybit, type InitBitbybitOptions } from "@bitbybit-dev/threejs";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { BitByBitBase, Inputs, initBitbybit, type InitBitbybitOptions, type OrbitCameraController } from "@bitbybit-dev/threejs";
 import {
     Color,
     HemisphereLight,
-    PerspectiveCamera,
     Scene,
     WebGLRenderer,
 } from "three";
 
+// Store the orbit camera controller globally so bitbybit can access it
+let orbitCameraController: OrbitCameraController | null = null;
+
 // --- 1. Main Application Entry Point ---
 start();
 
 async function start() {
     // Initialize basic Three.js scene
-    const { scene } = initThreeJS();
+    const { scene, renderer } = initThreeJS();
 
     // Create an instance of BitByBitBase for Three.js
     const bitbybit = new BitByBitBase();
@@ -31,6 +32,27 @@ async function start() {
     // Initialize BitByBit in a single call - workers are created from CDN automatically!
     await initBitbybit(scene, bitbybit, options);
 
+    // --- 2.5. Setup BitByBit Orbit Camera ---
+    // Setup orbit camera controls using bitbybit library
+    const cameraOptions = new Inputs.ThreeJSCamera.OrbitCameraDto();
+    cameraOptions.distance = 120;
+    cameraOptions.pitch = 25;
+    cameraOptions.yaw = 45;
+    cameraOptions.frameOnStart = false;
+    cameraOptions.inertiaFactor = 0.1;
+    cameraOptions.distanceSensitivity = 0.15;
+    cameraOptions.domElement = renderer.domElement;
+    orbitCameraController = bitbybit.three.camera.orbitCamera.create(cameraOptions);
+
+    // Update the render loop to use the new camera
+    const animate = () => {
+        if (orbitCameraController) {
+            orbitCameraController.update(0.016); // ~60fps delta time
+            renderer.render(scene, orbitCameraController.camera);
+        }
+    };
+    renderer.setAnimationLoop(animate);
+
     // --- 3. Create Geometry with Active Kernels ---
     if (options.enableOCCT) {
         await createOCCTGeometry(bitbybit, "#ff0000"); // Red
@@ -55,12 +77,6 @@ async function start() {
 function initThreeJS() {
     const domNode = document.getElementById("three-canvas") as HTMLCanvasElement;
 
-    const camera = new PerspectiveCamera(
-        70,
-        window.innerWidth / window.innerHeight,
-        0.1, // Adjusted near plane for typical scenes
-        1000
-    );
     const scene = new Scene();
     scene.background = new Color(0x1a1c1f); // Set background color
 
@@ -73,29 +89,16 @@ function initThreeJS() {
     // Higher values = sharper but more GPU intensive. Use 1 for performance, devicePixelRatio for quality.
     renderer.setPixelRatio(window.devicePixelRatio);
 
-    camera.position.set(50, 50, 100); // Adjusted camera position
-    camera.lookAt(0, 0, 0);
-
-    const controls = new OrbitControls(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.dampingFactor = 0.05; // Smoother damping
-    controls.target.set(0, 0, 0); // Ensure controls target the origin
-    controls.update(); // Initial update
-
     const onWindowResize = () => {
-        camera.aspect = window.innerWidth / window.innerHeight;
-        camera.updateProjectionMatrix();
+        if (orbitCameraController) {
+            orbitCameraController.camera.aspect = window.innerWidth / window.innerHeight;
+            orbitCameraController.camera.updateProjectionMatrix();
+        }
         renderer.setSize(window.innerWidth, window.innerHeight);
     };
     window.addEventListener("resize", onWindowResize, false);
 
-    const animate = () => {
-        controls.update(); // Important for damping
-        renderer.render(scene, camera);
-    };
-    renderer.setAnimationLoop(animate);
-
-    return { scene, camera, renderer }; // Return renderer and camera if needed elsewhere
+    return { scene, renderer }; // Return renderer for camera setup
 }
 
 // // --- 5. Bitbybit Kernel Initialization Logic ---

packages/dev/threejs/lib/api/__mocks__/test-helpers.ts

@@ -197,3 +197,70 @@ export function mockWorkerError(workerManager: any, method: string, error: Error
             });
         });
 }
+
+/**
+ * Creates a mock window object for testing
+ */
+export function mockWindow() {
+    (global as any).window = {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        innerWidth: 1920,
+        innerHeight: 1080,
+    };
+}
+
+/**
+ * Creates a mock DOM element for testing orbit camera inputs.
+ * Supports event listener tracking for simulating user interactions.
+ */
+export function createMockDOMElement(): HTMLElement {
+    const listeners: { [key: string]: Array<(...args: unknown[]) => void> } = {};
+    return {
+        addEventListener: jest.fn((type: string, handler: (...args: unknown[]) => void) => {
+            if (!listeners[type]) {
+                listeners[type] = [];
+            }
+            listeners[type].push(handler);
+        }),
+        removeEventListener: jest.fn((type: string, handler: (...args: unknown[]) => void) => {
+            if (listeners[type]) {
+                const idx = listeners[type].indexOf(handler);
+                if (idx >= 0) {
+                    listeners[type].splice(idx, 1);
+                }
+            }
+        }),
+        dispatchEvent: jest.fn((event: Event) => {
+            const handlers = listeners[event.type];
+            if (handlers) {
+                handlers.forEach(h => h(event));
+            }
+        }),
+        getBoundingClientRect: jest.fn(() => ({
+            left: 0,
+            top: 0,
+            width: 1920,
+            height: 1080,
+        })),
+    } as unknown as HTMLElement;
+}
+
+/**
+ * Creates mock app and scene for orbit camera tests
+ */
+export function createOrbitCameraMocks() {
+    mockWindow();
+    const mockScene = new THREEJS.Scene();
+    const mockDomElement = createMockDOMElement();
+    const mockContext = {
+        scene: mockScene,
+    } as Context;
+
+    return {
+        mockScene,
+        mockDomElement,
+        mockContext
+    };
+}
+

packages/dev/threejs/lib/api/bitbybit-base.ts

@@ -72,7 +72,7 @@ export class BitByBitBase {
         this.math = new MathBitByBit();
         this.vector = new Vector(this.math, geometryHelper);
         const drawHelper = new DrawHelper(this.context, this.jscad.text, this.vector, this.jscadWorkerManager, this.manifoldWorkerManager, this.occtWorkerManager);
-        this.three = new ThreeJS(drawHelper);
+        this.three = new ThreeJS(this.context, drawHelper);
         this.tag = new Tag(this.context);
         this.draw = new Draw(drawHelper, this.context, this.tag);
         this.color = new Color(this.math);

packages/dev/threejs/lib/api/bitbybit/index.ts

@@ -1 +1,3 @@
-export * from "./draw";
+export * from "./draw";
+export * from "./threejs";
+export * from "./threejs/index";

packages/dev/threejs/lib/api/bitbybit/threejs.ts

@@ -1,5 +1,17 @@
+import { Context } from "../context";
 import { DrawHelper } from "../draw-helper";
+import { ThreeJSCamera } from "./threejs/camera";
 
+/**
+ * Contains various functions that expose ThreeJS objects
+ */
 export class ThreeJS {
-    constructor(private readonly drawHelper: DrawHelper) { }
+    public camera: ThreeJSCamera;
+
+    constructor(
+        private readonly context: Context,
+        private readonly drawHelper: DrawHelper
+    ) {
+        this.camera = new ThreeJSCamera(this.context);
+    }
 }

packages/dev/threejs/lib/api/bitbybit/threejs/camera.ts

@@ -0,0 +1,13 @@
+import { Context } from "../../context";
+import { ThreeJSOrbitCamera } from "./orbit-camera";
+
+export class ThreeJSCamera {
+
+    public orbitCamera: ThreeJSOrbitCamera;
+
+    constructor(
+        private readonly context: Context,
+    ) {
+        this.orbitCamera = new ThreeJSOrbitCamera(this.context);
+    }
+}

packages/dev/threejs/lib/api/bitbybit/threejs/index.ts

@@ -0,0 +1,2 @@
+export * from "./camera";
+export * from "./orbit-camera";