@threepipe/plugin-3d-tiles-renderer 0.2.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@threepipe/plugin-3d-tiles-renderer",
+  "description": "Interface for 3d-tiles-renderer",
+  "version": "0.2.0",
+  "dependencies": {},
+  "overrides": {
+    "threepipe": "$threepipe",
+    "three": "$three",
+    "@types/three": "$@types/three"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
+    }
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "author": "repalash <palash@shaders.app>",
+  "license": "Apache-2.0",
+  "keywords": [
+    "three",
+    "three.js",
+    "threepipe",
+    "3d-tiles",
+    "maps"
+  ],
+  "bugs": {
+    "url": "https://github.com/repalash/threepipe/issues"
+  },
+  "homepage": "https://github.com/repalash/threepipe#readme",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/repalash/threepipe.git",
+    "directory": "plugins/tiles-renderer-3d"
+  },
+  "peerDependencies": {
+    "threepipe": "^0.0.43"
+  }
+}

package/src/B3DMLoadPlugin.ts

@@ -0,0 +1,64 @@
+import {
+    BaseImporterPlugin,
+    generateUUID,
+    GLTFLoader2,
+    IAssetImporter,
+    ILoader, ImportAddOptions,
+    Importer,
+    LoadingManager,
+    ThreeViewer,
+} from 'threepipe'
+import type {B3DMResult} from '3d-tiles-renderer/src/three/loaders/B3DMLoader'
+import {B3DMLoader, B3DMScene, LoaderBase} from '3d-tiles-renderer'
+import {GLTF} from 'three/examples/jsm/loaders/GLTFLoader'
+
+/**
+ * Adds support for loading .b3dm files and data uris.
+ * Batched 3D Model (b3dm) file format is part of OGC 3D Tiles.
+ * Specification - https://www.ogc.org/standards/3dtiles/
+ */
+export class B3DMLoadPlugin extends BaseImporterPlugin {
+    public static readonly PluginType = 'B3DMLoadPlugin'
+    protected _importer = new Importer(B3DMLoader2, ['b3dm'], ['model/b3dm'], false)
+
+    onAdded(viewer: ThreeViewer) {
+        super.onAdded(viewer)
+        this._importer.onCtor = (l, ai) => {
+            if (l) l.ai = ai
+            return l
+        }
+    }
+}
+
+// todo no need to extend GLTFLoader2 for just transform function, it can be called manually or rewritten
+export class B3DMLoader2 extends GLTFLoader2 implements ILoader<B3DMResult, B3DMScene> {
+    loader
+    ai?: IAssetImporter
+
+    constructor(manager: LoadingManager) {
+        super(manager)
+        this.loader = new B3DMLoader(manager)
+    }
+
+    transform(res: B3DMResult, options: ImportAddOptions): B3DMScene {
+        return super.transform(res, options) as any
+    }
+
+    parse(data: ArrayBuffer, _path: string, onLoad: (gltf: GLTF) => void, onError?: (event: ErrorEvent) => void, _url?: string) {
+        if (!this.ai) {
+            console.error('[B3DMLoader] load failed, IAssetImporter not set')
+        }
+        const tmpFile = generateUUID() + '.gltf'
+        this.ai?.registerFile(tmpFile) // to set the gltf loader in manager
+
+        ;(this.loader as LoaderBase).workingPath = _path
+
+        this.loader.parse(data)
+            .then(onLoad)
+            .catch(onError)
+            .finally(() => {
+                if (tmpFile) this.ai?.unregisterFile(tmpFile)
+            })
+        // super.parse(data, path, onLoad, onError, url)
+    }
+}

package/src/CMPTLoadPlugin.ts

