Version bump, add prompt button for url in TilesRendererPlugin, update 3d tiles examples to use controls.

examples/3d-tiles-renderer/script.ts

@@ -1,5 +1,6 @@
-import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
-import {TilesRendererPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+import {_testFinish, _testStart, LoadingScreenPlugin, PickingPlugin, ThreeViewer} from 'threepipe'
+import {EnvironmentControls2, EnvironmentControlsPlugin, TilesRendererPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
 
@@ -16,29 +17,39 @@ async function init() {
                 autoSetBackground: true,
             },
         },
+        plugins: [LoadingScreenPlugin, EnvironmentControlsPlugin, PickingPlugin],
     })
 
-    viewer.scene.mainCamera.position.set(3, 3, 4)
-    // viewer.scene.mainCamera.position.set(300, 300, 300)
+    viewer.scene.mainCamera.controlsMode = 'environment'
+
+    viewer.scene.mainCamera.position.set(150, 150, 150)
+    viewer.scene.mainCamera.lookAt(0, 0, 0)
     // viewer.scene.mainCamera.autoNearFar = false
     // viewer.scene.mainCamera.minNearPlane = 1
     // viewer.scene.mainCamera.maxFarPlane = 1000
 
     const tiles = viewer.addPluginSync(TilesRendererPlugin)
 
-    viewer.addPluginSync(LoadingScreenPlugin)
-
-    // await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
-    //     setBackground: true,
-    // })
-
+    await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
     const result = await tiles.load('https://raw.githubusercontent.com/NASA-AMMOS/3DTilesRendererJS/c7a9a7f7607e8759d16c26fb83815ad1cd1fd865/example/data/tileset.json', {
         autoCenter: true,
         autoScale: true,
-        // autoScaleRadius: 100,
+        autoScaleRadius: 100,
+        tiles: {
+            // TilesFadePlugin: false,
+        },
     })
     console.log(result)
 
+    // optional
+    const controls = viewer.scene.mainCamera.controls as EnvironmentControls2
+    result && controls.setTilesRenderer(result.tilesRenderer)
+
+    const ui = viewer.addPluginSync(TweakpaneUiPlugin)
+    ui.appendChild(controls.uiConfig)
+    ui.setupPluginUi(PickingPlugin)
+
 }
 
+_testStart()
 init().finally(_testFinish)

examples/dzi-load/index.html

@@ -25,21 +25,27 @@
             overflow: hidden;
         }
     </style>
+    <script type="module" src="../examples-utils/global-loading.mjs"></script>
     <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" lang="ts">
-        import {_testFinish, LoadingScreenPlugin, ThreeViewer, SSAAPlugin} from 'threepipe'
-        import {DeepZoomImageLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+        import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer, SSAAPlugin} from 'threepipe'
+        import {DeepZoomImageLoadPlugin, EnvironmentControlsPlugin} from '@threepipe/plugin-3d-tiles-renderer'
 
-        const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas'), msaa: true, renderScale: window.devicePixelRatio, tonemap: false})
-        viewer.addPluginsSync([DeepZoomImageLoadPlugin, LoadingScreenPlugin, SSAAPlugin])
-
-        // todo why is camera change required here to start rendering?
+        const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas'),
+            msaa: true, renderScale: window.devicePixelRatio,
+            tonemap: false})
+        viewer.addPluginsSync([EnvironmentControlsPlugin, DeepZoomImageLoadPlugin, LoadingScreenPlugin, SSAAPlugin])
 
         async function init() {
 
             viewer.scene.mainCamera.position.set(0,0, 20)
+            viewer.scene.mainCamera.lookAt(0,0, 0)
             viewer.scene.mainCamera.minNearPlane = 0.1
             viewer.scene.mainCamera.setDirty()
+            viewer.scene.mainCamera.controlsMode = 'environment'
+            viewer.scene.mainCamera.controls.minDistance = 0.3
+            viewer.scene.mainCamera.controls.maxDistance = 30
+            viewer.scene.mainCamera.controls.maxZoom = 30
 
             // https://github.com/CesiumGS/3d-tiles-samples
             // from https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/example/data/root.b3dm
@@ -58,6 +64,7 @@
             console.log(result)
         }
 
+        _testStart()
         init().finally(_testFinish)
     </script>
 </head>

