@preference-sl/pref-viewer 1.0.0 → 1.1.0

package/index.d.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+
+export declare class PrefViewer extends HTMLElement {
+  /**
+   * The URL or blob string of the GLTF model
+   */
+  set model(v: string | null);
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * <pref-viewer model="…" />
+       */
+      "pref-viewer": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & { model?: string },
+        HTMLElement
+      >;
+    }
+  }
+}
+
+export {};

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "license": "MIT",
   "type": "module",
   "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "types": "index.d.ts",
   "exports": {
     ".": {
       "import": "./src/index.js",
       "require": "./src/index.js",
-      "types": "./src/index.d.ts"
+      "types": "./index.d.ts"
     }
   },
   "sideEffects": false,
   "files": [
     "src",
-    "src/models"
+    "src/models",
+    "index.d.ts"
   ],
   "dependencies": {
     "@babylonjs/core": "^8.0.0",

package/src/index.js

@@ -0,0 +1,109 @@
+import {
+  Engine,
+  Scene,
+  ArcRotateCamera,
+  Vector3,
+  SceneLoader,
+  Color4
+} from "@babylonjs/core";
+import "@babylonjs/loaders";
+
+class PrefViewer extends HTMLElement {
+  canvas;
+  engine;
+  scene;
+  modelUrl = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+
+    this.canvas = document.createElement("canvas");
+    Object.assign(this.canvas.style, {
+      width: "100%",
+      height: "100%",
+      display: "block"
+    });
+
+    const wrapper = document.createElement("div");
+    Object.assign(wrapper.style, {
+      width: "100%",
+      height: "100%",
+      position: "relative"
+    });
+    wrapper.appendChild(this.canvas);
+    this.shadowRoot.append(wrapper);
+  }
+
+  static get observedAttributes() {
+    return ["model"];
+  }
+
+  attributeChangedCallback(name, _old, value) {
+    if (name === "model" && value) {
+      this.modelUrl = value;
+      this.loadModel();
+    }
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute("model")) {
+      this.modelUrl = new URL("./models/patata.gltf", import.meta.url).href;
+    }
+    this.initBabylon();
+  }
+
+  disconnectedCallback() {
+    this.engine?.dispose();
+    window.removeEventListener("resize", this._resizeHandler);
+  }
+
+  initBabylon() {
+    this.engine = new Engine(this.canvas, true, { alpha: true });
+    this.scene = new Scene(this.engine);
+    this.scene.clearColor = new Color4(1, 1, 1, 1);
+
+    const camera = new ArcRotateCamera(
+      "cam",
+      Math.PI / 2,
+      Math.PI / 3,
+      10,
+      Vector3.Zero(),
+      this.scene
+    );
+    camera.attachControl(this.canvas, true);
+
+    this.canvas.addEventListener("wheel", (evt) => {
+      const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
+      const pivot = pick.hit ? pick.pickedPoint.clone() : camera.target.clone();
+      camera.target = pivot;
+      camera.inertialRadiusOffset += evt.deltaY * camera.wheelPrecision * 0.01;
+      evt.preventDefault();
+    });
+
+    this.engine.runRenderLoop(() => this.scene.render());
+    this._resizeHandler = () => this.engine.resize();
+    window.addEventListener("resize", this._resizeHandler);
+
+    this.loadModel();
+  }
+
+  async loadModel() {
+    if (!this.scene || !this.modelUrl) return;
+    try {
+      await SceneLoader.ImportMeshAsync(
+        null,
+        "",
+        this.modelUrl,
+        this.scene,
+        undefined,
+        ".gltf"
+      );
+      this.scene.createDefaultCameraOrLight(true, true, true);
+    } catch (err) {
+      console.error("Error loading model:", err);
+    }
+  }
+}
+
+customElements.define("pref-viewer", PrefViewer);