@@ -0,0 +1,144 @@
+import {
+    AnyOptions,
+    BaseImporterPlugin,
+    FileLoader, generateUUID,
+    Group,
+    IAssetImporter,
+    ILoader,
+    Importer,
+    Loader,
+    LoaderUtils,
+    LoadingManager,
+    ThreeViewer,
+} from 'threepipe'
+import type {CMPTResult} from '3d-tiles-renderer/src/three/loaders/CMPTLoader'
+import {CMPTLoader, LoaderBase} from '3d-tiles-renderer'
+
+/**
+ * Adds support for loading .cmpt files and data uris.
+ * Composite (cmpt) file format is part of OGC 3D Tiles.
+ * Specification - https://www.ogc.org/standards/3dtiles/
+ */
+export class CMPTLoadPlugin extends BaseImporterPlugin {
+    public static readonly PluginType = 'CMPTLoadPlugin'
+    protected _importer = new Importer(CMPTLoader2, ['cmpt'], ['model/cmpt'], false)
+
+    onAdded(viewer: ThreeViewer) {
+        super.onAdded(viewer)
+        this._importer.onCtor = (l, ai) => {
+            if (l) l.ai = ai
+            return l
+        }
+    }
+}
+
+export class CMPTLoader2 extends Loader implements ILoader<CMPTResult, Group> {
+    loader
+    ai?: IAssetImporter
+
+    constructor(manager: LoadingManager) {
+        super(manager)
+        this.loader = new CMPTLoader(manager)
+    }
+
+
+    load(url: string, onLoad: (data: unknown) => void, onProgress?: (event: ProgressEvent) => void, onError?: (err: unknown) => void) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const scope = this
+
+        let resourcePath
+
+        if (this.resourcePath !== '') {
+
+            resourcePath = this.resourcePath
+
+        } else if (this.path !== '') {
+
+            resourcePath = this.path
+
+        } else {
+
+            resourcePath = LoaderUtils.extractUrlBase(url)
+
+        }
+
+        // Tells the LoadingManager to track an extra item, which resolves after
+        // the model is fully loaded. This means the count of items loaded will
+        // be incorrect, but ensures manager.onLoad() does not fire early.
+        this.manager.itemStart(url)
+
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const _onError = function(e: any) {
+
+            if (onError) {
+
+                onError(e)
+
+            } else {
+
+                console.error(e)
+
+            }
+
+            scope.manager.itemError(url)
+            scope.manager.itemEnd(url)
+
+        }
+
+        const loader = new FileLoader(this.manager)
+
+        loader.setPath(this.path)
+        loader.setResponseType('arraybuffer')
+        loader.setRequestHeader(this.requestHeader)
+        loader.setWithCredentials(this.withCredentials)
+
+        loader.load(url, function(data) {
+
+            try {
+
+                scope.parse(data as any, resourcePath, function(gltf) {
+
+                    onLoad(gltf)
+
+                    scope.manager.itemEnd(url)
+
+                }, _onError, url)
+
+            } catch (e) {
+
+                _onError(e)
+
+            }
+
+        }, onProgress, _onError)
+
+    }
+
+    transform(res: CMPTResult, _options: AnyOptions): Group {
+        return res.scene
+    }
+
+    parse(data: ArrayBuffer, _path: string, onLoad: (res: CMPTResult) => void, onError?: (event: ErrorEvent) => void, _url?: string) {
+        if (!this.ai) {
+            console.error('[CMPTLoader] load failed, IAssetImporter not set')
+        }
+        // todo register draco for inside pnts files
+
+        const tmpFile = generateUUID()
+        this.ai?.registerFile(tmpFile + '.gltf') // to set the gltf loader in manager
+        this.ai?.registerFile(tmpFile + '.drc') // to set the draco loader in manager
+
+        ;(this.loader as LoaderBase).workingPath = _path
+
+        this.loader.parse(data)
+            .then(onLoad)
+            .catch(onError)
+            .finally(() => {
+                if (tmpFile && this.ai) {
+                    this.ai.unregisterFile(tmpFile + '.gltf')
+                    this.ai.unregisterFile(tmpFile + '.drc')
+                }
+            })
+        // super.parse(data, path, onLoad, onError, url)
+    }
+}

package/src/DeepZoomImageLoadPlugin.ts

