UNRI2-140: Add model viewer and remove lights + ortho cam

js/ThreeDViewer.js

@@ -3,6 +3,7 @@ import {GLTFLoader} from 'addons/loaders/GLTFLoader.js';
 import {OBJLoader} from 'addons/loaders/OBJLoader.js';
 import {MTLLoader} from 'addons/loaders/MTLLoader.js';
 import {OrbitControls} from 'addons/controls/OrbitControls.js';
+import {RoomEnvironment} from 'addons/environments/RoomEnvironment.js';
 import * as JSZip from 'jszip';
 import * as JSZipUtils from 'jszip-utils';
 
@@ -18,6 +19,7 @@ export class ThreeDViewer {
     this.camera.position.set(0, 1, -10);
     this.renderer = new THREE.WebGLRenderer({antialias: true});
     this.manager = new THREE.LoadingManager();
+    this.pmremGenerator = new THREE.PMREMGenerator(this.renderer);
     this.materials = [];
     this.loader = [];
 
@@ -64,33 +66,24 @@ export class ThreeDViewer {
   }
 
   createCameraFromSettings() {
-    if (this.settings.camera_settings.type === 'OrthographicCamera') {
-      this.camera = new THREE.OrthographicCamera(
-        this.settings.camera_settings.settings.left,
-        this.settings.camera_settings.settings.right,
-        this.settings.camera_settings.settings.top,
-        this.settings.camera_settings.settings.bottom,
-        this.settings.camera_settings.settings.near,
-        this.settings.camera_settings.settings.far
-      );
-    } else if (this.settings.camera_settings.type == 'PerspectiveCamera') {
+    if (this.settings.camera_settings.type === 'PerspectiveCamera') {
       this.camera = new THREE.PerspectiveCamera(
-        this.settings.camera_settings.settings.fov,
-        this.settings.camera_settings.settings.aspect,
-        this.settings.camera_settings.settings.near,
-        this.settings.camera_settings.settings.far
+        Number(this.settings.camera_settings.settings.fov),
+        Number(this.settings.camera_settings.settings.aspect),
+        Number(this.settings.camera_settings.settings.near),
+        Number(this.settings.camera_settings.settings.far)
       );
     }
 
     this.camera.position.set(
-      this.settings.camera_settings.settings.position.x,
-      this.settings.camera_settings.settings.position.y,
-      this.settings.camera_settings.settings.position.z
+      Number(this.settings.camera_settings.settings.position.x),
+      Number(this.settings.camera_settings.settings.position.y),
+      Number(this.settings.camera_settings.settings.position.z)
     );
     this.camera.rotation.set(
-      this.settings.camera_settings.settings.rotation.x,
-      this.settings.camera_settings.settings.rotation.y,
-      this.settings.camera_settings.settings.rotation.z
+      Number(this.settings.camera_settings.settings.rotation.x),
+      Number(this.settings.camera_settings.settings.rotation.y),
+      Number(this.settings.camera_settings.settings.rotation.z)
     );
   }
 
@@ -109,15 +102,7 @@ export class ThreeDViewer {
       this.log && console.log('Using default camera.' + this.camera.type);
     }
 
-    // Override light.
-    if ("light" in this.settings) {
-      this.log && console.log('Using overridden light from settings.');
-      this.createLightFromSettings();
-    } else {
-      this.log && console.log('Using default light.');
-      let light = new THREE.AmbientLight(); // White light
-      this.scene.add(light);
-    }
+    this.loadModelViewer();
 
     // Instantiating controls in the constructor does not work
     // because we are updating camera dynamically.
@@ -139,58 +124,14 @@ export class ThreeDViewer {
       this.camera = gltf.cameras[0];
     }
 
-    // Override light.
-    if ("light" in this.settings) {
-      this.log && console.log('Using overridden light from settings.');
-      this.createLightFromSettings();
-    } else if (!this.hasLights(gltf)) {
-      this.log && console.log('Using default light.');
-      let light = new THREE.AmbientLight(); // White light
-      this.scene.add(light);
-    }
+    this.loadModelViewer();
 
     // Instantiating controls in the constructor does not work
     // because we are updating camera dynamically.
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
     this.render();
   }
 
-  createLightFromSettings() {
-    var light = [];
-    switch (this.settings.light) {
-      case 'PointLight':
-        light = new THREE.PointLight();
-        break;
-      case 'DirectionalLight':
-        light = new THREE.DirectionalLight();
-        break;
-      case 'SpotLight':
-        light = new THREE.SpotLight();
-        break;
-      case 'HemisphereLight':
-        light = new THREE.HemisphereLight();
-        break;
-      case 'AmbientLight':
-      default:
-        light = new THREE.AmbientLight();
-        break;
-    }
-
-    this.scene.add(light);
-  }
-
-  hasLights(gltf) {
-    let hasLights = false;
-
-    gltf.scene.traverse((child) => {
-      if (child instanceof THREE.Light) {
-        hasLights = true;
-      }
-    });
-
-    return hasLights;
-  }
-
   onWindowResize() {
     this.camera.aspect = window.innerWidth / window.innerHeight;
     this.camera.updateProjectionMatrix();
@@ -279,6 +220,13 @@ export class ThreeDViewer {
     this.loader.load(url, this.onObjLoaded.bind(this));
   }
 
+  loadModelViewer() {
+    if ("room_environment" in this.settings) {
+      this.log && console.log('Using room environment.');
+      this.scene.environment = this.pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+    }
+  }
+
   resizeCanvasToDisplaySize() {
     const canvas = this.renderer.domElement;
     const width = canvas.clientWidth;