examples/ogc-tiles-google-maps-3d/script.ts

@@ -1,4 +1,4 @@
-import {_testFinish, LoadingScreenPlugin, MathUtils, OrbitControls3, ThreeViewer} from 'threepipe'
+import {_testFinish, _testStart, LoadingScreenPlugin, MathUtils, OrbitControls3, ThreeViewer} from 'threepipe'
 import {TilesRendererPlugin, UnloadTilesPlugin, TileCompressionPlugin} from '@threepipe/plugin-3d-tiles-renderer'
 import {CESIUM_ION_API_TOKEN} from '../globals.js'
 
@@ -55,4 +55,5 @@ async function init() {
 
 }
 
+_testStart()
 init().finally(_testFinish)

examples/ogc-tiles-google-maps/script.ts

@@ -1,5 +1,11 @@
-import {_testFinish, LoadingScreenPlugin, OrbitControls3, ThreeViewer} from 'threepipe'
-import {TileCompressionPlugin, TilesRendererPlugin, UnloadTilesPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
+import {
+    GlobeControls2,
+    GlobeControlsPlugin,
+    TileCompressionPlugin,
+    TilesRendererPlugin,
+    UnloadTilesPlugin,
+} from '@threepipe/plugin-3d-tiles-renderer'
 import {CESIUM_ION_API_TOKEN} from '../globals.js'
 
 async function init() {
@@ -12,29 +18,24 @@ async function init() {
         zPrepass: false,
         rgbm: false,
         // modelRootScale: 0.01,
+        plugins: [LoadingScreenPlugin, GlobeControlsPlugin],
     })
 
     viewer.scene.mainCamera.position.set(4800000, 2570000, 14720000)
     // viewer.scene.mainCamera.position.set(300, 300, 300)
+    viewer.scene.mainCamera.lookAt(0, 0, 0)
     viewer.scene.mainCamera.autoNearFar = false
-    viewer.scene.mainCamera.minNearPlane = 1
+    // viewer.scene.mainCamera.minNearPlane = 1
     viewer.scene.mainCamera.maxFarPlane = 160000000
     viewer.scene.mainCamera.fov = 60
-    const controls = viewer.scene.mainCamera.controls as OrbitControls3
-    controls.minDistance = 6.379e6
+    viewer.scene.mainCamera.controlsMode = 'globe'
+    const controls = viewer.scene.mainCamera.controls as GlobeControls2
+    // controls.minDistance = 6.379e6
     controls.maxDistance = 160000000
-    controls.clampMax.set(160000000, 160000000, 160000000)
-    // controls.minPolarAngle = 0
-    // controls.maxPolarAngle = 3 * Math.PI / 8
     controls.enableDamping = true
-    // controls.autoRotate = true
-    // controls.autoRotateSpeed = 0.5
-    // controls.enablePan = false
 
     const tiles = viewer.addPluginSync(TilesRendererPlugin)
 
-    viewer.addPluginSync(LoadingScreenPlugin)
-
     const result = await tiles.loadCesiumIon({
         assetId: '2275207',
         apiToken: CESIUM_ION_API_TOKEN,
@@ -42,7 +43,6 @@ async function init() {
     }, {
         autoCenter: false,
         autoScale: false,
-        // autoScaleRadius: 300,
         tiles: {
             TilesFadePlugin: true,
             plugins: [
@@ -54,9 +54,10 @@ async function init() {
     if (result) {
         result.rotateX(-Math.PI / 2)
         result.tilesRenderer.errorTarget = 40
+        controls.setTilesRenderer(result.tilesRenderer)
     }
-    console.log(result)
 
 }
 
+_testStart()
 init().finally(_testFinish)

examples/ogc-tiles-mars/script.ts

@@ -1,5 +1,5 @@
-import {_testFinish, FrameFadePlugin, LoadingScreenPlugin, SSAAPlugin, ThreeViewer} from 'threepipe'
-import {TilesRendererPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+import {_testFinish, _testStart, FrameFadePlugin, LoadingScreenPlugin, SSAAPlugin, ThreeViewer} from 'threepipe'
+import {EnvironmentControlsPlugin, TilesRendererPlugin} from '@threepipe/plugin-3d-tiles-renderer'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 
 async function init() {
@@ -17,10 +17,13 @@ async function init() {
                 autoSetBackground: false,
             },
         },
-        plugins: [LoadingScreenPlugin, FrameFadePlugin, SSAAPlugin],
+        plugins: [LoadingScreenPlugin, FrameFadePlugin, SSAAPlugin, EnvironmentControlsPlugin],
     })
 
+    viewer.scene.mainCamera.controlsMode = 'environment'
+    viewer.scene.mainCamera.controls!.minDistance = 0.25
     viewer.scene.mainCamera.position.set(30, 30, 40)
+    viewer.scene.mainCamera.lookAt(0, 0, 0)
     // viewer.scene.mainCamera.position.set(300, 300, 300)
     // viewer.scene.mainCamera.autoNearFar = false
     // viewer.scene.mainCamera.minNearPlane = 1
@@ -64,4 +67,5 @@ async function init() {
 
 }
 
+_testStart()
 init().finally(_testFinish)

examples/slippy-map-tiles/index.html

@@ -25,17 +25,19 @@
             overflow: hidden;
         }
     </style>
+    <script type="module" src="../examples-utils/global-loading.mjs"></script>
     <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" lang="ts">
-        import {_testFinish, LoadingScreenPlugin, ThreeViewer, SSAAPlugin} from 'threepipe'
-        import {SlippyMapTilesLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+        import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer, SSAAPlugin} from 'threepipe'
+        import {SlippyMapTilesLoadPlugin, EnvironmentControlsPlugin} from '@threepipe/plugin-3d-tiles-renderer'
+
 
         const viewer = new ThreeViewer({
             canvas: document.getElementById('mcanvas'),
             msaa: true, renderScale: window.devicePixelRatio,
             tonemap: false,
         })
-        viewer.addPluginsSync([SlippyMapTilesLoadPlugin, LoadingScreenPlugin, SSAAPlugin])
+        viewer.addPluginsSync([EnvironmentControlsPlugin, SlippyMapTilesLoadPlugin, LoadingScreenPlugin, SSAAPlugin])
 
         // todo once loaded small tiles, its not loading back the bigger ones on zoom out
         //   also getting weird behaviour sometimes
@@ -43,8 +45,12 @@
         async function init() {
 
             viewer.scene.mainCamera.position.set(0,0, 20)
+            viewer.scene.mainCamera.lookAt(0,0, 0)
             viewer.scene.mainCamera.minNearPlane = 0.1
             viewer.scene.mainCamera.setDirty()
+            viewer.scene.mainCamera.controlsMode = 'environment'
+            viewer.scene.mainCamera.controls.minDistance = 0.3
+            viewer.scene.mainCamera.controls.maxDistance = 30
 
             // https://github.com/CesiumGS/3d-tiles-samples
             // from https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/example/data/root.b3dm
@@ -61,10 +67,9 @@
                     },
                 }
             })
-            viewer.setDirty()
-            console.log(result)
             // result.rotation.x = - Math.PI / 2;
         }
