修复

2026-01-05 16:09:36 +08:00
parent ebbd21916e
commit b9cbb58a9d
14 changed files with 460 additions and 321 deletions
--- a/src/babylonjs/AppCamera.ts
+++ b/src/babylonjs/AppCamera.ts
@ -26,7 +26,7 @@ export class AppCamera extends Monobehiver {
        this.object.minZ = 0.01;           // 近裁剪面
        this.object.wheelPrecision =999999;    // 滚轮缩放精度
        this.object.panningSensibility = 0;
-        this.object.position = new Vector3(-0, 0, 100);
+         this.object.position = new Vector3(-0, 0, 100);
        this.setTarget(0, 2, 0);
    }

--- a/src/babylonjs/AppConfig.ts
+++ b/src/babylonjs/AppConfig.ts
@ -11,8 +11,8 @@ export const AppConfig = {
    success: null as OptionalCallback,
    error: null as ErrorCallback,
    env: {
-        envPath:"",
-        intensity: 1,
+        envPath: '/hdr/sanGiuseppeBridge.env',
+        intensity: 1.5,
        rotationY: 0
    }
 };
--- a/src/babylonjs/AppEnv.ts
+++ b/src/babylonjs/AppEnv.ts
@ -15,7 +15,7 @@ export class AppEnv extends Monobehiver {

    /** 初始化 - 创建默认HDR环境 */
    Awake(): void {
-      this.createHDR();
+        this.createHDR();
    }

    /**
@ -23,7 +23,7 @@ export class AppEnv extends Monobehiver {
     * @param hdrPath HDR文件路径
     */
    createHDR(): void {
-        const hdrPath = AppConfig.env.envPath;
+        const envPath = AppConfig.env.envPath;
        const intensity = AppConfig.env.intensity ?? 1.5;
        const rotationY = AppConfig.env.rotationY ?? 0;
        const scene = this.mainApp.appScene.object;
@ -32,7 +32,7 @@ export class AppEnv extends Monobehiver {
            this.object.dispose();
            this.object = null;
        }
-        const reflectionTexture = CubeTexture.CreateFromPrefilteredData(hdrPath, scene);
+        const reflectionTexture = CubeTexture.CreateFromPrefilteredData(envPath, scene);
        reflectionTexture.rotationY = rotationY;
        scene.environmentIntensity = intensity;
        scene.environmentTexture = reflectionTexture;
--- a/src/babylonjs/AppLight.ts
+++ b/src/babylonjs/AppLight.ts
@ -1,4 +1,4 @@
-import { SpotLight } from '@babylonjs/core/Lights/spotLight';
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
 import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
 import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent';
 import { Vector3, Quaternion } from '@babylonjs/core/Maths/math.vector';
@ -7,7 +7,6 @@ import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';

 type DebugMarkers = {
@ -21,7 +20,7 @@ type DebugMarkers = {
 * 灯光管理类- 负责创建和管理场景灯光
 */
 export class AppLight extends Monobehiver {
-    lightList: SpotLight[];
+    lightList: DirectionalLight[];
    shadowGenerator: ShadowGenerator | null;
    debugMarkers?: DebugMarkers;
    coneMesh?: Mesh;
@ -35,22 +34,17 @@ export class AppLight extends Monobehiver {

    /** 初始化灯光并开启阴影 */
    Awake(): void {
-        const light = new SpotLight(
+        const light = new DirectionalLight(
            "mainLight",
-            new Vector3(-0.6, 2.12, 2),
            new Vector3(0, -0.5, -1),
-            Math.PI * 0.6,  // angle 弧度
        );

-        light.angle = 1.5;
-        light.innerAngle = 1;
-        light.exponent = 2;
+        light.position = new Vector3(-0.6, 2.12, 2);
        light.diffuse = new Color3(1, 0.86, 0.80);
        light.specular = new Color3(1, 1, 1);
-        light.intensity = 60;
+        light.intensity = 1;
        light.shadowMinZ = 0.01;
        light.shadowMaxZ = 100;
-        light.range = 5000;

        const generator = new ShadowGenerator(4096, light);
        generator.usePercentageCloserFiltering = true;
@ -61,149 +55,6 @@ export class AppLight extends Monobehiver {
        this.shadowGenerator = generator;
    }

-    /** 将网格添加为阴影投射者 */
-    addShadowCaster(mesh: AbstractMesh): void {
-        if (this.shadowGenerator) {
-            this.shadowGenerator.addShadowCaster(mesh);
-        }
-    }

-    /** 设置主光源强度 */
-    setIntensity(intensity: number): void {
-        if (this.lightList[0]) this.lightList[0].intensity = intensity;
-    }

-    /** 创建灯光可视化调试器 - W键拖拽位置，E键旋转方向 */
-    enableLightDebug(): void {
-        const scene = this.mainApp.appScene.object;
-        const light = this.lightList[0];
-        if (!light || !scene) return;
-
-        const marker = MeshBuilder.CreateSphere("lightMarker", { diameter: 0.3 }, scene);
-        marker.position = light.position.clone();
-        const mat = new StandardMaterial("lightMat", scene);
-        mat.emissiveColor = Color3.Yellow();
-        marker.material = mat;
-
-        const arrow = MeshBuilder.CreateCylinder("lightArrow", { height: 1, diameterTop: 0, diameterBottom: 0.1 }, scene);
-        arrow.parent = marker;
-        arrow.position.set(0, 0, 0.6);
-        arrow.rotation.x = Math.PI / 2;
-        const arrowMat = new StandardMaterial("arrowMat", scene);
-        arrowMat.emissiveColor = Color3.Red();
-        arrow.material = arrowMat;
-
-        const dir = light.direction.normalize();
-        marker.rotation.y = Math.atan2(dir.x, dir.z);
-        marker.rotation.x = -Math.asin(dir.y);
-
-        const gizmoManager = new GizmoManager(scene);
-        gizmoManager.attachableMeshes = [marker];
-        gizmoManager.usePointerToAttachGizmos = false;
-        gizmoManager.attachToMesh(marker);
-
-        scene.onBeforeRenderObservable.add(() => {
-            light.position.copyFrom(marker.position);
-            const forward = new Vector3(0, 0, 1);
-            const rotationMatrix = marker.getWorldMatrix().getRotationMatrix();
-            light.direction = Vector3.TransformNormal(forward, rotationMatrix).normalize();
-        });
-
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === 'w' || e.key === 'W') {
-                gizmoManager.positionGizmoEnabled = true;
-                gizmoManager.rotationGizmoEnabled = false;
-            } else if (e.key === 'e' || e.key === 'E') {
-                gizmoManager.positionGizmoEnabled = false;
-                gizmoManager.rotationGizmoEnabled = true;
-            }
-        };
-        window.addEventListener('keydown', onKey);
-        gizmoManager.positionGizmoEnabled = true;
-
-        this.debugMarkers = { marker, arrow, gizmoManager, onKey };
-    }
-
-    /** 隐藏灯光调试器 */
-    disableLightDebug(): void {
-        if (this.debugMarkers) {
-            window.removeEventListener('keydown', this.debugMarkers.onKey);
-            this.debugMarkers.gizmoManager.dispose();
-            this.debugMarkers.arrow.dispose();
-            this.debugMarkers.marker.dispose();
-            this.debugMarkers = undefined;
-        }
-    }
-
-    /** 创建聚光灯可视化Gizmo - 带光锥范围 */
-    createLightGizmo(): void {
-        const scene = this.mainApp.appScene.object;
-        const light = this.lightList[0];
-        if (!light || !scene) return;
-
-        const coneLength = 3;
-        const updateCone = () => {
-            if (this.coneMesh) this.coneMesh.dispose();
-            const radius = Math.tan(light.angle) * coneLength;
-            const cone = MeshBuilder.CreateCylinder("lightCone", {
-                height: coneLength,
-                diameterTop: radius * 2,
-                diameterBottom: 0
-            }, scene);
-            const mat = new StandardMaterial("coneMat", scene);
-            mat.emissiveColor = Color3.Yellow();
-            mat.alpha = 0.2;
-            mat.wireframe = true;
-            cone.material = mat;
-
-            cone.position = light.position.add(light.direction.scale(coneLength / 2));
-            const up = new Vector3(0, 1, 0);
-            const axis = Vector3.Cross(up, light.direction).normalize();
-            const angle = Math.acos(Vector3.Dot(up, light.direction.normalize()));
-            if (axis.length() > 0.001) cone.rotationQuaternion = Quaternion.RotationAxis(axis, angle);
-
-            this.coneMesh = cone;
-        };
-
-        updateCone();
-        this.updateCone = updateCone;
-    }
-
-    /** 创建angle和innerAngle调试滑动条 */
-    createAngleSliders(): void {
-        const light = this.lightList[0];
-        if (!light) return;
-
-        const container = document.createElement('div');
-        container.style.cssText = 'position:fixed;top:10px;right:10px;background:rgba(0,0,0,0.7);padding:10px;border-radius:5px;color:#fff;font-size:12px;z-index:1000';
-
-        const createSlider = (label: string, value: number, min: number, max: number, onChange: (v: number) => void) => {
-            const wrap = document.createElement('div');
-            wrap.style.marginBottom = '8px';
-            const lbl = document.createElement('div');
-            lbl.textContent = `${label}: ${value}`;
-            const slider = document.createElement('input');
-            slider.type = 'range';
-            slider.min = String(min);
-            slider.max = String(max);
-            slider.value = String(value);
-            slider.style.width = '150px';
-            slider.oninput = () => {
-                lbl.textContent = `${label}: ${slider.value}`;
-                onChange(Number(slider.value));
-            };
-            wrap.append(lbl, slider);
-            return wrap;
-        };
-
-        const toRad = (deg: number) => deg * Math.PI / 180;
-        const toDeg = (rad: number) => Math.round(rad * 180 / Math.PI);
-
-        container.append(
-            createSlider('angle', toDeg(light.angle), 1, 180, v => { light.angle = toRad(v); this.updateCone?.(); }),
-            createSlider('innerAngle', toDeg(light.innerAngle), 0, 180, v => { light.innerAngle = toRad(v); })
-        );
-
-        document.body.appendChild(container);
-    }
 }
--- a/src/babylonjs/AppModel.ts
+++ b/src/babylonjs/AppModel.ts
@ -1,10 +1,12 @@
-import { ImportMeshAsync } from '@babylonjs/core/Loading/sceneLoader';
+import { ImportMeshAsync, ISceneLoaderProgressEvent } from '@babylonjs/core/Loading/sceneLoader';
 import '@babylonjs/loaders/glTF';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
 import { Scene } from '@babylonjs/core/scene';
+import { ActionManager, ExecuteCodeAction } from '@babylonjs/core/Actions';
 import { Monobehiver } from '../base/Monobehiver';
 import { Dictionary } from '../utils/Dictionary';
 import { AppConfig } from './AppConfig';
+import { EventBridge } from '../event/bridge';

 type LoadResult = {
    success: boolean;
@ -44,10 +46,45 @@ export class AppModel extends Monobehiver {
        if (!AppConfig.modelUrlList?.length || this.isLoading) return;
        this.isLoading = true;
        try {
-            for (const url of AppConfig.modelUrlList) {
-                await this.loadSingleModel(url);
+            const total = AppConfig.modelUrlList.length;
+            EventBridge.modelLoadProgress({ loaded: 0, total, urls: AppConfig.modelUrlList, progress: 0, percentage: 0 });
+            for (let i = 0; i < AppConfig.modelUrlList.length; i++) {
+                const url = AppConfig.modelUrlList[i];
+                const handleProgress = (event: ISceneLoaderProgressEvent): void => {
+                    const currentProgress = event.lengthComputable && event.total > 0
+                        ? Math.min(1, event.loaded / event.total)
+                        : 0;
+                    const overallProgress = Math.min(1, (i + currentProgress) / total);
+                    EventBridge.modelLoadProgress({
+                        loaded: i + currentProgress,
+                        total,
+                        url,
+                        progress: overallProgress,
+                        percentage: Number((overallProgress * 100).toFixed(2)),
+                        detail: {
+                            url,
+                            lengthComputable: event.lengthComputable,
+                            loadedBytes: event.loaded,
+                            totalBytes: event.total
+                        }
+                    });
+                };
+
+                const result = await this.loadSingleModel(url, handleProgress);
+                const overallProgress = Math.min(1, (i + 1) / total);
+                EventBridge.modelLoadProgress({
+                    loaded: i + 1,
+                    total,
+                    url,
+                    success: result.success,
+                    progress: overallProgress,
+                    percentage: Number((overallProgress * 100).toFixed(2))
+                });
+                if (!result.success) {
+                    EventBridge.modelLoadError({ url, error: result.error });
+                }
            }
-         
+            EventBridge.modelLoaded({ urls: AppConfig.modelUrlList });
        } finally {
            this.isLoading = false;
        }
@ -57,7 +94,7 @@ export class AppModel extends Monobehiver {
     * 加载单个模型
     * @param modelUrl 模型URL
     */
-    async loadSingleModel(modelUrl: string): Promise<LoadResult> {
+    async loadSingleModel(modelUrl: string, onProgress?: (event: ISceneLoaderProgressEvent) => void): Promise<LoadResult> {
        try {
            const cached = this.getCachedMeshes(modelUrl);
            if (cached) return { success: true, meshes: cached };
@ -65,16 +102,11 @@ export class AppModel extends Monobehiver {
            const scene: Scene | null = this.mainApp.appScene.object;
            if (!scene) return { success: false, error: '场景未初始化' };

-            // ImportMeshAsync的签名与当前调用不完全一致，使用any规避编译报错
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const result: any = await (ImportMeshAsync as any)(modelUrl, scene);
+            const result = await ImportMeshAsync(modelUrl, scene, { onProgress });
            if (!result?.meshes?.length) return { success: false, error: '未找到网格' };

            this.modelDic.Set(modelUrl, result.meshes);
            this.loadedMeshes.push(...result.meshes);
-
-            this.setupShadows(result.meshes as AbstractMesh[]);
-
            return { success: true, meshes: result.meshes, skeletons: result.skeletons };
        } catch (e: any) {
            console.error(`模型加载失败: ${modelUrl}`, e);
@ -116,4 +148,5 @@ export class AppModel extends Monobehiver {
        this.isLoading = false;
        this.skeletonMerged = false;
    }
+
 }
--- a/src/babylonjs/AppRay.ts
+++ b/src/babylonjs/AppRay.ts
@ -0,0 +1,124 @@
+import {
+  type IPointerEvent,
+  PickingInfo,
+  PointerEventTypes,
+  Vector3,
+  AbstractMesh,
+  Color3,
+  PBRMaterial,
+  StandardMaterial,
+  HighlightLayer,
+  PointerInfo,
+} from '@babylonjs/core'
+import { MainApp } from './MainApp'
+import { Monobehiver } from '../base/Monobehiver';
+import { EventBridge } from '../event/bridge';
+
+class AppRay extends Monobehiver {
+  oldPoint: Vector3 = Vector3.Zero()
+  newPoint: Vector3 = Vector3.Zero()
+  private highlightLayer: HighlightLayer | null = null
+  private originalMaterial: any = null
+  private highlightedMesh: AbstractMesh | null = null
+
+  constructor(mainApp: MainApp) {
+    super(mainApp)
+  }
+
+  Awake() {
+    this.setupHighlightLayer()
+    this.setupUnifiedEventHandling()
+  }
+
+  // 设置高亮层
+  setupHighlightLayer() {
+    // 高亮层创建已禁用
+    return
+  }
+
+  // 设置统一的事件处理
+  setupUnifiedEventHandling() {
+    // 使用观察者模式而不是直接覆盖事件处理器
+    this.mainApp.appScene.object.onPointerObservable.add((pointerInfo: PointerInfo) => {
+      const { type, event, pickInfo } = pointerInfo;
+
+      // 检查事件类型并转换
+      const pointerEvent = event as IPointerEvent;
+
+      // 只处理鼠标和触摸事件
+      if (pointerEvent.pointerType !== "mouse" && pointerEvent.pointerType !== "touch") {
+        return;
+      }
+
+      // 处理非主要触摸点
+      if (pointerEvent.pointerType === "touch" && (pointerEvent as any).isPrimary === false) {
+        return;
+      }
+
+      if (type === PointerEventTypes.POINTERDOWN) {
+        this.oldPoint.set(pointerEvent.clientX, 0, pointerEvent.clientY);
+      } else if (type === PointerEventTypes.POINTERUP) {
+        this.newPoint.set(pointerEvent.clientX, 0, pointerEvent.clientY);
+        const distance = Vector3.Distance(this.oldPoint, this.newPoint);
+
+        // 只有在没有移动的情况下才处理单击
+        if (distance < 5) { // 增加一些容差
+          this.handleSingleClick(pointerEvent, pickInfo);
+        }
+      }
+    });
+  }
+
+  // 处理单击
+  handleSingleClick(evt: IPointerEvent, pickInfo: PickingInfo | null) {
+    if (pickInfo && pickInfo.pickedMesh) {
+      EventBridge.modelClick({
+        meshName: pickInfo.pickedMesh.name,
+      });
+    }
+  }
+
+
+
+  // 高亮显示网格 - 已禁用
+  highlightMesh(mesh: AbstractMesh) {
+    // 高亮功能已禁用
+    return
+  }
+
+  // 使用材质方式高亮 - 已禁用
+  highlightWithMaterial(mesh: AbstractMesh) {
+    // 材质高亮功能已禁用
+    return
+  }
+
+  // 清除高亮
+  clearHighlight() {
+    try {
+      // 清除高亮层
+      if (this.highlightLayer && this.highlightedMesh) {
+        try {
+          this.highlightLayer.removeMesh(this.highlightedMesh as any)
+        } catch (error) {
+          console.warn('高亮层移除失败:', error)
+        }
+      }
+
+      // 恢复原始材质
+      if (this.highlightedMesh && this.originalMaterial) {
+        const material = this.highlightedMesh.material as PBRMaterial
+        if (material && this.originalMaterial.albedoColor) {
+          material.albedoColor = this.originalMaterial.albedoColor
+          material.emissiveColor = this.originalMaterial.emissiveColor
+        }
+      }
+
+      this.highlightedMesh = null
+      this.originalMaterial = null
+    } catch (error) {
+      console.error('清除高亮失败:', error)
+    }
+  }
+}
+
+export { AppRay }
--- a/src/babylonjs/MainApp.ts
+++ b/src/babylonjs/MainApp.ts
@ -11,6 +11,8 @@ import { AppLight } from './AppLight';
 import { AppEnv } from './AppEnv';
 import { AppModel } from './AppModel';
 import { AppConfig } from './AppConfig';
+import { AppRay } from './AppRay';
+import { EventBridge } from '../event/bridge';

 /**
 * 主应用类 - 3D场景的核心控制器
@ -24,6 +26,7 @@ export class MainApp {
    appModel: AppModel;
    appLight: AppLight;
    appEnv: AppEnv;
+    appRay: AppRay;


    constructor() {
@ -34,6 +37,7 @@ export class MainApp {
        this.appModel = new AppModel(this);
        this.appLight = new AppLight(this);
        this.appEnv = new AppEnv(this);
+        this.appRay = new AppRay(this);

        window.addEventListener("resize", () => this.appEngin.handleResize());
    }
@ -45,10 +49,7 @@ export class MainApp {
    loadAConfig(config: any): void {
        AppConfig.container = config.container || 'renderDom';
        AppConfig.modelUrlList = config.modelUrlList || [];
-        AppConfig.env = config.env
-        AppConfig.success = config.success;
-        AppConfig.error = config.error;
-
+        AppConfig.env = config.env;
    }

    loadModel(): void {
@ -63,9 +64,10 @@ export class MainApp {
        this.appCamera.Awake();
        this.appLight.Awake();
        this.appEnv.Awake();
-
+        this.appRay.Awake()
        this.appModel.initManagers();
        this.update();
+        EventBridge.sceneReady({ scene: this.appScene.object });
    }

    /** 启动渲染循环 */