Add loading screen to all examples.

examples/3dm-to-glb/script.ts

@@ -1,6 +1,10 @@
-import {_testFinish, downloadBlob, IObject3D, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, downloadBlob, IObject3D, LoadingScreenPlugin, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'
 
-const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})
+const viewer = new ThreeViewer({
+    canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+    msaa: true,
+    plugins: [LoadingScreenPlugin],
+})
 
 async function init() {
 

examples/ambient-light/script.ts

@@ -3,6 +3,7 @@ import {
     AmbientLight2,
     Box3B,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     Object3DWidgetsPlugin,
     PhysicalMaterial,
@@ -24,7 +25,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr/exr is dropped
             },
         },
-        plugins: [Object3DWidgetsPlugin],
+        plugins: [Object3DWidgetsPlugin, LoadingScreenPlugin],
     })
 
     // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))

examples/basic-svg-renderer-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, DirectionalLight2, ThreeViewer} from 'threepipe'
+import {_testFinish, DirectionalLight2, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 import {BasicSVGRendererPlugin} from '@threepipe/plugin-svg-renderer'
 
@@ -8,6 +8,7 @@ async function init() {
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: false,
         tonemap: false,
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.scene.mainCamera.controls!.enableDamping = false

examples/blend-load/index.html

@@ -27,11 +27,11 @@
     </style>
     <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
-        import {_testFinish, ThreeViewer} from 'threepipe'
+        import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
         import {BlendLoadPlugin} from '@threepipe/plugin-blend-importer'
 
         const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
-        viewer.addPluginsSync([BlendLoadPlugin])
+        viewer.addPluginsSync([BlendLoadPlugin, LoadingScreenPlugin])
 
         async function init() {
 

examples/blueprintjs-ui-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer, TonemapPlugin} from 'threepipe'
 import {BlueprintJsUiPlugin} from '@threepipe/plugin-blueprintjs'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new BlueprintJsUiPlugin())

examples/camera-uiconfig/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/camera-view-plugin/script.ts

@@ -1,4 +1,12 @@
-import {_testFinish, CameraView, CameraViewPlugin, EasingFunctions, ThreeViewer, Vector3} from 'threepipe'
+import {
+    _testFinish,
+    CameraView,
+    CameraViewPlugin,
+    EasingFunctions,
+    LoadingScreenPlugin,
+    ThreeViewer,
+    Vector3,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
@@ -6,6 +14,8 @@ async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
     const cameraViewPlugin = viewer.addPluginSync(CameraViewPlugin)
     console.log(cameraViewPlugin)

examples/canvas-snapshot-plugin/script.ts

@@ -1,10 +1,11 @@
-import {_testFinish, CanvasSnapshotPlugin, isWebpExportSupported, ThreeViewer} from 'threepipe'
+import {_testFinish, CanvasSnapshotPlugin, isWebpExportSupported, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: true,
     renderScale: 'auto',
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/chromatic-aberration-plugin/script.ts

@@ -1,10 +1,12 @@
-import {_testFinish, ChromaticAberrationPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, ChromaticAberrationPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(ChromaticAberrationPlugin)

examples/clearcoat-tint-plugin/script.ts

@@ -1,4 +1,11 @@
-import {_testFinish, ClearcoatTintPlugin, IObject3D, PhysicalMaterial, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    ClearcoatTintPlugin,
+    IObject3D,
+    LoadingScreenPlugin,
+    PhysicalMaterial,
+    ThreeViewer,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +13,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const clearcoatTint = viewer.addPluginSync(ClearcoatTintPlugin)

examples/contact-shadow-ground-plugin/script.ts

@@ -1,10 +1,12 @@
-import {_testFinish, ContactShadowGroundPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, ContactShadowGroundPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(ContactShadowGroundPlugin)

examples/custom-bump-map-plugin/script.ts

@@ -1,10 +1,20 @@
-import {_testFinish, CustomBumpMapPlugin, ITexture, Mesh, PhysicalMaterial, PlaneGeometry, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    CustomBumpMapPlugin,
+    ITexture,
+    LoadingScreenPlugin,
+    Mesh,
+    PhysicalMaterial,
+    PlaneGeometry,
+    ThreeViewer,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const customBump = viewer.addPluginSync(CustomBumpMapPlugin)

examples/custom-pipeline/script.ts

@@ -3,6 +3,7 @@ import {
     DepthBufferPlugin,
     downloadBlob,
     HalfFloatType,
+    LoadingScreenPlugin,
     RenderTargetPreviewPlugin,
     ThreeViewer,
 } from 'threepipe'
@@ -13,6 +14,8 @@ const viewer = new ThreeViewer({
     msaa: false,
     rgbm: true,
     zPrepass: false,
+    plugins: [LoadingScreenPlugin],
+    renderScale: 'auto',
 })
 
 async function init() {

examples/depth-buffer-plugin/script.ts

@@ -3,6 +3,7 @@ import {
     DepthBufferPlugin,
     downloadBlob,
     HalfFloatType,
+    LoadingScreenPlugin,
     RenderTargetPreviewPlugin,
     ThreeViewer,
 } from 'threepipe'
@@ -11,6 +12,7 @@ import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: true,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/device-orientation-controls-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, DeviceOrientationControlsPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, DeviceOrientationControlsPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,7 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [DeviceOrientationControlsPlugin],
+        plugins: [DeviceOrientationControlsPlugin, LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/directional-light/script.ts

@@ -3,6 +3,7 @@ import {
     Box3B,
     DirectionalLight2,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     Object3DWidgetsPlugin,
     PCFSoftShadowMap,
@@ -26,7 +27,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr/exr is dropped
             },
         },
-        plugins: [Object3DWidgetsPlugin],
+        plugins: [Object3DWidgetsPlugin, LoadingScreenPlugin],
     })
 
     // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))

examples/dropzone-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, DropzonePlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, DropzonePlugin, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -18,6 +18,7 @@ async function init() {
                 importConfig: true, // import config from file
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

examples/editor-view-widget-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, EditorViewWidgetPlugin, IObject3D, ThreeViewer, timeout} from 'threepipe'
+import {_testFinish, EditorViewWidgetPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer, timeout} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.scene.setBackgroundColor(0x151822)

examples/extra-importer-plugins/script.ts

@@ -1,4 +1,12 @@
-import {_testFinish, GLTFAnimationPlugin, HemisphereLight, ImportAddOptions, IObject3D, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    GLTFAnimationPlugin,
+    HemisphereLight,
+    ImportAddOptions,
+    IObject3D,
+    LoadingScreenPlugin,
+    ThreeViewer,
+} from 'threepipe'
 import {
     AMFLoadPlugin,
     BVHLoadPlugin,
@@ -26,6 +34,7 @@ async function init() {
                 disposeSceneObjects: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
     viewer.addPluginsSync([
         GLTFAnimationPlugin,

examples/filmic-grain-plugin/script.ts

@@ -1,10 +1,12 @@
-import {_testFinish, FilmicGrainPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, FilmicGrainPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(FilmicGrainPlugin)

examples/fragment-clipping-extension-plugin/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     FragmentClippingExtensionPlugin,
     IObject3D,
+    LoadingScreenPlugin,
     PhysicalMaterial,
     ThreeViewer,
     Vector4,
@@ -12,6 +13,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const fragmentClipping = viewer.addPluginSync(FragmentClippingExtensionPlugin)

examples/frame-fade-plugin/script.ts

@@ -1,10 +1,20 @@
-import {_testFinish, BoxGeometry, FrameFadePlugin, Mesh, PhysicalMaterial, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    BoxGeometry,
+    FrameFadePlugin,
+    LoadingScreenPlugin,
+    Mesh,
+    PhysicalMaterial,
+    ThreeViewer,
+} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
     viewer.addPluginSync(FrameFadePlugin)
 

examples/fullscreen-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, FullScreenPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, FullScreenPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
@@ -6,6 +6,8 @@ async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     const fullScreenPlugin = viewer.addPluginSync(new FullScreenPlugin())

examples/gbuffer-plugin/script.ts

@@ -5,6 +5,7 @@ import {
     GBufferPlugin,
     HalfFloatType,
     IObject3D,
+    LoadingScreenPlugin,
     RenderTargetPreviewPlugin,
     ThreeViewer,
 } from 'threepipe'
@@ -14,6 +15,7 @@ const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: true,
     zPrepass: true,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/geometry-generator-plugin/script.ts

@@ -1,4 +1,11 @@
-import {_testFinish, CameraViewPlugin, Object3DGeneratorPlugin, PickingPlugin, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    CameraViewPlugin,
+    LoadingScreenPlugin,
+    Object3DGeneratorPlugin,
+    PickingPlugin,
+    ThreeViewer,
+} from 'threepipe'
 import {GeometryGeneratorPlugin} from '@threepipe/plugin-geometry-generator'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
@@ -7,7 +14,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [PickingPlugin, CameraViewPlugin, Object3DGeneratorPlugin],
+        plugins: [PickingPlugin, CameraViewPlugin, Object3DGeneratorPlugin, LoadingScreenPlugin],
     })
     const generator = viewer.addPluginSync(GeometryGeneratorPlugin)
 

examples/geometry-uv-preview/script.ts

@@ -1,8 +1,9 @@
-import {_testFinish, GeometryUVPreviewPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, GeometryUVPreviewPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     rgbm: true,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/glb-export/script.ts

@@ -1,9 +1,10 @@
-import {_testFinish, downloadBlob, IMaterial, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, downloadBlob, IMaterial, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})
 
 async function init() {
+    viewer.addPluginSync(LoadingScreenPlugin)
 
     // Note: see asset-exporter-plugin example as well
 

examples/gltf-animation-page-scroll/script.ts

@@ -1,10 +1,11 @@
-import {_testFinish, GLTFAnimationPlugin, ICamera, ThreeViewer} from 'threepipe'
+import {_testFinish, GLTFAnimationPlugin, ICamera, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const gltfAnimation = viewer.addPluginSync(GLTFAnimationPlugin)

examples/gltf-animation-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, GLTFAnimationPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, GLTFAnimationPlugin, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
@@ -12,6 +12,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr is dropped
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     const gltfAnimation = viewer.addPluginSync(GLTFAnimationPlugin)

examples/gltf-camera-animation/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, GLTFAnimationPlugin, ICamera, ThreeViewer} from 'threepipe'
+import {_testFinish, GLTFAnimationPlugin, ICamera, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
@@ -12,6 +12,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr is dropped
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     const gltfAnimation = viewer.addPluginSync(GLTFAnimationPlugin)

examples/gltf-khr-material-variants-plugin/script.ts

@@ -1,4 +1,11 @@
-import {_testFinish, GLTFKHRMaterialVariantsPlugin, IObject3D, SSAAPlugin, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    GLTFKHRMaterialVariantsPlugin,
+    IObject3D,
+    LoadingScreenPlugin,
+    SSAAPlugin,
+    ThreeViewer,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,7 +13,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [SSAAPlugin, GLTFKHRMaterialVariantsPlugin],
+        plugins: [SSAAPlugin, GLTFKHRMaterialVariantsPlugin, LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/gltf-load/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, ThreeViewer} from 'threepipe'
+import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
@@ -17,6 +17,8 @@ async function init() {
         // plugins: [GLTFMeshOptDecodePlugin, KTX2LoadPlugin, GLTFKHRMaterialVariantsPlugin, ...],
     })
 
+    viewer.addPluginSync(LoadingScreenPlugin)
+
     await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
         setBackground: true,
     })

examples/gltf-transmission-test-msaa/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 const viewer = new ThreeViewer({
@@ -6,6 +6,7 @@ const viewer = new ThreeViewer({
     msaa: true,
     rgbm: true,
     zPrepass: false,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/gltf-transmission-test/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 const viewer = new ThreeViewer({
@@ -6,6 +6,7 @@ const viewer = new ThreeViewer({
     msaa: false,
     rgbm: true,
     zPrepass: false,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/half-float-hdr-test/script.ts

@@ -1,4 +1,13 @@
-import {_testFinish, BoxGeometry, Color, Mesh, PhysicalMaterial, ThreeViewer, TonemapPlugin} from 'threepipe'
+import {
+    _testFinish,
+    BoxGeometry,
+    Color,
+    LoadingScreenPlugin,
+    Mesh,
+    PhysicalMaterial,
+    ThreeViewer,
+    TonemapPlugin,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +15,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         rgbm: false,
+        plugins: [LoadingScreenPlugin],
     })
     viewer.scene.backgroundColor = new Color().set('black')
     viewer.getPlugin(TonemapPlugin)!.exposure = 0.04

examples/hdr-to-exr/script.ts

@@ -1,8 +1,9 @@
-import {_testFinish, downloadBlob, IAsset, ITexture, ThreeViewer} from 'threepipe'
+import {_testFinish, downloadBlob, IAsset, ITexture, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement})
 
 async function init() {
+    viewer.addPluginSync(LoadingScreenPlugin)
 
     // import a hdr file
     const dataTexture = await viewer.import<ITexture>('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

examples/hdri-ground-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, CameraViewPlugin, HDRiGroundPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, CameraViewPlugin, HDRiGroundPlugin, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -14,7 +14,7 @@ async function init() {
                 autoSetBackground: true,
             },
         },
-        plugins: [CameraViewPlugin],
+        plugins: [CameraViewPlugin, LoadingScreenPlugin],
     })
     const hdriGround = viewer.addPluginSync(HDRiGroundPlugin)
 

examples/hemisphere-light/script.ts

@@ -3,6 +3,7 @@ import {
     Box3B,
     HemisphereLight2,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     Object3DWidgetsPlugin,
     PhysicalMaterial,
@@ -24,7 +25,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr/exr is dropped
             },
         },
-        plugins: [Object3DWidgetsPlugin],
+        plugins: [Object3DWidgetsPlugin, LoadingScreenPlugin],
     })
 
     // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))

examples/html-js-sample/index.html

@@ -17,10 +17,13 @@
 <body>
 <canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>
 <script id="example-script" type="module" data-scripts="./index.html">
-    // import {ThreeViewer} from 'https://threepipe.org/dist/index.mjs'
-    import {ThreeViewer} from './../../dist/index.mjs'
+    // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs'
+    import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs'
+
     const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas')})
 
+    viewer.addPluginSync(LoadingScreenPlugin)
+
     // Load an environment map
     const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
     const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {

examples/image-load/script.ts

@@ -1,4 +1,13 @@
-import {_testFinish, ITexture, Mesh, PlaneGeometry, SRGBColorSpace, ThreeViewer, UnlitMaterial} from 'threepipe'
+import {
+    _testFinish,
+    ITexture,
+    LoadingScreenPlugin,
+    Mesh,
+    PlaneGeometry,
+    SRGBColorSpace,
+    ThreeViewer,
+    UnlitMaterial,
+} from 'threepipe'
 
 async function init() {
 
@@ -13,6 +22,7 @@ async function init() {
                 autoSetBackground: false,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.scene.setBackgroundColor('#555555')

examples/image-snapshot-export/script.ts

@@ -1,9 +1,10 @@
-import {_testFinish, downloadBlob, isWebpExportSupported, ThreeViewer} from 'threepipe'
+import {_testFinish, downloadBlob, isWebpExportSupported, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: true,
+    plugins: [LoadingScreenPlugin],
 })
 
 // Note: see also: CanvasSnapshotPlugin

examples/interaction-prompt-plugin/script.ts

@@ -1,10 +1,12 @@
-import {_testFinish, InteractionPromptPlugin, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, InteractionPromptPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     const interactionPrompt = viewer.addPluginSync(new InteractionPromptPlugin())

examples/ktx-load/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     ITexture,
     KTXLoadPlugin,
+    LoadingScreenPlugin,
     Mesh,
     PlaneGeometry,
     SRGBColorSpace,
@@ -17,6 +18,7 @@ async function init() {
         dropzone: {
             allowedExtensions: ['ktx'],
         },
+        plugins: [LoadingScreenPlugin],
     })
     viewer.addPluginSync(KTXLoadPlugin)
 

examples/ktx2-load/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     ITexture,
     KTX2LoadPlugin,
+    LoadingScreenPlugin,
     Mesh,
     PlaneGeometry,
     SRGBColorSpace,
@@ -18,7 +19,7 @@ async function init() {
         dropzone: {
             allowedExtensions: ['ktx2'],
         },
-        plugins: [KTX2LoadPlugin],
+        plugins: [KTX2LoadPlugin, LoadingScreenPlugin],
     })
 
     viewer.scene.setBackgroundColor('#555555')

examples/material-uiconfig/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/meshopt-simplify-modifier-plugin/script.ts

@@ -1,4 +1,11 @@
-import {_testFinish, IObject3D, MeshOptSimplifyModifierPlugin, PickingPlugin, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    IObject3D,
+    LoadingScreenPlugin,
+    MeshOptSimplifyModifierPlugin,
+    PickingPlugin,
+    ThreeViewer,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
@@ -7,7 +14,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [PickingPlugin],
+        plugins: [PickingPlugin, LoadingScreenPlugin],
         dropzone: {
             addOptions: {
                 disposeSceneObjects: true,

examples/multi-viewer-test/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, ThreeViewer} from 'threepipe'
+import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 const models = [
     'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
@@ -21,6 +21,7 @@ async function init(i: number) {
                 autoSetBackground: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {

examples/noise-bump-material-plugin/script.ts

@@ -1,4 +1,11 @@
-import {_testFinish, IObject3D, NoiseBumpMaterialPlugin, PhysicalMaterial, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    IObject3D,
+    LoadingScreenPlugin,
+    NoiseBumpMaterialPlugin,
+    PhysicalMaterial,
+    ThreeViewer,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +13,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const noiseBump = viewer.addPluginSync(NoiseBumpMaterialPlugin)

examples/normal-buffer-plugin/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     downloadBlob,
     HalfFloatType,
+    LoadingScreenPlugin,
     NoColorSpace,
     NormalBufferPlugin,
     RenderTargetPreviewPlugin,
@@ -12,6 +13,7 @@ import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/obj-to-glb/script.ts

@@ -1,6 +1,8 @@
-import {_testFinish, downloadBlob, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, downloadBlob, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
-const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})
+const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true,
+    plugins: [LoadingScreenPlugin],
+})
 
 async function init() {
 

examples/object-uiconfig/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/object3d-generator-plugin/script.ts

@@ -1,6 +1,7 @@
 import {
     _testFinish,
     CameraViewPlugin,
+    LoadingScreenPlugin,
     Object3DGeneratorPlugin,
     Object3DWidgetsPlugin,
     PickingPlugin,
@@ -14,7 +15,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [PickingPlugin, CameraViewPlugin, Object3DWidgetsPlugin, HierarchyUiPlugin],
+        plugins: [PickingPlugin, CameraViewPlugin, Object3DWidgetsPlugin, HierarchyUiPlugin, LoadingScreenPlugin],
     })
     const generator = viewer.addPluginSync(Object3DGeneratorPlugin)
 

examples/object3d-widgets-plugin/script.ts

@@ -1,6 +1,7 @@
 import {
     _testFinish,
     CameraViewPlugin,
+    LoadingScreenPlugin,
     Object3DGeneratorPlugin,
     Object3DWidgetsPlugin,
     ThreeViewer,
@@ -13,7 +14,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [CameraViewPlugin, Object3DGeneratorPlugin],
+        plugins: [CameraViewPlugin, Object3DGeneratorPlugin, LoadingScreenPlugin],
     })
     const widgets = viewer.addPluginSync(Object3DWidgetsPlugin)
 

examples/parallax-mapping-plugin/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     BoxGeometry,
     ITexture,
+    LoadingScreenPlugin,
     Mesh,
     ParallaxMappingPlugin,
     PhysicalMaterial,
@@ -15,7 +16,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [new SSAAPlugin(4)],
+        plugins: [new SSAAPlugin(4), LoadingScreenPlugin],
         dropzone: {
             addOptions: {
                 disposeSceneObjects: true,

examples/parallel-asset-import/script.ts

@@ -1,10 +1,11 @@
-import {_testFinish, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: false,
     rgbm: true,
     zPrepass: false,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/picking-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, PickingPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, PickingPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const picking = viewer.addPluginSync(PickingPlugin)

examples/ply-load/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, PLYLoadPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, PLYLoadPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
@@ -13,6 +13,7 @@ async function init() {
                 autoSetBackground: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(PLYLoadPlugin)

examples/pmat-material-export/script.ts

@@ -1,7 +1,18 @@
-import {_testFinish, downloadBlob, IMaterial, IObject3D, Mesh, SphereGeometry, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    downloadBlob,
+    IMaterial,
+    IObject3D,
+    LoadingScreenPlugin,
+    Mesh,
+    SphereGeometry,
+    ThreeViewer,
+} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
-const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})
+const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true,
+    plugins: [LoadingScreenPlugin],
+})
 
 async function init() {
 

examples/point-light/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     Box3B,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     Object3DWidgetsPlugin,
     PCFSoftShadowMap,
@@ -26,7 +27,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr/exr is dropped
             },
         },
-        plugins: [Object3DWidgetsPlugin],
+        plugins: [Object3DWidgetsPlugin, LoadingScreenPlugin],
     })
 
     // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))

examples/pointer-lock-controls-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, PointerLockControlsPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, PointerLockControlsPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,7 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [PointerLockControlsPlugin],
+        plugins: [PointerLockControlsPlugin, LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/popmotion-plugin/script.ts

@@ -1,10 +1,22 @@
-import {_testFinish, BoxGeometry, Color, Mesh, PhysicalMaterial, PopmotionPlugin, ThreeViewer, Vector3} from 'threepipe'
+import {
+    _testFinish,
+    BoxGeometry,
+    Color,
+    LoadingScreenPlugin,
+    Mesh,
+    PhysicalMaterial,
+    PopmotionPlugin,
+    ThreeViewer,
+    Vector3,
+} from 'threepipe'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
     const popmotion = viewer.addPluginSync(PopmotionPlugin)
 

examples/progressive-hdr-shadows-exp/script.ts

@@ -6,6 +6,7 @@ import {
     DataUtils,
     DirectionalLight,
     IObject3D,
+    LoadingScreenPlugin,
     MaterialExtension,
     ProgressivePlugin,
     ShaderChunk,
@@ -40,7 +41,7 @@ async function init() {
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: false,
         rgbm: false,
-        plugins: [new ProgressivePlugin((window as any).TESTING ? 20 : 200), SSAAPlugin],
+        plugins: [new ProgressivePlugin((window as any).TESTING ? 20 : 200), SSAAPlugin, LoadingScreenPlugin],
         dropzone: {
             addOptions: {
                 disposeSceneObjects: true,

examples/progressive-plugin/script.ts

@@ -4,6 +4,7 @@ import {
     Box3B,
     DirectionalLight,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     PhysicalMaterial,
     PlaneGeometry,
@@ -26,6 +27,7 @@ async function init() {
                 importConfig: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
     viewer.addPluginSync(new ProgressivePlugin((window as any).TESTING ? 20 : 200))
     viewer.addPluginSync(new SSAAPlugin())

examples/react-js-sample/index.html

@@ -17,15 +17,18 @@
 <body>
 <div id="root"></div>
 <script id="example-script" type="module" data-scripts="./index.html">
-    // import {ThreeViewer} from 'https://threepipe.org/dist/index.mjs'
-    import {ThreeViewer} from './../../dist/index.mjs'
+    // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs'
+    import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs'
     import React from 'https://esm.sh/react'
     import ReactDOM from 'https://esm.sh/react-dom'
 
     function ThreeViewerComponent({ src }) {
         const canvasRef = React.useRef(null);
         React.useEffect(() => {
-            const viewer = new ThreeViewer({canvas: canvasRef.current})
+            const viewer = new ThreeViewer({
+                canvas: canvasRef.current,
+                plugins: [LoadingScreenPlugin],
+            })
 
             // Load an environment map
             const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

examples/react-jsx-sample/index.html

@@ -19,15 +19,17 @@
 <body>
 <div id="root"></div>
 <script id="example-script" type="text/babel" data-scripts="./index.html" data-type="module">
-    // import {ThreeViewer} from 'https://threepipe.org/dist/index.mjs'
-    import {ThreeViewer} from './../../dist/index.mjs'
+    // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs'
+    import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs'
     import React from 'https://esm.sh/react'
     import ReactDOM from 'https://esm.sh/react-dom'
 
     function ThreeViewerComponent({ src, env }) {
         const canvasRef = React.useRef(null);
         React.useEffect(() => {
-            const viewer = new ThreeViewer({canvas: canvasRef.current})
+            const viewer = new ThreeViewer({canvas: canvasRef.current,
+                plugins: [LoadingScreenPlugin],
+            })
 
             // Load an environment map
             const envPromise = viewer.setEnvironmentMap(env)

examples/react-tsx-sample/script.tsx

@@ -1,4 +1,4 @@
-import {_testFinish, ThreeViewer} from 'threepipe'
+import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 // @ts-expect-error no need react here
 import React from 'react'
 // @ts-expect-error no need react-dom here
@@ -7,7 +7,9 @@ import ReactDOM from 'react-dom'
 function ThreeViewerComponent({src, env}: {src: string, env: string}) {
     const canvasRef = React.useRef(null)
     React.useEffect(() => {
-        const viewer = new ThreeViewer({canvas: canvasRef.current})
+        const viewer = new ThreeViewer({canvas: canvasRef.current,
+            plugins: [LoadingScreenPlugin],
+        })
 
         // Load an environment map
         const envPromise = viewer.setEnvironmentMap(env)

examples/rect-area-light/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     Box3B,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     Object3DWidgetsPlugin,
     PhysicalMaterial,
@@ -24,7 +25,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr/exr is dropped
             },
         },
-        plugins: [Object3DWidgetsPlugin],
+        plugins: [Object3DWidgetsPlugin, LoadingScreenPlugin],
     })
 
     // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))

examples/render-target-export/script.ts

@@ -3,6 +3,7 @@ import {
     DepthBufferPlugin,
     downloadBlob,
     isWebpExportSupported,
+    LoadingScreenPlugin,
     ThreeViewer,
     UnsignedByteType,
     WebGLRenderTarget,
@@ -12,6 +13,7 @@ import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     rgbm: false, // this will make the composer target not use RGBM encoding, and use HalfFloat. Otherwise, its UnsignedByteType
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/render-target-preview/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     DepthBufferPlugin,
     HalfFloatType,
+    LoadingScreenPlugin,
     NormalBufferPlugin,
     RenderTargetPreviewPlugin,
     ThreeViewer,
@@ -12,6 +13,7 @@ const viewer = new ThreeViewer({
     msaa: true,
     rgbm: true,
     zPrepass: false,
+    plugins: [LoadingScreenPlugin],
 })
 
 async function init() {

examples/rhino3dm-load/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
@@ -13,6 +13,7 @@ async function init() {
                 autoSetBackground: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(Rhino3dmLoadPlugin)

examples/scene-uiconfig/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/simplify-modifier-plugin/script.ts

@@ -4,6 +4,7 @@ import {
     IGeometry,
     IMaterial,
     IObject3D,
+    LoadingScreenPlugin,
     PickingPlugin,
     SimplifyModifierPlugin,
     ThreeViewer,
@@ -25,7 +26,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [PickingPlugin],
+        plugins: [PickingPlugin, LoadingScreenPlugin],
     })
 
     const simplify = viewer.addPluginSync(SimplifyModifierPluginImpl)

examples/splat-load/index.html

@@ -27,10 +27,12 @@
     </style>
     <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
-        import {_testFinish, ThreeViewer} from 'threepipe'
+        import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
         import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting'
 
-        const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
+        const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas'),
+            plugins: [LoadingScreenPlugin],
+        })
         viewer.addPluginsSync([GaussianSplattingPlugin])
 
         async function init() {

examples/spot-light/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     Box3B,
     IObject3D,
+    LoadingScreenPlugin,
     Mesh,
     Object3DWidgetsPlugin,
     PCFSoftShadowMap,
@@ -26,7 +27,7 @@ async function init() {
                 autoSetEnvironment: true, // when hdr/exr is dropped
             },
         },
-        plugins: [Object3DWidgetsPlugin],
+        plugins: [Object3DWidgetsPlugin, LoadingScreenPlugin],
     })
 
     // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))

examples/ssaa-plugin/script.ts

@@ -1,4 +1,12 @@
-import {_testFinish, IObject3D, PhysicalMaterial, ProgressivePlugin, SSAAPlugin, ThreeViewer} from 'threepipe'
+import {
+    _testFinish,
+    IObject3D,
+    LoadingScreenPlugin,
+    PhysicalMaterial,
+    ProgressivePlugin,
+    SSAAPlugin,
+    ThreeViewer,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -14,6 +22,7 @@ async function init() {
                 importConfig: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
     viewer.addPluginSync(new SSAAPlugin())
 

examples/ssao-plugin/script.ts

@@ -1,10 +1,18 @@
-import {_testFinish, RenderTargetPreviewPlugin, SSAAPlugin, SSAOPlugin, ThreeViewer, UnsignedByteType} from 'threepipe'
+import {
+    _testFinish,
+    LoadingScreenPlugin,
+    RenderTargetPreviewPlugin,
+    SSAAPlugin,
+    SSAOPlugin,
+    ThreeViewer,
+    UnsignedByteType,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: true,
-    plugins: [SSAAPlugin],
+    plugins: [SSAAPlugin, LoadingScreenPlugin],
     tonemap: false,
 })
 

examples/stl-load/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, STLLoadPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, STLLoadPlugin, ThreeViewer} from 'threepipe'
 
 async function init() {
 
@@ -13,6 +13,7 @@ async function init() {
                 autoSetBackground: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(STLLoadPlugin)

examples/svelte-sample/App.svelte

@@ -1,15 +1,17 @@
 <script>
     import {onDestroy, onMount} from 'svelte';
 
-    const {ThreeViewer} = window.threepipe; // umd imported from unpkg in index.html
+    const {ThreeViewer, LoadingScreenPlugin} = window.threepipe; // umd imported from unpkg in index.html
     // or
-    // import {ThreeViewer} from 'threepipe'; // esm imported from npm
+    // import {ThreeViewer, LoadingScreenPlugin} from 'threepipe'; // esm imported from npm
 
     let canvasRef;
     let viewer;
 
     onMount(() => {
-        viewer = new ThreeViewer({canvas: canvasRef});
+        viewer = new ThreeViewer({canvas: canvasRef,
+            plugins: [LoadingScreenPlugin],
+        });
 
         // Load an environment map
         const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');

examples/svg-geometry-playground/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     EditorViewWidgetPlugin,
     GBufferPlugin,
+    LoadingScreenPlugin,
     PickingPlugin,
     ThreeViewer,
     TransformControlsPlugin,
@@ -18,7 +19,7 @@ async function init() {
         rgbm: false,
         // zPrepass: true,
         tonemap: false,
-        plugins: [GBufferPlugin, PickingPlugin, TransformControlsPlugin],
+        plugins: [GBufferPlugin, PickingPlugin, TransformControlsPlugin, LoadingScreenPlugin],
     })
     viewer.addPluginSync(new EditorViewWidgetPlugin('bottom-left', 128))
 

examples/three-first-person-controls-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeFirstPersonControlsPlugin, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeFirstPersonControlsPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,7 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
-        plugins: [ThreeFirstPersonControlsPlugin],
+        plugins: [ThreeFirstPersonControlsPlugin, LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/three-svg-renderer-plugin/script.ts

@@ -1,9 +1,11 @@
 import {
     _testFinish,
+    DropzonePlugin,
     EditorViewWidgetPlugin,
     GBufferPlugin,
     GLTFAnimationPlugin,
     IObject3D,
+    LoadingScreenPlugin,
     PickingPlugin,
     ThreeViewer,
     TransformControlsPlugin,
@@ -19,7 +21,13 @@ async function init() {
         rgbm: false,
         // zPrepass: true,
         tonemap: false,
-        plugins: [GBufferPlugin, PickingPlugin, TransformControlsPlugin], /* TransformControlsPlugin */ // todo: transform controls doesnt work when selected object is in a parent.
+        plugins: [GBufferPlugin, PickingPlugin, TransformControlsPlugin, LoadingScreenPlugin], /* TransformControlsPlugin */ // todo: transform controls doesnt work when selected object is in a parent.
+        dropzone: {
+            autoAdd: true,
+            addOptions: {
+                disposeSceneObjects: true,
+            },
+        },
     })
     viewer.addPluginSync(new EditorViewWidgetPlugin('bottom-left', 128))
 
@@ -46,6 +54,10 @@ async function init() {
         'https://threejs.org/examples/models/obj/male02/male02.obj',
         'https://threejs.org/examples/models/gltf/kira.glb', // slow
 
+        // to test
+        'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets/Models/WaterBottle/glTF-Draco/WaterBottle.gltf',
+        'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets/Models/MaterialsVariantsShoe/glTF/MaterialsVariantsShoe.gltf',
+
         // not working/very slow
         'https://threejs.org/examples/models/gltf/Soldier.glb',
         'https://threejs.org/examples/models/gltf/LittlestTokyo.glb',
@@ -75,8 +87,7 @@ async function init() {
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
     ui.setupPlugins(ThreeSVGRendererPlugin)
-    ui.setupPlugins(GLTFAnimationPlugin)
-    ui.setupPlugins(PickingPlugin)
+    ui.setupPlugins(GLTFAnimationPlugin, PickingPlugin, DropzonePlugin)
 }
 
 init().finally(_testFinish)

examples/tonemap-plugin/script.ts

@@ -1,4 +1,12 @@
-import {_testFinish, DepthBufferPlugin, IObject3D, ThreeViewer, TonemapPlugin, UnsignedByteType} from 'threepipe'
+import {
+    _testFinish,
+    DepthBufferPlugin,
+    IObject3D,
+    LoadingScreenPlugin,
+    ThreeViewer,
+    TonemapPlugin,
+    UnsignedByteType,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +14,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         tonemap: true, // this is true by default
+        plugins: [LoadingScreenPlugin],
     })
 
     // A GBuffer(depth buffer here) is required for the `tonemapBackground` flag in TonemapPlugin to work

examples/transform-animation-plugin/script.ts

@@ -1,4 +1,11 @@
-import {_testFinish, IObject3D, PopmotionPlugin, ThreeViewer, TransformAnimationPlugin} from 'threepipe'
+import {
+    _testFinish,
+    IObject3D,
+    LoadingScreenPlugin,
+    PopmotionPlugin,
+    ThreeViewer,
+    TransformAnimationPlugin,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
@@ -6,7 +13,7 @@ async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
-        plugins: [PopmotionPlugin],
+        plugins: [PopmotionPlugin, LoadingScreenPlugin],
     })
     const transformAnimPlugin = viewer.addPluginSync(TransformAnimationPlugin)
     console.log(transformAnimPlugin)

examples/transform-controls-plugin/script.ts

@@ -1,10 +1,19 @@
-import {_testFinish, IObject3D, PickingPlugin, ThreeViewer, TransformControlsPlugin} from 'threepipe'
+import {
+    _testFinish,
+    IObject3D,
+    LoadingScreenPlugin,
+    PickingPlugin,
+    ThreeViewer,
+    TransformControlsPlugin,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.scene.setBackgroundColor(0x151822)

examples/tweakpane-ui-plugin/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer, TonemapPlugin} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/uint8-rgbm-hdr-test/script.ts

@@ -1,4 +1,13 @@
-import {_testFinish, BoxGeometry, Color, Mesh, PhysicalMaterial, ThreeViewer, TonemapPlugin} from 'threepipe'
+import {
+    _testFinish,
+    BoxGeometry,
+    Color,
+    LoadingScreenPlugin,
+    Mesh,
+    PhysicalMaterial,
+    ThreeViewer,
+    TonemapPlugin,
+} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +15,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         rgbm: true,
+        plugins: [LoadingScreenPlugin],
     })
     viewer.scene.backgroundColor = new Color().set('black')
     viewer.getPlugin(TonemapPlugin)!.exposure = 0.04

examples/usdz-load/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer, USDZLoadPlugin} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer, USDZLoadPlugin} from 'threepipe'
 
 async function init() {
 
@@ -13,6 +13,7 @@ async function init() {
                 autoSetBackground: true,
             },
         },
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(USDZLoadPlugin)

examples/viewer-uiconfig/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, IObject3D, ThreeViewer} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -6,6 +6,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         msaa: true,
+        plugins: [LoadingScreenPlugin],
     })
 
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

examples/vignette-plugin/script.ts

@@ -1,10 +1,12 @@
-import {_testFinish, IObject3D, ThreeViewer, VignettePlugin} from 'threepipe'
+import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer, VignettePlugin} from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
+        renderScale: 'auto',
+        plugins: [LoadingScreenPlugin],
     })
 
     viewer.addPluginSync(VignettePlugin)

examples/virtual-camera/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     IObject3D,
     LinearToneMapping,
+    LoadingScreenPlugin,
     Mesh,
     PerspectiveCamera2,
     PlaneGeometry,
@@ -20,7 +21,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         debug: true,
-        plugins: [new ProgressivePlugin(16)],
+        plugins: [new ProgressivePlugin(16), LoadingScreenPlugin],
     })
     const virtualCameras = viewer.addPluginSync(VirtualCamerasPlugin)
     const popmotion = viewer.addPluginSync(PopmotionPlugin)

examples/virtual-cameras-plugin/script.ts

@@ -2,6 +2,7 @@ import {
     _testFinish,
     HemisphereLight,
     IObject3D,
+    LoadingScreenPlugin,
     PerspectiveCamera2,
     ProgressivePlugin,
     RenderTargetPreviewPlugin,
@@ -17,7 +18,7 @@ async function init() {
     const viewer = new ThreeViewer({
         canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
         debug: true,
-        plugins: [new ProgressivePlugin(16), SSAAPlugin],
+        plugins: [new ProgressivePlugin(16), SSAAPlugin, LoadingScreenPlugin],
     })
     const virtualCameras = viewer.addPluginSync(VirtualCamerasPlugin)
 

examples/vue-html-sample/index.html

@@ -19,8 +19,8 @@
     <canvas id="three-canvas" style="width: 800px; height: 600px" ref="canvasRef"></canvas>
 </div>
 <script id="example-script" type="module" data-scripts="./index.html">
-    // import { ThreeViewer } from 'https://threepipe.org/dist/index.mjs'
-    import { ThreeViewer } from './../../dist/index.mjs'
+    // import { ThreeViewer, LoadingScreenPlugin } from 'https://threepipe.org/dist/index.mjs'
+    import { ThreeViewer, LoadingScreenPlugin } from './../../dist/index.mjs'
     import { createApp, ref, onMounted, onBeforeUnmount } from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js";
 
     const ThreeViewerComponent = {
@@ -28,7 +28,10 @@
             const canvasRef = ref(null);
 
             onMounted(() => {
-                const viewer = new ThreeViewer({ canvas: canvasRef.value });
+                const viewer = new ThreeViewer({
+                    canvas: canvasRef.value,
+                    plugins: [LoadingScreenPlugin],
+                });
 
                 // Load an environment map
                 const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');

examples/vue-sfc-sample/script.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import {ThreeViewer} from "threepipe";
+import {LoadingScreenPlugin, ThreeViewer} from "threepipe";
 import {onBeforeUnmount, onMounted, ref} from "vue"
 
 export default {
@@ -12,7 +12,10 @@ export default {
     const canvasRef = ref(null);
 
     onMounted(() => {
-      const viewer = new ThreeViewer({canvas: canvasRef.value});
+      const viewer = new ThreeViewer({
+        canvas: canvasRef.value,
+        plugins: [LoadingScreenPlugin],
+      });
 
       // Load an environment map
       const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');

examples/z-prepass/index.html

@@ -26,7 +26,7 @@
     </style>
     <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
-        import {_testFinish, DepthBufferPlugin, ThreeViewer, UnsignedByteType} from 'threepipe'
+        import {_testFinish, DepthBufferPlugin, LoadingScreenPlugin, ThreeViewer, UnsignedByteType} from 'threepipe'
 
         async function init() {
 
@@ -35,6 +35,7 @@
                 msaa: true,
                 rgbm: true,
                 zPrepass: true,
+                plugins: [LoadingScreenPlugin],
             })
 
             viewer.addPluginSync(new DepthBufferPlugin(UnsignedByteType, true))