+        _testStart()
         init().finally(_testFinish)
     </script>
 </head>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "threepipe",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "threepipe",
-      "version": "0.0.42",
+      "version": "0.0.43",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.157.1006/package.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "threepipe",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

plugins/3d-tiles-renderer/src/TilesRendererPlugin.ts

@@ -16,7 +16,7 @@ import {
     Loader,
     ImportAddOptions,
     LoadingManager,
-    ThreeViewer, Sphere,
+    ThreeViewer, Sphere, uiButton,
 } from 'threepipe'
 import {TilesGroup, TilesRenderer} from '3d-tiles-renderer'
 import {gltfCesiumRTCExtension, gltfMeshFeaturesExtension, gltfStructuralMetadataExtension} from './gltf'
@@ -197,6 +197,12 @@ export class TilesRendererPlugin extends AViewerPluginSync<TilesRendererPluginEv
         this.dispatchEvent({type: 'addTile', group})
     }
 
+    @uiButton()
+    async promptForURL() {
+        const url = await this._viewer?.dialog.prompt('TilesRendererPlugin: Enter URL for the root tileset', '', true)
+        if (!url) return
+        return this.load(url)
+    }
 }
 
 export class TilesRendererLoader extends Loader implements ILoader<TilesRendererGroup> {

src/viewer/version.ts

@@ -1 +1 @@
-export const VERSION = '0.0.42'
+export const VERSION = '0.0.43'