npm - @preference-sl/pref-viewer - Versions diffs - 2.1.9 → 2.3.0 - Mend

@preference-sl/pref-viewer 2.1.9 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/src/index.js +281 -98
package/src/models/patata.gltf +0 -10059
package/src/test.global.html +0 -240
package/src/test.html +0 -62

package/src/test.global.html DELETED Viewed

@@ -1,240 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>PrefViewer Test (Global Babylon)</title>
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-    #viewer-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #f0f0f0;
-    }
-  </style>
-  <!-- 1) Load Babylon Core (Global) -->
-  <script src="https://cdn.babylonjs.com/babylon.js"></script>
-  <!-- 2) Load Babylon glTF loader so SceneLoader.ImportMeshAsync can parse .gltf -->
-  <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-</head>
-<body>
-  <div id="viewer-container">
-    <!-- Omit "model" attribute: PrefViewer will default to "./models/patata.gltf" -->
-    <pref-viewer style="width: 800px; height: 600px; border: 1px solid #ccc;"></pref-viewer>
-  </div>
-  <!-- 3) Define PrefViewer using the global `BABYLON` object -->
-  <script>
-    (function () {
-      const { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, Color4, HemisphericLight, DirectionalLight } = BABYLON;
-      class PrefViewer extends HTMLElement {
-        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);
-          this.engine = null;
-          this.scene = null;
-          this.camera = null;
-          this.hemiLight = null;
-          this.dirLight = null;
-          this.modelUrl = null;
-          this._onWindowResize = null;
-        }
-        static get observedAttributes() {
-          return ["model"];
-        }
-        attributeChangedCallback(name, _oldValue, newValue) {
-          if (name === "model" && newValue) {
-            this.modelUrl = newValue;
-            this._reloadModel();
-          }
-        }
-        connectedCallback() {
-          // If no `model` attribute is provided, default to "models/patata.gltf"
-          if (!this.hasAttribute("model")) {
-            // Note: NO import.meta.url here—just use a relative path.
-            this.modelUrl = "models/patata.gltf";
-          }
-          this._initializeBabylon();
-        }
-        disconnectedCallback() {
-          this._disposeEngine();
-          if (this._onWindowResize) {
-            window.removeEventListener("resize", this._onWindowResize);
-            this._onWindowResize = null;
-          }
-        }
-        // —— Private setup methods ——
-        _initializeBabylon() {
-          // 1) Create engine & scene
-          this.engine = new Engine(this.canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false });
-          this.scene = new Scene(this.engine);
-          this.scene.clearColor = new Color4(1, 1, 1, 1);
-          // 2) Create camera & lights
-          this._createCamera();
-          this._createLights();
-          // 3) Hook up events
-          this._setupEventListeners();
-          // 4) Start render loop
-          this.engine.runRenderLoop(() => {
-            if (this.scene) {
-              this.scene.render();
-            }
-          });
-          this._onWindowResize = () => this.engine.resize();
-          window.addEventListener("resize", this._onWindowResize);
-          // 5) Load the initial model
-          this._reloadModel();
-        }
-        _createCamera() {
-          // ArcRotateCamera around (0,0,0)
-          const camera = new ArcRotateCamera(
-            "camera",
-            Math.PI / 2,
-            Math.PI / 3,
-            10,
-            Vector3.Zero(),
-            this.scene
-          );
-          camera.attachControl(this.canvas, true);
-          this.camera = camera;
-        }
-        _createLights() {
-          // Hemispheric light (fills in shadows)
-          const hemiLight = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), this.scene);
-          hemiLight.intensity = 0.8;
-          // Directional key light
-          const dirLight = new DirectionalLight("dirLight", new Vector3(-0.5, -1, -0.5), this.scene);
-          dirLight.position = new Vector3(0, 5, 0);
-          dirLight.intensity = 0.8;
-          this.hemiLight = hemiLight;
-          this.dirLight = dirLight;
-        }
-        _setupEventListeners() {
-          // Zoom towards the pointer's picked point on wheel scroll:
-          this.canvas.addEventListener("wheel", (evt) => {
-            if (!this.scene || !this.camera) return;
-            const pickResult = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-            const pivotPoint = pickResult.hit
-              ? pickResult.pickedPoint.clone()
-              : this.camera.target.clone();
-            this.camera.target = pivotPoint;
-            this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
-            evt.preventDefault();
-          });
-        }
-        // —— Model loading / management ——
-        async _reloadModel() {
-          if (!this.scene || !this.modelUrl) return;
-          // Dispose previous meshes (to avoid stacking them up)
-          this._disposePreviousMeshes();
-          try {
-            const result = await SceneLoader.ImportMeshAsync(
-              null,
-              "",
-              this.modelUrl,
-              this.scene,
-              undefined,
-              ".gltf"
-            );
-            // Ensure there's at least one camera / light if glTF had none
-            this.scene.createDefaultCameraOrLight(true, true, true);
-            // Turn off back-face culling so you can see both sides
-            result.meshes.forEach((mesh) => {
-              if (mesh.material) {
-                mesh.material.backFaceCulling = false;
-              }
-            });
-            this.dispatchEvent(
-              new CustomEvent("model-loaded", {
-                detail: { meshes: result.meshes, particleSystems: result.particleSystems },
-                bubbles: true,
-                composed: true,
-              })
-            );
-          } catch (err) {
-            console.error("Error loading model:", err);
-            this.dispatchEvent(
-              new CustomEvent("model-error", {
-                detail: { error: err },
-                bubbles: true,
-                composed: true,
-              })
-            );
-          }
-        }
-        _disposePreviousMeshes() {
-          if (!this.scene) return;
-          this.scene.meshes.slice().forEach((mesh) => {
-            if (mesh.getClassName && mesh.getClassName() === "Mesh") {
-              mesh.dispose();
-            }
-          });
-        }
-        // —— Cleanup ——
-        _disposeEngine() {
-          if (this.engine) {
-            this.engine.dispose();
-            this.engine = null;
-            this.scene = null;
-            this.camera = null;
-          }
-        }
-      }
-      customElements.define("pref-viewer", PrefViewer);
-    })();
-  </script>
-</body>
-</html>

