Added automatic loader selection based on file extension. Changed the default environment in the sandbox

packages/viewer-sandbox/src/main.ts

@@ -1,4 +1,4 @@
-import { Viewer } from '@speckle/viewer'
+import { Viewer, DefaultViewerParams } from '@speckle/viewer'
 import './style.css'
 import Sandbox from './Sandbox'
 
@@ -8,7 +8,10 @@ if (!container) {
 }
 
 // Viewer setup
-const viewer = new Viewer(container)
+const params = DefaultViewerParams
+params.environmentSrc =
+  'https://speckle-xyz-release.ams3.digitaloceanspaces.com/assets/studio010.hdr'
+const viewer = new Viewer(container, params)
 await viewer.init()
 
 const sandbox = new Sandbox(viewer)
@@ -32,4 +35,4 @@ viewer.on('load-complete', () => {
 sandbox.makeGenericUI()
 sandbox.makeSceneUI()
 // Load demo object
-sandbox.loadUrl('https://speckle.xyz/streams/9217731fc1/commits/751ae5dac7')
+sandbox.loadUrl('https://latest.speckle.dev/streams/2158263a8f/commits/3a629fc558')

packages/viewer/src/IViewer.ts

@@ -2,12 +2,14 @@ export interface ViewerParams {
   postprocessing: boolean
   reflections: boolean
   showStats: boolean
+  environmentSrc: string
 }
 
 export const DefaultViewerParams: ViewerParams = {
   postprocessing: false,
   reflections: true,
-  showStats: true
+  showStats: true,
+  environmentSrc: null
 }
 /**
  * Carried over from the old Viewer. To be extended/changed
@@ -25,8 +27,8 @@ export interface IViewer {
   unloadObject(url: string): Promise<void>
   unloadAll(): Promise<void>
 
-  applyFilter(filter: any): Promise<any>
-  getObjectsProperties(includeAll?: boolean): any
+  applyFilter(filter: unknown): Promise<unknown>
+  getObjectsProperties(includeAll?: boolean): unknown
 
   dispose(): void
 }

packages/viewer/src/index.js

@@ -1,3 +1,5 @@
 import { Viewer } from './modules/Viewer'
 import Converter from './modules/converter/Converter'
-export { Viewer, Converter }
+import { DefaultViewerParams } from './IViewer'
+
+export { Viewer, Converter, DefaultViewerParams }

packages/viewer/src/modules/Assets.ts

@@ -1,5 +1,12 @@
-import { Texture, PMREMGenerator, WebGLRenderer } from 'three'
+import { Texture, PMREMGenerator, WebGLRenderer, TextureLoader } from 'three'
 import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
+
+enum AssetType {
+  TEXTURE_8BPP = 'png', // For now
+  TEXTURE_HDR = 'hdr',
+  TEXTURE_EXR = 'exr'
+}
 
 export class Assets {
   private _cache: { [name: string]: Texture } = {}
@@ -10,13 +17,25 @@ export class Assets {
     this.pmremGenerator.compileEquirectangularShader()
   }
 
+  private getLoader(src: string): TextureLoader {
+    const bySrc = src.split('.').pop()
+    switch (bySrc) {
+      case AssetType.TEXTURE_EXR:
+        return new EXRLoader()
+      case AssetType.TEXTURE_HDR:
+        return new RGBELoader()
+      case AssetType.TEXTURE_8BPP:
+        return new TextureLoader()
+    }
+  }
+
   public getEnvironment(srcUrl: string): Promise<Texture> {
     if (this._cache[srcUrl]) {
       return Promise.resolve(this._cache[srcUrl])
     }
 
     return new Promise<Texture>((resolve) => {
-      new EXRLoader().load(srcUrl, (texture) => {
+      this.getLoader(srcUrl).load(srcUrl, (texture) => {
         const pmremRT = this.pmremGenerator.fromEquirectangular(texture)
         this._cache[srcUrl] = pmremRT.texture
         texture.dispose()

packages/viewer/src/modules/Viewer.ts

@@ -23,7 +23,7 @@ export class Viewer extends EventEmitter implements IViewer {
   private container: HTMLElement
   private cubeCamera: CubeCamera
   private stats: Optional<Stats>
-  private loaders: any
+  private loaders: unknown
   private needsRender: boolean
   private inProgressOperations: number
 
@@ -33,7 +33,8 @@ export class Viewer extends EventEmitter implements IViewer {
   public interactions: InteractionHandler
   private renderer: WebGLRenderer
   public cameraHandler: CameraHandler
-  private sceneURL: string
+  private sceneURL: string // Temporary
+  private startupParams: ViewerParams
 
   public static Assets: Assets
 
@@ -88,7 +89,7 @@ export class Viewer extends EventEmitter implements IViewer {
     super()
 
     window.THREE = THREE
-
+    this.startupParams = params
     this.clock = new THREE.Clock()
 
     this.container = container || document.getElementById('renderer')
@@ -144,9 +145,11 @@ export class Viewer extends EventEmitter implements IViewer {
   }
 
   public async init(): Promise<void> {
-    this.scene.environment = await Viewer.Assets.getEnvironment(
-      'http://localhost:3033/sample-hdri.exr'
-    )
+    if (this.startupParams.environmentSrc) {
+      this.scene.environment = await Viewer.Assets.getEnvironment(
+        this.startupParams.environmentSrc
+      )
+    }
   }
 
   private sceneLights() {
@@ -310,7 +313,7 @@ export class Viewer extends EventEmitter implements IViewer {
     return
   }
 
-  public async applyFilter(filter: any) {
+  public async applyFilter(filter: unknown) {
     try {
       if (++this.inProgressOperations === 1) (this as EventEmitter).emit('busy', true)