@@ -0,0 +1,49 @@
+import {BaseImporterPlugin, Importer, LoadingManager, ThreeViewer} from 'threepipe'
+// @ts-expect-error moduleResolution issue
+import {DeepZoomImagePlugin} from '3d-tiles-renderer/plugins'
+import {TilesRendererLoader, TilesRendererPlugin} from './TilesRendererPlugin'
+
+/**
+ * Adds support for loading .dzi files and data uris.
+ * Deep Zoom Image (dzi) file format - https://openseadragon.github.io/
+ */
+export class DeepZoomImageLoadPlugin extends BaseImporterPlugin {
+    public static readonly PluginType = 'DeepZoomImageLoadPlugin'
+    protected _importer = new Importer(DeepZoomImageLoader, ['dzi'], ['image/dzi'], false)
+
+    dependencies = [TilesRendererPlugin]
+
+    onAdded(viewer: ThreeViewer) {
+        super.onAdded(viewer)
+        this._importer.onCtor = (l, ai) => {
+            if (l) l.ai = ai
+            return l
+        }
+    }
+}
+
+export class DeepZoomImageLoader extends TilesRendererLoader {
+    constructor(manager: LoadingManager) {
+        super(manager)
+        this.plugins.push(
+            (opts)=>{
+                if (opts?.DeepZoomImagePlugin === false) return undefined
+                const op = typeof opts?.DeepZoomImagePlugin === 'object' ? opts.DeepZoomImagePlugin : {}
+                return new DeepZoomImagePlugin({
+                    // center: true,
+                    ...op,
+                })
+            },
+        )
+    }
+}
+
+declare module 'TilesRendererPlugin'{
+    interface TilesImportOptions {
+        DeepZoomImagePlugin?: boolean | {
+            center?: boolean,
+            pixelSize?: number,
+            useRecommendedSettings?: boolean,
+        }
+    }
+}

package/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() declare enabled: boolean
+    @uiInput() @serialize() declare cameraRadius: number
+    @uiInput() @serialize() declare rotationSpeed: number
+    @uiInput() @serialize() declare minAltitude: number
+    @uiInput() @serialize() declare maxAltitude: number
+    @uiInput() @serialize() declare minDistance: number
+    @uiInput() @serialize() maxDistance = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() declare minZoom: number
+    @uiInput() @serialize() maxZoom = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() declare zoomSpeed: number
+    @uiToggle() @serialize() declare adjustHeight: boolean
+    @uiToggle() @serialize() declare enableDamping: boolean
+    @uiInput() @serialize() declare dampingFactor: number
+    @uiToggle() @serialize() declare useFallbackPlane: boolean
+
+    @uiVector() @serialize() declare 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'>
+}

package/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() declare enabled: boolean
+    @uiInput() @serialize() declare cameraRadius: number
+    @uiInput() @serialize() declare rotationSpeed: number
+    @uiInput() @serialize() declare minAltitude: number
+    @uiInput() @serialize() declare maxAltitude: number
+    @uiInput() @serialize() declare minDistance: number
+    @uiInput() @serialize() maxDistance = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() declare minZoom: number
+    @uiInput() @serialize() maxZoom = 1e9 // should be Infinity but this breaks the UI
+    @uiInput() @serialize() declare zoomSpeed: number
+    @uiToggle() @serialize() declare adjustHeight: boolean
+    @uiToggle() @serialize() declare enableDamping: boolean
+    @uiInput() @serialize() declare dampingFactor: number
+    @uiToggle() @serialize() declare useFallbackPlane: boolean
+
+    @uiToggle() @serialize() declare nearMargin: number
+    @uiToggle() @serialize() declare farMargin: number
+
+    @uiVector() @serialize() declare 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()
+        }
+    }
+
+}

package/src/I3DMLoadPlugin.ts

