Feat/add gltf previewer

invenio.cfg

@@ -25,6 +25,7 @@ from cds_rdm.inspire_harvester.transformer import InspireJsonTransformer
 from cds_rdm.inspire_harvester.writer import InspireWriter
 from invenio_app_rdm.config import STATS_EVENTS as _APP_RDM_STATS_EVENTS, \
     STATS_AGGREGATIONS as _APP_RDM_STATS_AGGREGATIONS, APP_RDM_ROUTES
+from invenio_previewer.config import PREVIEWER_PREFERENCE as DEFAULT_PREVIEWER_PREFERENCE
 from invenio_rdm_records.checks import requests as checks_requests
 from invenio_rdm_records.config import (always_valid, RDM_RECORDS_PERSONORG_SCHEMES,
                                         RDM_RECORDS_IDENTIFIERS_SCHEMES as RDM_RECORDS_RELATED_IDENTIFIERS_SCHEMES
@@ -523,10 +524,9 @@ APP_RDM_RECORD_LANDING_PAGE_EXTERNAL_LINKS = [
 
 # Invenio-Previewer
 # =========================
-# TODO-EV uncomment this line
-# PREVIEWER_PREFERENCE = DEFAULT_PREVIEWER_PREFERENCE + [
-#   "cds_rdm_gltf_previewer",
-# ]
+PREVIEWER_PREFERENCE = DEFAULT_PREVIEWER_PREFERENCE + [
+  "cds_rdm_gltf_previewer",
+]
 
 # Invenio-Preservation-Sync
 # =========================

site/cds_rdm/assets/semantic-ui/js/cds_rdm/previewers/gltf-previewer.js

@@ -1 +1,115 @@
-// TODO-EV
+import * as THREE from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  class ThreeScene {
+    constructor(config) {
+      this.config = config;
+      this.container = config.container;
+
+      this.scene = null;
+      this.camera = null;
+      this.renderer = null;
+      this.controls = null;
+    }
+
+    init() {
+      this.initScene();
+      this.initCamera();
+      this.initRenderer();
+      this.initControls();
+      this.addEventListeners();
+      this.loadModel();
+      this.startRendering();
+    }
+
+    initScene() {
+      this.scene = new THREE.Scene();
+    }
+
+    initCamera() {
+      const { camera_x, camera_y, camera_z } = this.config;
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+
+      this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
+      this.camera.position.set(camera_x, camera_y, camera_z);
+    }
+
+    initRenderer() {
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+      this.renderer.setPixelRatio(window.devicePixelRatio || 1);
+      this.renderer.setClearColor(this.config.background, 1);
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      this.container.appendChild(this.renderer.domElement);
+    }
+
+    initControls() {
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+      this.controls.zoomSpeed = 0.5;
+    }
+
+    addEventListeners() {
+      window.addEventListener("resize", () => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
+      });
+    }
+
+    loadModel() {
+      const loader = new GLTFLoader();
+      const { fileURI } = this.config;
+
+      const progressBar = document.getElementById("progress");
+      const percentText = document.getElementById("percent");
+
+      if (progressBar) progressBar.style.visibility = "visible";
+
+      loader.load(
+        fileURI,
+        (gltf) => {
+          this.scene.add(gltf.scene);
+          if (progressBar) progressBar.style.visibility = "hidden";
+          if (percentText) percentText.textContent = "";
+        },
+        (xhr) => {
+          if (percentText && xhr.total) {
+            const percentComplete = Math.round((xhr.loaded / xhr.total) * 100);
+            percentText.textContent = `${percentComplete}`;
+            console.debug(`${percentComplete}% loaded`);
+          }
+        },
+        (error) => {
+          console.error("An error occurred loading the GLB file:", error);
+        }
+      );
+    }
+
+    startRendering() {
+      const renderLoop = () => {
+        requestAnimationFrame(renderLoop);
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+      };
+      renderLoop();
+    }
+  }
+
+  // Configuration
+  const config = {
+    container: document.getElementById("container"),
+    background: 0x000000,
+    camera_x: 5,
+    camera_y: 5,
+    camera_z: 10,
+    fileURI: document.getElementById("gltf-previewer").getAttribute("data-file-uri"),
+  };
+
+  const app = new ThreeScene(config);
+  app.init();
+});

site/cds_rdm/assets/semantic-ui/less/cds_rdm/previewers/gltf-previewer.less

@@ -1 +1,17 @@
-// TODO-EV
+#gltf-previewer {
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  #progress {
+    border: none;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    width: 100%;
+    padding: 5px;
+    color: white;
+    visibility: hidden;
+  }
+}

site/cds_rdm/previewer/gltf_previewer.py

@@ -11,7 +11,7 @@
 from invenio_previewer.proxies import current_previewer
 from invenio_previewer.utils import dotted_exts
 
-previewable_extensions = ["gltf"]
+previewable_extensions = ["glb", "gltf"]
 
 
 def can_preview(file):

site/cds_rdm/templates/semantic-ui/cds_rdm/previewers/gltf_previewer.html

@@ -9,6 +9,8 @@
 {%- extends config.PREVIEWER_ABSTRACT_TEMPLATE %}
 
 {% block panel %}
-  <!-- TODO-EV -->
-  <div>TODO</div>
+  <div id="gltf-previewer" data-file-uri="{{ file.uri }}">
+    <div id="progress">Loading <span id="percent"></span>%</div>
+    <div id="container"></div>
+  </div>
 {% endblock %}

site/cds_rdm/webpack.py

@@ -19,6 +19,10 @@
                 "gltf_previewer_js": "./js/cds_rdm/previewers/gltf-previewer.js",
                 "gltf_previewer_css": "./less/cds_rdm/previewers/gltf-previewer.less",
             },
+            dependencies={
+                "three": "^0.180.0",
+                "three-addons": "^1.2.0",
+            },
         ),
     },
 )