Add GlobeControls, EnvironmentControls, update lib version

plugins/3d-tiles-renderer/package-lock.json

@@ -1,19 +1,19 @@
 {
     "name": "@threepipe/plugin-3d-tiles-renderer",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@threepipe/plugin-3d-tiles-renderer",
-            "version": "0.1.0",
+            "version": "0.2.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "three": "file:./../../node_modules/three",
                 "threepipe": "file:./../../src/"
             },
             "devDependencies": {
-                "3d-tiles-renderer": "^0.4.8"
+                "3d-tiles-renderer": "^0.4.9"
             }
         },
         "../../node_modules/three": {
@@ -55,9 +55,9 @@
             }
         },
         "node_modules/@types/react": {
-            "version": "19.1.2",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
-            "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
+            "version": "19.1.3",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.3.tgz",
+            "integrity": "sha512-dLWQ+Z0CkIvK1J8+wrDPwGxEYFA4RAyHoZPxHVGspYmFVnwGSNT24cGIhFJrtfRnWVuW8X7NO52gCXmhkVUWGQ==",
             "dev": true,
             "license": "MIT",
             "optional": true,
@@ -85,9 +85,9 @@
             "optional": true
         },
         "node_modules/3d-tiles-renderer": {
-            "version": "0.4.8",
-            "resolved": "https://registry.npmjs.org/3d-tiles-renderer/-/3d-tiles-renderer-0.4.8.tgz",
-            "integrity": "sha512-hMulyUC1aB6Z20XzhWaQ3jNhwmt8XFNwceFx+ynWzJx9soZpApolSib9MEdW4Yyc2m+WSIwWhe6GVmOo8LDnlQ==",
+            "version": "0.4.9",
+            "resolved": "https://registry.npmjs.org/3d-tiles-renderer/-/3d-tiles-renderer-0.4.9.tgz",
+            "integrity": "sha512-vznWfg6LimEilMfR23xB5kIGllodIE83GOH9w2zIQyvkzUKPY+Qp06JN5sdch+fu5UD92DQILVbzIs31rjXhJw==",
             "dev": true,
             "license": "Apache-2.0",
             "optionalDependencies": {

plugins/3d-tiles-renderer/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@threepipe/plugin-3d-tiles-renderer",
     "description": "Interface for 3d-tiles-renderer",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "devDependencies": {
-        "3d-tiles-renderer": "^0.4.8"
+        "3d-tiles-renderer": "^0.4.9"
     },
     "dependencies": {
         "three": "file:./../../node_modules/three",
@@ -25,7 +25,7 @@
         "replace": {
             "dependencies": {},
             "peerDependencies": {
-                "threepipe": "^0.0.41"
+                "threepipe": "^0.0.43"
             }
         }
     },

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

@@ -0,0 +1,52 @@
+import {
+    ACameraControlsPlugin,
+    Camera,
+    serialize,
+    TControlsCtor,
+    uiFolderContainer,
+    uiInput,
+    uiToggle,
+    uiVector,
+    Vector3,
+} from 'threepipe'
+import {EnvironmentControls} from '3d-tiles-renderer'
+import {UiObjectConfig} from 'uiconfig.js'
+
+export class EnvironmentControlsPlugin extends ACameraControlsPlugin {
+    public static readonly PluginType = 'EnvironmentControlsPlugin'
+    readonly controlsKey = 'environment'
+
+    protected _controlsCtor: TControlsCtor = (object, domElement) => {
+        return new EnvironmentControls2(object.parent ?? undefined, object, !domElement?.ownerDocument ? (domElement || document).documentElement : domElement)
+    }
+}
+
+@uiFolderContainer('Environment Controls')
+export class EnvironmentControls2 extends EnvironmentControls {
+    @uiToggle() @serialize() enabled: boolean
+    @uiInput() @serialize() cameraRadius: number
+    @uiInput() @serialize() rotationSpeed: number
+    @uiInput() @serialize() minAltitude: number
+    @uiInput() @serialize() maxAltitude: number
+    @uiInput() @serialize() minDistance: number
+    @uiInput() @serialize() maxDistance = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() minZoom: number
+    @uiInput() @serialize() maxZoom = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() zoomSpeed: number
+    @uiToggle() @serialize() adjustHeight: boolean
+    @uiToggle() @serialize() enableDamping: boolean
+    @uiInput() @serialize() dampingFactor: number
+    @uiToggle() @serialize() useFallbackPlane: boolean
+
+    @uiVector() @serialize() pivotPoint: Vector3
+
+    // does nothing right now, required so autoLookAtTarget is not used
+    target = new Vector3()
+
+    get object() {
+        // @ts-expect-error not in ts
+        return this.camera as Camera/* |null*/
+    }
+
+    declare uiConfig: UiObjectConfig<void, 'folder'>
+}

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

@@ -0,0 +1,75 @@
+import {
+    ACameraControlsPlugin, ICamera,
+    OrthographicCamera2,
+    PerspectiveCamera2,
+    serialize,
+    TControlsCtor,
+    uiFolderContainer,
+    uiInput,
+    uiToggle,
+    uiVector,
+    Vector3,
+} from 'threepipe'
+import {GlobeControls} from '3d-tiles-renderer'
+import {UiObjectConfig} from 'uiconfig.js'
+
+export class GlobeControlsPlugin extends ACameraControlsPlugin {
+    public static readonly PluginType = 'GlobeControlsPlugin'
+    readonly controlsKey = 'globe'
+
+    protected _controlsCtor: TControlsCtor = (object, domElement) => {
+        if ((object as ICamera).userData.autoNearFar) {
+            console.warn('GlobeControlsPlugin: autoNearFar is not supported with GlobeControlsPlugin, it will be disabled, use EnvironmentControlsPlugin instead to keep default behaviour')
+            ;(object as ICamera).userData.autoNearFar = false
+        }
+        return new GlobeControls2(object.parent ?? undefined, object, !domElement?.ownerDocument ? (domElement || document).documentElement : domElement)
+    }
+}
+
+@uiFolderContainer('Globe Controls')
+export class GlobeControls2 extends GlobeControls {
+    @uiToggle() @serialize() enabled: boolean
+    @uiInput() @serialize() cameraRadius: number
+    @uiInput() @serialize() rotationSpeed: number
+    @uiInput() @serialize() minAltitude: number
+    @uiInput() @serialize() maxAltitude: number
+    @uiInput() @serialize() minDistance: number
+    @uiInput() @serialize() maxDistance = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() minZoom: number
+    @uiInput() @serialize() maxZoom = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() zoomSpeed: number
+    @uiToggle() @serialize() adjustHeight: boolean
+    @uiToggle() @serialize() enableDamping: boolean
+    @uiInput() @serialize() dampingFactor: number
+    @uiToggle() @serialize() useFallbackPlane: boolean
+
+    @uiToggle() @serialize() nearMargin: number
+    @uiToggle() @serialize() farMargin: number
+
+    @uiVector() @serialize() pivotPoint: Vector3
+
+    declare camera: PerspectiveCamera2 | OrthographicCamera2
+    // does nothing right now, required so autoLookAtTarget is not used
+    target = new Vector3()
+
+    get object() {
+        return this.camera
+    }
+
+    declare uiConfig: UiObjectConfig<void, 'folder'>
+
+    // this is a workaround required because GlobeControls changes the near, far and we need it in minNear and minFar
+    update(deltaTime?: number) {
+        const {near, far} = this.camera
+        super.update(deltaTime)
+        if (this.camera.userData.autoNearFar || this.camera.userData.autoNearFar === undefined) return
+        if (this.camera.near !== near || this.camera.far !== far) {
+            this.camera.userData.minNearPlane = this.camera.near // dont set without userData, as that will trigger setDirty
+            this.camera.userData.maxFarPlane = this.camera.far
+            this.camera.near = near
+            this.camera.far = far
+            this.camera.updateProjectionMatrix()
+        }
+    }
+
+}

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

@@ -16,13 +16,12 @@ import {
     Loader,
     ImportAddOptions,
     LoadingManager,
-    ThreeViewer,
+    ThreeViewer, Sphere,
 } from 'threepipe'
 import {TilesGroup, TilesRenderer} from '3d-tiles-renderer'
 import {gltfCesiumRTCExtension, gltfMeshFeaturesExtension, gltfStructuralMetadataExtension} from './gltf'
 // @ts-expect-error moduleResolution issue
 import {ImplicitTilingPlugin, TilesFadePlugin, UpdateOnChangePlugin, CesiumIonAuthPlugin} from '3d-tiles-renderer/plugins'
-import {Sphere} from 'three'
 
 export type TilesRendererGroup = TilesGroup & IObject3D
 
@@ -259,6 +258,16 @@ export class TilesRendererLoader extends Loader implements ILoader<TilesRenderer
             group.computeBoundingSphere!()
         })
 