@@ -0,0 +1,65 @@
+import {
+    BaseImporterPlugin,
+    generateUUID,
+    GLTF,
+    GLTFLoader2,
+    IAssetImporter,
+    ILoader,
+    ImportAddOptions,
+    Importer,
+    LoadingManager,
+    ThreeViewer,
+} from 'threepipe'
+import type {I3DMResult} from '3d-tiles-renderer/src/three/loaders/I3DMLoader'
+import {I3DMLoader, I3DMScene, LoaderBase} from '3d-tiles-renderer'
+
+/**
+ * Adds support for loading .i3dm files and data uris.
+ * Instanced 3D Model (i3dm) file format is part of OGC 3D Tiles.
+ * Specification - https://www.ogc.org/standards/3dtiles/
+ */
+export class I3DMLoadPlugin extends BaseImporterPlugin {
+    public static readonly PluginType = 'I3DMLoadPlugin'
+    protected _importer = new Importer(I3DMLoader2, ['i3dm'], ['model/i3dm'], false)
+
+    onAdded(viewer: ThreeViewer) {
+        super.onAdded(viewer)
+        this._importer.onCtor = (l, ai) => {
+            if (l) l.ai = ai
+            return l
+        }
+    }
+}
+
+// todo no need to extend GLTFLoader2 for just transform function, it can be called manually or rewritten
+export class I3DMLoader2 extends GLTFLoader2 implements ILoader<I3DMResult, I3DMScene> {
+    loader
+    ai?: IAssetImporter
+
+    constructor(manager: LoadingManager) {
+        super(manager)
+        this.loader = new I3DMLoader(manager)
+    }
+
+    transform(res: I3DMResult, options: ImportAddOptions): I3DMScene {
+        return super.transform(res, options) as any
+    }
+
+    parse(data: ArrayBuffer, _path: string, onLoad: (gltf: GLTF) => void, onError?: (event: ErrorEvent) => void, _url?: string) {
+        if (!this.ai) {
+            console.error('[I3DMLoader] load failed, IAssetImporter not set')
+        }
+        const tmpFile = generateUUID() + '.gltf'
+        this.ai?.registerFile(tmpFile) // to set the gltf loader in manager
+
+        ;(this.loader as LoaderBase).workingPath = _path
+
+        this.loader.parse(data)
+            .then(onLoad)
+            .catch(onError)
+            .finally(() => {
+                if (tmpFile) this.ai?.unregisterFile(tmpFile)
+            })
+        // super.parse(data, path, onLoad, onError, url)
+    }
+}

package/src/PNTSLoadPlugin.ts