package/src/test.html DELETED Viewed

@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>PrefViewer Test (Reuse Index.js)</title>
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-    #viewer-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #f0f0f0;
-    }
-  </style>
-  <!--
-    IMPORT MAP
-    ──────────
-    This tells the browser where to fetch "@babylonjs/core" and "@babylonjs/loaders".
-    We use jsDelivr's "?module" query so that it automatically serves the ESM build
-    corresponding to each package's "module" field in package.json.
-    Make sure the version (5.0.1 here) matches what you have in package.json.
-    If you have "@babylonjs/core": "^5.0.2" in your package.json, change both URLs
-    to "@5.0.2?module", etc.
-    This import-map must appear *before* you load index.js as a module.
-  -->
-  <script type="importmap">
-  {
-    "imports": {
-      "@babylonjs/core":    "https://cdn.jsdelivr.net/npm/@babylonjs/core@5.0.1?module",
-      "@babylonjs/loaders": "https://cdn.jsdelivr.net/npm/@babylonjs/loaders@5.0.1?module"
-    }
-  }
-  </script>
-</head>
-<body>
-  <div id="viewer-container">
-    <!--
-      By omitting the `model` attribute, PrefViewer’s connectedCallback()
-      will fall back to "./models/patata.gltf" (relative to index.js).
-    -->
-    <pref-viewer style="width: 800px; height: 600px; border: 1px solid #ccc;"></pref-viewer>
-  </div>
-  <!--
-    Load your existing ES-module index.js. Because of the import-map above,
-    any `import { … } from "@babylonjs/core"` inside index.js will resolve to
-    "https://cdn.jsdelivr.net/npm/@babylonjs/core@5.0.1?module", etc.
-  -->
-  <script type="module" src="./index.js"></script>
-</body>
-</html>