+        // const sup = group.updateWorldMatrix
+        // todo remove in next version
+        group.updateWorldMatrix = (updateParents) => {
+            if (group.parent && updateParents) {
+                group.parent.updateWorldMatrix(updateParents, false)
+            }
+            // run the normal update function to ensure children and inverse matrices are in sync
+            group.updateMatrixWorld(true)
+        }
+
         // Save promise to tell the viewer/scene when the load is finished, it can then autoScale, autoCenter etc
         let resolve: any
         // let reject: any
@@ -304,9 +313,9 @@ export class TilesRendererLoader extends Loader implements ILoader<TilesRenderer
         }
         tiles.addEventListener('load-content', setDirty)
         tiles.addEventListener('load-tile-set', setDirty)
-        tiles.addEventListener('force-rerender', setDirty)
+        tiles.addEventListener('needs-update', setDirty)
 
-        // tiles.update()
+        tiles.update()
         onLoad(group)
 
     }

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

@@ -5,6 +5,8 @@ export {PNTSLoadPlugin} from './PNTSLoadPlugin'
 export {CMPTLoadPlugin} from './CMPTLoadPlugin'
 export {DeepZoomImageLoadPlugin} from './DeepZoomImageLoadPlugin'
 export {SlippyMapTilesLoadPlugin} from './SlippyMapTilesLoadPlugin'
+export {EnvironmentControlsPlugin, EnvironmentControls2} from './EnvironmentControlsPlugin'
+export {GlobeControlsPlugin, GlobeControls2} from './GlobeControlsPlugin'
 export {
     CesiumIonAuthPlugin,
     ReorientationPlugin,