@@ -0,0 +1,137 @@
+import {
+    AnyOptions,
+    BaseImporterPlugin,
+    FileLoader, generateUUID,
+    IAssetImporter,
+    ILoader,
+    Importer,
+    Loader,
+    LoaderUtils,
+    LoadingManager,
+    ThreeViewer,
+} from 'threepipe'
+import type {PNTSResult} from '3d-tiles-renderer/src/three/loaders/PNTSLoader'
+import {LoaderBase, PNTSLoader, PNTSScene} from '3d-tiles-renderer'
+
+/**
+ * Adds support for loading .pnts files and data uris.
+ * Point Cloud (pnts) file format is part of OGC 3D Tiles.
+ * Specification - https://www.ogc.org/standards/3dtiles/
+ */
+export class PNTSLoadPlugin extends BaseImporterPlugin {
+    public static readonly PluginType = 'PNTSLoadPlugin'
+    protected _importer = new Importer(PNTSLoader2, ['pnts'], ['model/pnts'], false)
+
+    onAdded(viewer: ThreeViewer) {
+        super.onAdded(viewer)
+        this._importer.onCtor = (l, ai) => {
+            if (l) l.ai = ai
+            return l
+        }
+    }
+}
+
+export class PNTSLoader2 extends Loader implements ILoader<PNTSResult, PNTSScene> {
+    loader
+    ai?: IAssetImporter
+
+    constructor(manager: LoadingManager) {
+        super(manager)
+        this.loader = new PNTSLoader(manager)
+    }
+
+    load(url: string, onLoad: (data: unknown) => void, onProgress?: (event: ProgressEvent) => void, onError?: (err: unknown) => void) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const scope = this
+
+        let resourcePath
+
+        if (this.resourcePath !== '') {
+
+            resourcePath = this.resourcePath
+
+        } else if (this.path !== '') {
+
+            resourcePath = this.path
+
+        } else {
+
+            resourcePath = LoaderUtils.extractUrlBase(url)
+
+        }
+
+        // Tells the LoadingManager to track an extra item, which resolves after
+        // the model is fully loaded. This means the count of items loaded will
+        // be incorrect, but ensures manager.onLoad() does not fire early.
+        this.manager.itemStart(url)
+
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const _onError = function(e: any) {
+
+            if (onError) {
+
+                onError(e)
+
+            } else {
+
+                console.error(e)
+
+            }
+
+            scope.manager.itemError(url)
+            scope.manager.itemEnd(url)
+
+        }
+
+        const loader = new FileLoader(this.manager)
+
+        loader.setPath(this.path)
+        loader.setResponseType('arraybuffer')
+        loader.setRequestHeader(this.requestHeader)
+        loader.setWithCredentials(this.withCredentials)
+
+        loader.load(url, function(data) {
+
+            try {
+
+                scope.parse(data as any, resourcePath, function(gltf) {
+
+                    onLoad(gltf)
+
+                    scope.manager.itemEnd(url)
+
+                }, _onError, url)
+
+            } catch (e) {
+
+                _onError(e)
+
+            }
+
+        }, onProgress, _onError)
+
+    }
+
+    transform(res: PNTSResult, _options: AnyOptions): PNTSScene {
+        return res.scene
+    }
+
+    parse(data: ArrayBuffer, _path: string, onLoad: (res: PNTSResult) => void, onError?: (event: ErrorEvent) => void, _url?: string) {
+        if (!this.ai) {
+            console.error('[PNTSLoader] load failed, IAssetImporter not set')
+        }
+
+        const tmpFile = generateUUID() + '.drc'
+        this.ai?.registerFile(tmpFile) // to set the draco loader in manager
+
+        ;(this.loader as LoaderBase).workingPath = _path
+
+        this.loader.parse(data)
+            .then(onLoad)
+            .catch(onError)
+            .finally(() => {
+                if (tmpFile) this.ai?.unregisterFile(tmpFile)
+            })
+        // super.parse(data, path, onLoad, onError, url)
+    }
+}

package/src/SlippyMapTilesLoadPlugin.ts

@@ -0,0 +1,50 @@
+import {BaseImporterPlugin, Importer, LoadingManager, ThreeViewer} from 'threepipe'
+// @ts-expect-error moduleResolution issue
+import {XYZTilesPlugin} from '3d-tiles-renderer/plugins'
+import {TilesRendererLoader, TilesRendererPlugin} from './TilesRendererPlugin'
+
+/**
+ * Adds support for loading slippy map tiles(OpenStreetMap) in png format
+ * https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
+ */
+export class SlippyMapTilesLoadPlugin extends BaseImporterPlugin {
+    public static readonly PluginType = 'SlippyMapTilesLoadPlugin'
+    static readonly DUMMY_EXT = 'xyztiles'
+    protected _importer = new Importer(SlippyMapTilesLoader, [SlippyMapTilesLoadPlugin.DUMMY_EXT], [], false)
+
+    dependencies = [TilesRendererPlugin]
+
+    onAdded(viewer: ThreeViewer) {
+        super.onAdded(viewer)
+        this._importer.onCtor = (l, ai) => {
+            if (l) l.ai = ai
+            return l
+        }
+    }
+}
+
+export class SlippyMapTilesLoader extends TilesRendererLoader {
+    constructor(manager: LoadingManager) {
+        super(manager)
+        this.plugins.push(
+            (opts)=>{
+                if (opts?.XYZTilesPlugin === false) return undefined
+                const op = typeof opts?.XYZTilesPlugin === 'object' ? opts.XYZTilesPlugin : {}
+                return new XYZTilesPlugin(op)
+            },
+        )
+    }
+}
+
+declare module 'TilesRendererPlugin'{
+    interface TilesImportOptions {
+        XYZTilesPlugin?: boolean | {
+            levels: number // default = 20,
+            tileDimension: number // default = 256,
+            pixelSize: number // default = 1e-5,
+            center?: boolean,
+            projection?: 'ellipsoid' | 'planar',
+            useRecommendedSettings?: boolean,
+        }
+    }
+}