UNIR2-145: Add a loader

js/ThreeDViewer.js

@@ -5,7 +5,7 @@ import {MTLLoader} from 'addons/loaders/MTLLoader.js';
 import {OrbitControls} from 'addons/controls/OrbitControls.js';
 import {RoomEnvironment} from 'addons/environments/RoomEnvironment.js';
 import {strFromU8, unzipSync} from "addons/libs/fflate.module";
-import {DirectionalLight} from "three";
+import {Spinner} from 'spin.js';
 
 export class ThreeDViewer {
 
@@ -19,6 +19,19 @@ export class ThreeDViewer {
     this.camera.position.set(0, 1, -10);
     this.renderer = new THREE.WebGLRenderer({antialias: true});
     this.manager = new THREE.LoadingManager();
+
+    // Add a spin loader.
+    var target = document.getElementsByClassName(this.settings.progress_element_classes)[0];
+    var spinner = new Spinner();
+
+    this.manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
+       spinner.spin(target);
+    };
+
+    this.manager.onLoad = function ( ) {
+      spinner.stop();
+    };
+
     this.pmremGenerator = new THREE.PMREMGenerator(this.renderer);
     this.materials = [];
     this.loader = [];
@@ -28,7 +41,8 @@ export class ThreeDViewer {
     // Instantiate only once.
     if (this.container.classList.contains(this.settings.canvas_loaded_class)) {
       throw "Attempted to load ThreeJS viewer, but it has already been loaded.";
-    } else {
+    }
+    else {
       // Flag that the viewer has been loaded.
       this.container.appendChild(this.renderer.domElement);
       this.container.classList.add(this.settings.canvas_loaded_class);
@@ -40,18 +54,6 @@ export class ThreeDViewer {
 
 
   loadModel(url, fileType = 'gltf') {
-    // Add a loader.
-    var progressClass = this.settings.progress_element_classes;
-    this.manager.onProgress = function (item, loaded, total) {
-      let progress = Math.round(loaded / total * 100);
-      let progress_display = '';
-      if (progress < 100) {
-        progress_display = progress + '%';
-      }
-      document.getElementsByClassName(progressClass)[0].innerText = progress_display;
-    };
-
-    //  loader.load(url, this.onModelLoaded.bind(this));
     switch (this.settings.model_ext) {
       case "obj":
         this.loadObj(url);
@@ -155,6 +157,7 @@ export class ThreeDViewer {
     // Instantiating controls in the constructor does not work
     // because we are updating camera dynamically.
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    document.getElementsByClassName(this.settings.progress_element_classes)[0].style.display = 'none';
     this.render();
   }
 
@@ -190,6 +193,18 @@ export class ThreeDViewer {
     this.loader.load(url, this.onGLTFLoaded.bind(this));
   }
 
+  onError (xhr) {
+    console.log("Will call when error occure.");
+  }
+
+  onProgress ( xhr ) {
+    if ( xhr.lengthComputable ) {
+      var percentComplete = xhr.loaded / xhr.total * 100;
+   //   document.getElementsByClassName('dgi-3d-viewer-progress')[0].innerText = percentComplete;
+      console.log( Math.round(percentComplete) + '% downloaded' );
+    }
+  }
+
   loadObj(url) {
     this.log && console.log('Beginning to render ' + url + ' with obj loader');
     this.loader = new OBJLoader(this.manager);

package.json

@@ -23,5 +23,8 @@
     "webpack": "^5.81.0",
     "webpack-cli": "^5.0.2",
     "webpack-dev-server": "^4.15.0"
+  },
+  "dependencies": {
+    "spin.js": "^4.1.1"
   }
 }

src/Plugin/Field/FieldFormatter/DgiThreejsFileFormatter.php

@@ -102,8 +102,7 @@ public function viewElements(FieldItemListInterface $items, $langcode): array {
         '#children' => [
           'progress' => [
             '#type' => 'html_tag',
-            '#tag' => 'span',
-            '#value' => $this->t('Rendering...'),
+            '#tag' => 'div',
             '#attributes' => [
               'class' => $viewer_settings['progress_element_classes'],
             ],