s3m-three 0.3.1 → 0.3.3

package/dist/render/S3MViewer.js

@@ -109,8 +109,24 @@ export class S3MViewer {
     _needsRepaint = true;
     _frame = 0;
     _fps = { value: 0, last: 0 };
-    _keyLight = null;
-    _fillLight = null;
+    _ambientLight;
+    _hemiLight;
+    _keyLight;
+    _fillLight;
+    _lightOptions = {
+        ambientIntensity: 0.4,
+        ambientColor: 0xffffff,
+        hemisphereIntensity: 0.8,
+        hemisphereColor: 0xffffff,
+        hemisphereGroundColor: 0xb6c0cb,
+        keyLightIntensity: 1.0,
+        keyLightColor: 0xffffff,
+        fillLightIntensity: 0.35,
+        fillLightColor: 0xffffff,
+        mode: 'headlamp',
+        azimuth: 150,
+        altitude: 50,
+    };
     _datasetQueue;
     /** 宿主重画信号与地图朝向，构造时注入 */
     _onRequestRepaint = () => { };
@@ -120,10 +136,19 @@ export class S3MViewer {
     _requestRepaint() {
         this._onRequestRepaint();
     }
+    triggerRepaint() {
+        this._requestRepaint();
+    }
     constructor(options = {}) {
         this.options = options;
         this.pickable = options.pickable !== false;
         this._lodRangeScale = options.lodRangeScale ?? 1.0;
+        if (options.light) {
+            Object.assign(this._lightOptions, options.light);
+        }
+        if (options.totalMaxTiles) {
+            this._datasetManager.totalMaxTiles = options.totalMaxTiles;
+        }
         this._onRequestRepaint = options.onRequestRepaint ?? (() => { });
         this._getBearing = options.getBearing;
         this.onStats = options.onStats ?? (() => { });
@@ -131,6 +156,11 @@ export class S3MViewer {
         this.onPick = options.onPick ?? (() => { });
         this.onError = options.onError ?? ((e) => console.warn('[s3m]', e));
         this.groundManager = new GroundManager(options.ground);
+        if (!this.scene) {
+            this.scene = new THREE.Scene();
+            this.scene.add(this.groundManager.group);
+            this._addLights();
+        }
         this._featureStyleManager = new FeatureStyleManager(() => this.style.floorHeight, () => this._requestRepaint(), () => {
             if (this._selection)
                 this._syncSelectionStyle();
@@ -159,18 +189,23 @@ export class S3MViewer {
      * 绑定宿主画布与 WebGL 上下文，建场景并启动数据集队列。
      * MapLibre 宿主由 S3MLayer 在 onAdd 里调用；纯 three 宿主直接传自己的 canvas / gl。
      */
-    mount(canvas, gl) {
-        this.canvas = canvas;
-        this.renderer = new THREE.WebGLRenderer({
+    /** 创建并配置一个绑定到给定 gl 上下文的 three renderer（mount 与上下文恢复共用） */
+    _createRenderer(canvas, gl) {
+        const r = new THREE.WebGLRenderer({
             canvas,
             context: gl,
             antialias: true,
         });
-        this.renderer.autoClear = false;
-        this.renderer.setPixelRatio(1);
+        r.autoClear = false;
+        r.setPixelRatio(1);
         // 白模 albedo 接近 1，不做色调映射会过曝成一片纯白、丢失明暗关系
-        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
-        this.renderer.toneMappingExposure = 1.0;
+        r.toneMapping = THREE.ACESFilmicToneMapping;
+        r.toneMappingExposure = 1.0;
+        return r;
+    }
+    mount(canvas, gl) {
+        this.canvas = canvas;
+        this.renderer = this._createRenderer(canvas, gl);
         setMaxAnisotropy(this.renderer.capabilities.getMaxAnisotropy());
         this.scene = new THREE.Scene();
         this.scene.add(this.groundManager.group);
@@ -183,6 +218,38 @@ export class S3MViewer {
             void this.addDataset(ds).catch((e) => this.onError(e));
         this._recomputeAnchors();
     }
+    /**
+     * WebGL 上下文恢复后原地换新 renderer，保留已经加载好的场景与瓦片。
+     *
+     * MapLibre 在 `webglcontextlost` 时会销毁 style 并丢弃自定义图层（自定义图层
+     * 无法序列化进 style，所以恢复后不会自动加回）。但自定义图层的 `onRemove` 不会被
+     * 调用，因此我们的 scene / 几何体 / 材质 / 纹理 / 已加载瓦片都还在内存里。
+     *
+     * three 的 GPU 状态是按 renderer 实例缓存的，所以只需把 renderer / picker 换成
+     * 绑在新 gl 上的新实例，下一帧渲染时 three 会自动把现存的几何体、材质、纹理
+     * 重新上传到新上下文 —— 不需要重建场景，也不需要重新拉瓦片。
+     */
+    restoreContext(gl) {
+        if (!this.canvas) {
+            // 理论不会走到：没 mount 过就没有上下文可恢复
+            console.warn('[s3m] restoreContext 调用过早（尚未 mount），按首次挂载处理');
+            return;
+        }
+        try {
+            // 旧上下文已失效，dispose 可能抛错，忽略即可
+            this.renderer?.dispose();
+        }
+        catch {
+            /* noop */
+        }
+        this.renderer = this._createRenderer(this.canvas, gl);
+        setMaxAnisotropy(this.renderer.capabilities.getMaxAnisotropy());
+        this.picker?.dispose();
+        this.picker = new Picker(this.renderer);
+        // 共享 uniform / 材质引用不变，three 重新编译着色器时会自然接管；
+        // 这里只确保下一帧尽快驱动一次渲染。
+        this._requestRepaint();
+    }
     /** 解绑场景并释放全部 GPU 资源。对应 MapLibre 图层的 onRemove()。 */
     unmount() {
         for (const id of [...this.datasets.keys()])
@@ -207,24 +274,64 @@ export class S3MViewer {
         this.renderer = null;
         this.canvas = null;
     }
+    _createLights() {
+        this._ambientLight = new THREE.AmbientLight(this._lightOptions.ambientColor, this._lightOptions.ambientIntensity);
+        this._hemiLight = new THREE.HemisphereLight(this._lightOptions.hemisphereColor, this._lightOptions.hemisphereGroundColor, this._lightOptions.hemisphereIntensity);
+        this._keyLight = new THREE.DirectionalLight(this._lightOptions.keyLightColor, this._lightOptions.keyLightIntensity);
+        this._fillLight = new THREE.DirectionalLight(this._lightOptions.fillLightColor, this._lightOptions.fillLightIntensity);
+        this._updateLights();
+    }
     _addLights() {
         if (!this.scene)
             return;
-        // 环境光与天光打底，保证背光面和折叠处不死黑
-        this.scene.add(new THREE.AmbientLight(0xffffff, 0.4));
-        this.scene.add(new THREE.HemisphereLight(0xffffff, 0xb6c0cb, 0.8));
-        // 主光 / 补光的方向每帧按地图朝向重算（见 _updateLights），
-        // 这样旋转视角时白模始终是亮的，不会转到背光面就一片死灰。
-        this._keyLight = new THREE.DirectionalLight(0xffffff, 1.0);
-        this._fillLight = new THREE.DirectionalLight(0xffffff, 0.35);
-        this.scene.add(this._keyLight, this._fillLight);
+        if (!this._ambientLight)
+            this._createLights();
+        this.scene.add(this._ambientLight, this._hemiLight, this._keyLight, this._fillLight);
+    }
+    _applyLightOptions() {
+        if (this._ambientLight) {
+            this._ambientLight.intensity = this._lightOptions.ambientIntensity;
+            this._ambientLight.color.set(this._lightOptions.ambientColor);
+        }
+        if (this._hemiLight) {
+            this._hemiLight.intensity = this._lightOptions.hemisphereIntensity;
+            this._hemiLight.color.set(this._lightOptions.hemisphereColor);
+            this._hemiLight.groundColor.set(this._lightOptions.hemisphereGroundColor);
+        }
+        if (this._keyLight) {
+            this._keyLight.intensity = this._lightOptions.keyLightIntensity;
+            this._keyLight.color.set(this._lightOptions.keyLightColor);
+        }
+        if (this._fillLight) {
+            this._fillLight.intensity = this._lightOptions.fillLightIntensity;
+            this._fillLight.color.set(this._lightOptions.fillLightColor);
+        }
+    }
+    /**
+     * 动态设置光照配置
+     */
+    setLight(options) {
+        Object.assign(this._lightOptions, options);
+        this._applyLightOptions();
+        this._updateLights();
+        this._needsRepaint = true;
+        this.triggerRepaint();
+    }
+    /**
+     * 获取当前光照配置快照
+     */
+    getLight() {
+        return { ...this._lightOptions };
     }
     /**
-     * 让光照跟着地图朝向走：主光在镜头后上方偏左，补光在后上方偏右。
-     * 相当于一盏头灯，看到的立面永远是受光面。
+     * 更新光照位置与方向：
+     * - 'headlamp': 随地图方位角 bearing 旋转，主光始终在镜头上方，受光面面向镜头；
+     * - 'fixed': 固定世界方位角（如模拟恒定日光）。
      */
     _updateLights() {
-        const bearing = ((this._getBearing?.() ?? 0) * Math.PI) / 180;
+        if (!this._keyLight || !this._fillLight)
+            return;
+        const bearing = this._lightOptions.mode === 'fixed' ? 0 : (((this._getBearing?.() ?? 0) * Math.PI) / 180);
         const place = (light, azOffsetDeg, elevDeg) => {
             if (!light)
                 return;
@@ -233,8 +340,8 @@ export class S3MViewer {
             const c = Math.cos(el);
             light.position.set(Math.sin(az) * c, Math.cos(az) * c, Math.sin(el)).multiplyScalar(1000);
         };
-        place(this._keyLight, 150, 50);
-        place(this._fillLight, 215, 30);
+        place(this._keyLight, this._lightOptions.azimuth, this._lightOptions.altitude);
+        place(this._fillLight, this._lightOptions.azimuth + 65, Math.max(10, this._lightOptions.altitude - 20));
     }
     /* ---------------------------------------------------------------- 数据集 */
     _normalizeDatasets(options) {
@@ -629,6 +736,28 @@ export class S3MViewer {
      * 而 LOD 细化、瓦片重载、淘汰回补都会换掉 mesh —— 不重放的话，用户点中的那栋楼
      * 一细化就失去高亮（状态还在 _selection.smid 里，只是没人往新 mesh 上刷）。
      */
+    /**
+     * 判断一块无 SMID 单体化信息的网格（如倾斜摄影或白模整块）是否空间覆盖当前选中命中点
+     */
+    _isMeshCoveringSelection(mesh, sel) {
+        if (!sel.point)
+            return false;
+        const geom = mesh.geometry;
+        if (!geom)
+            return false;
+        if (!geom.boundingBox)
+            geom.computeBoundingBox();
+        if (!geom.boundingBox)
+            return false;
+        // 将选中的三维场景点转入网格局部坐标系进行包围盒检测
+        const pt = new THREE.Vector3(sel.point[0], sel.point[1], sel.point[2]);
+        mesh.updateWorldMatrix(true, false);
+        const inv = mesh.matrixWorld.clone().invert();
+        const localPt = pt.applyMatrix4(inv);
+        // 留出 0.5 米容差，避免刚好处于三角网格边缘缝隙时漏判
+        const box = geom.boundingBox.clone().expandByScalar(0.5);
+        return box.containsPoint(localPt);
+    }
     _replaySelectionOnto(mesh) {
         const sel = this._selection;
         if (!sel)
@@ -647,8 +776,14 @@ export class S3MViewer {
         if (mesh === sel.mesh)
             batchId = sel.batchId;
         // 这块几何里根本没有这个单体 → 不动它（否则会把无关瓦片一起点亮）
-        if (batchId < 0 && mesh !== sel.mesh)
-            return;
+        if (batchId < 0 && mesh !== sel.mesh) {
+            if (sel.smid == null && ud.datasetId === sel.datasetId && this._isMeshCoveringSelection(mesh, sel)) {
+                batchId = -1;
+            }
+            else {
+                return;
+            }
+        }
         mat.userData.uSelBatch.value = batchId;
         mat.userData.uSelWhole.value = batchId < 0 ? 1 : 0;
         if (!this._selectedMeshes.includes(mesh))
@@ -658,46 +793,57 @@ export class S3MViewer {
         this.uniforms.uSelMix.value = 1;
         this.uniforms.uDim.value = this.style.dimOthers ? 1 : 0;
     }
-    /** 瓦片被淘汰：从拾取表和场景里摘掉，并释放它自己的 GPU 资源 */
+    /** 瓦片被淘汰：从拾取表和场景里摘掉，并深度彻底释放所有几何体与材质显存 */
     _unregisterTile(node, entry) {
-        for (const child of [...node.group.children]) {
-            const mesh = child;
-            if (!mesh.isMesh)
-                continue;
-            const ud = mesh.userData;
-            // 「这块 mesh 没了」≠「用户不再选中」：LOD 细化 / 淘汰回补都会换掉 mesh。
-            // 以前这里一律 select(null)，于是点中的那栋楼一拉近，选中状态就整个被清掉。
-            const wasSelected = this._selectedMeshes.includes(mesh);
-            if (wasSelected) {
-                this._selectedMeshes = this._selectedMeshes.filter((m) => m !== mesh);
+        node.group.traverse((child) => {
+            const obj = child;
+            if (obj.userData?.pickId != null) {
+                this._pickables.delete(obj.userData.pickId);
+                this._releasePickId(obj.userData.pickId);
+                obj.userData.pickId = undefined;
             }
-            if (this._selection?.mesh === mesh) {
-                const smid = this._selection.smid;
-                const carrier = smid != null ? [...(this._smidMeshes.get(smid) ?? [])].find((m) => m !== mesh && m.parent) : undefined;
-                if (carrier) {
-                    // 选中身份交给承载同一 smid 的另一块 mesh（通常是接替显示的子瓦）
-                    this._selection = { ...this._selection, mesh: carrier };
-                    this._replaySelectionOnto(carrier);
+            if (obj.isMesh) {
+                const wasSelected = this._selectedMeshes.includes(obj);
+                if (wasSelected) {
+                    this._selectedMeshes = this._selectedMeshes.filter((m) => m !== obj);
                 }
-                else {
-                    this.select(null);
+                const currentSel = this._selection;
+                if (currentSel && currentSel.mesh === obj) {
+                    const smid = currentSel.smid;
+                    const carrier = (smid != null
+                        ? [...(this._smidMeshes.get(smid) ?? [])].find((m) => m !== obj && m.parent)
+                        : this._selectedMeshes.find((m) => m !== obj && m.parent && m.parent.visible) ??
+                            this._selectedMeshes.find((m) => m !== obj && m.parent));
+                    if (carrier) {
+                        // 选中身份交给承载同一 smid 的另一块 mesh（通常是接替显示的子瓦）
+                        this._selection = { ...currentSel, mesh: carrier };
+                        this._replaySelectionOnto(carrier);
+                    }
+                    else {
+                        this.select(null);
+                    }
                 }
+                this._unindexMeshSmids(obj);
+                this._removeMeshHeight(obj);
+                this._featureStyleManager.disposeMesh(obj);
+                const styled = styledMaterialOf(obj);
+                styled?.dispose?.();
             }
-            if (ud.pickId != null) {
-                this._pickables.delete(ud.pickId);
-                this._releasePickId(ud.pickId);
-                ud.pickId = undefined;
+            // 深度释放材质（点云、普通材质、材质数组）
+            if (isOwnedPointCloudMaterial(obj.material)) {
+                obj.material.dispose();
             }
-            this._unindexMeshSmids(mesh);
-            this._removeMeshHeight(mesh);
-            this._featureStyleManager.disposeMesh(mesh);
-            const styled = styledMaterialOf(mesh);
-            styled?.dispose?.();
-            // 点云材质是本模块按模式建的，不走 styled 那条链
-            if (isOwnedPointCloudMaterial(mesh.material))
-                mesh.material.dispose();
-            mesh.geometry?.dispose?.();
-        }
+            else if (obj.material) {
+                if (Array.isArray(obj.material)) {
+                    obj.material.forEach((m) => m?.dispose?.());
+                }
+                else {
+                    obj.material.dispose?.();
+                }
+            }
+            // 释放几何体显存缓冲
+            obj.geometry?.dispose?.();
+        });
         entry.root.remove(node.group);
     }
     /**
@@ -1738,6 +1884,10 @@ export class S3MViewer {
     renderFrame(opts) {
         if (!this.renderer || !this.scene || !this.camera || !this.sceneAnchor || !this.canvas)
             return false;
+        // 上下文丢失期间（丢失→恢复之间）不要尝试渲染，否则会刷一堆 GL 错误
+        const gl = this.renderer.getContext();
+        if (gl && typeof gl.isContextLost === 'function' && gl.isContextLost())
+            return false;
         // 脏标记正常由微任务刷掉；这里再兜一次底，保证「本帧画出来的」一定是最新样式
         this.flushOverrides();
         const canvas = this.canvas;