From 3af87f4424fda51760188233983cd8d4a4586c50 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 23 十月 2024 10:16:44 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/insight/agv/AgvMain.jsx     |  122 ++++++++++----------
 zy-acs-flow/src/map/insight/shelf/ShelfThree.js |   28 ++-
 zy-acs-flow/src/map/player.js                   |    2 
 zy-acs-flow/src/map/insight/agv/AgvThree.js     |   25 ++-
 zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx |  151 ++++++++++++------------
 5 files changed, 171 insertions(+), 157 deletions(-)

diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
index 68fbd29..c5aaf5b 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
+++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
@@ -19,65 +19,6 @@
 import ConfirmButton from '../../../page/components/ConfirmButton';
 import { grey } from '@mui/material/colors';
 
-let three;
-
-const startThree = (dom) => {
-    three = new AgvThree(dom);
-    three.startup();
-}
-
-const endThree = () => {
-    if (three) {
-        three.destroy();
-        three = null;
-    }
-}
-
-const renderThree = (curAgvNo) => {
-    if (curAgvNo && three) {
-        three.generateMesh((loader, addObject) => {
-            const loadModel = (path) => {
-                return new Promise((resolve, reject) => {
-                    loader.load(path, (mesh) => {
-                        resolve(mesh);
-                    }, undefined, (error) => {
-                        reject(error);
-                    });
-                });
-            };
-
-            Promise.all([
-                loadModel('model/agv/body.fbx'),
-                loadModel('model/agv/loader.fbx'),
-                loadModel('model/agv/fork.fbx'),
-            ]).then(([bodyMesh, loaderMesh, forkMesh]) => {
-                const scaleVal = 1;
-                bodyMesh.scale.set(scaleVal, scaleVal, scaleVal);
-                loaderMesh.scale.set(scaleVal, scaleVal, scaleVal);
-                forkMesh.scale.set(scaleVal, scaleVal, scaleVal);
-
-                bodyMesh.position.set(55, 0, 0);;
-                loaderMesh.position.set(55, 150, 0);;
-                forkMesh.position.set(55, 165, 0);;
-
-                const agvGroup = new THREE.Group();
-                agvGroup.add(bodyMesh);
-                agvGroup.add(loaderMesh);
-                agvGroup.add(forkMesh);
-
-                agvGroup.name = curAgvNo;
-
-                addObject(agvGroup);
-
-                three?.rePerspective(350, 450);
-
-            }).catch((error) => {
-                console.error(error);
-            });
-        });
-    }
-}
-
 const AgvMain = (props) => {
     const { curAgvNo, curAgvInfo: info, fetchAgvInfo } = props;
     const theme = useTheme();
@@ -88,9 +29,70 @@
     const containerRef = useRef();
     const [loading, setLoading] = useState(true);
 
+    const threeRef = useRef(null);
+
+    const startThree = (dom) => {
+        if (threeRef.current) {
+            threeRef.current.destroy();
+        }
+        threeRef.current = new AgvThree(dom);
+        threeRef.current.startup();
+    }
+
+    const endThree = () => {
+        if (threeRef.current) {
+            threeRef.current.destroy();
+            threeRef.current = null;
+        }
+    }
+
+    const renderThree = (curAgvNo) => {
+        if (curAgvNo && threeRef.current) {
+            threeRef.current.generateMesh((loader, addObject) => {
+                const loadModel = (path) => {
+                    return new Promise((resolve, reject) => {
+                        loader.load(path, (mesh) => {
+                            resolve(mesh);
+                        }, undefined, (error) => {
+                            reject(error);
+                        });
+                    });
+                };
+
+                Promise.all([
+                    loadModel('model/agv/body.fbx'),
+                    loadModel('model/agv/loader.fbx'),
+                    loadModel('model/agv/fork.fbx'),
+                ]).then(([bodyMesh, loaderMesh, forkMesh]) => {
+                    const scaleVal = 1;
+                    bodyMesh.scale.set(scaleVal, scaleVal, scaleVal);
+                    loaderMesh.scale.set(scaleVal, scaleVal, scaleVal);
+                    forkMesh.scale.set(scaleVal, scaleVal, scaleVal);
+
+                    bodyMesh.position.set(55, 0, 0);;
+                    loaderMesh.position.set(55, 150, 0);;
+                    forkMesh.position.set(55, 165, 0);;
+
+                    const agvGroup = new THREE.Group();
+                    agvGroup.add(bodyMesh);
+                    agvGroup.add(loaderMesh);
+                    agvGroup.add(forkMesh);
+
+                    agvGroup.name = curAgvNo;
+
+                    addObject(agvGroup);
+
+                    threeRef.current?.rePerspective(350, 450);
+
+                }).catch((error) => {
+                    console.error(error);
+                });
+            });
+        }
+    }
+
     useEffect(() => {
         if (info) {
-            endThree();
             setLoading(true);
             setTimeout(() => {
                 startThree(containerRef.current);
diff --git a/zy-acs-flow/src/map/insight/agv/AgvThree.js b/zy-acs-flow/src/map/insight/agv/AgvThree.js
index e45c5da..b4671bd 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvThree.js
+++ b/zy-acs-flow/src/map/insight/agv/AgvThree.js
@@ -71,7 +71,7 @@
         renderer.setClearAlpha(0);
         renderer.shadowMap.enabled = true;
         renderer.toneMapping = THREE.ACESFilmicToneMapping;
-        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
         renderer.setSize(this.getFullWidth(), this.getFullHeight());
         this.dom?.appendChild(renderer.domElement);
         return renderer;
@@ -159,23 +159,28 @@
         if (this.renderer) {
             this.renderer.dispose();
             this.renderer.forceContextLoss();
-            this.renderer.context = null;
-            this.renderer.domElement = null;
+            if (this.dom && this.renderer.domElement && this.dom.contains(this.renderer.domElement)) {
+                try {
+                    this.dom.removeChild(this.renderer.domElement);
+                } catch (error) {
+                    console.warn('Failed to remove renderer.domElement:', error);
+                }
+            }
             this.renderer = null;
         }
         if (this.controls) {
             this.controls.dispose();
             this.controls = null;
         }
-        this.camera = null;
-        this.objects = [];
-        if (this.dom) {
-            while (this.dom.firstChild) {
-                if (this.dom.contains(this.dom.firstChild)) {
-                    this.dom.removeChild(this.dom.firstChild);
-                }
+        if (this.stats && this.stats.domElement && this.dom.contains(this.stats.domElement)) {
+            try {
+                this.dom.removeChild(this.stats.domElement);
+            } catch (error) {
+                console.warn('Failed to remove stats.domElement:', error);
             }
         }
+        this.camera = null;
+        this.objects = [];
     }
 
     removeEntity = (object) => {
diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
index 7c93b4c..545c0bf 100644
--- a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
+++ b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
@@ -15,77 +15,6 @@
 import { grey } from '@mui/material/colors';
 import ConfirmButton from '../../../page/components/ConfirmButton';
 
-let shelfThree;
-
-const startThree = (dom) => {
-    shelfThree = new ShelfThree(dom);
-    shelfThree.startup();
-}
-
-const endThree = () => {
-    if (shelfThree) {
-        shelfThree.destroy();
-        shelfThree = null;
-    }
-}
-
-const renderThree = (info, curLocNo) => {
-    if (info && shelfThree) {
-        shelfThree.generateMesh((loader, addObject) => {
-            const promises = [];
-            const singleHeight = 123;
-            for (const item of info) {
-                const { lev } = item;
-                promises.push(new Promise((resolve) => {
-                    loader.load('model/shelf.fbx', (mesh) => {
-                        mesh.position.set(0, singleHeight * (lev - 1), 0);
-                        mesh.scale.set(5, 5, 5);
-                        mesh.name = item.locNo;
-                        mesh.traverse((child) => {
-                            if (child.isMesh) {
-                                switch (child.name) {
-                                    case '璐ф灦':
-                                        child.material.color.set(0x4680BF);
-                                        break;
-                                    case '鎵樼洏':
-                                        child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
-                                        child.material.color.set(0xBEBEBE);
-                                        break;
-                                    case '涓嶈鍒�':
-                                        child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
-                                        child.material.color.set(0xE8B67E);
-                                        break;
-                                    default:
-                                        break;
-                                }
-                                child.name = item.locNo
-                                child.castShadow = true;
-                                child.receiveShadow = true;
-                            }
-                        });
-                        addObject(mesh);
-                        resolve();
-                    })
-                }));
-
-            }
-
-            Promise.all(promises).then(() => {
-                if (shelfThree) {
-                    if (typeof shelfThree.setNewSelectedMesh === 'function') {
-                        shelfThree.setNewSelectedMesh(curLocNo);
-                    }
-                    if (typeof shelfThree.rePerspective === 'function') {
-                        shelfThree.rePerspective(singleHeight * info.length, 500);
-                    }
-                }
-            }).catch(error => {
-                console.error(error);
-            });
-        })
-    }
-}
-
 const ShelfMain = (props) => {
     const { row, bay, curLocNo, curShelfInfo: info, setCurLocNo } = props;
     const translate = useTranslate();
@@ -96,20 +25,92 @@
     const [selectedLoc, setSelectedLoc] = useState(null);   // loc obj
     const [loading, setLoading] = useState(true);
 
+    const shelfThreeRef = useRef(null);
+
+    const startThree = (dom) => {
+        if (shelfThreeRef.current) {
+            shelfThreeRef.current.destroy();
+        }
+        shelfThreeRef.current = new ShelfThree(dom);
+        shelfThreeRef.current.startup();
+    };
+
+    const endThree = () => {
+        if (shelfThreeRef.current) {
+            shelfThreeRef.current.destroy();
+            shelfThreeRef.current = null;
+        }
+    };
+
+    const renderThree = (info, curLocNo) => {
+        if (info && shelfThreeRef.current) {
+            shelfThreeRef.current.generateMesh((loader, addObject) => {
+                const promises = [];
+                const singleHeight = 123;
+                for (const item of info) {
+                    const { lev } = item;
+                    promises.push(new Promise((resolve) => {
+                        loader.load('model/shelf.fbx', (mesh) => {
+                            mesh.position.set(0, singleHeight * (lev - 1), 0);
+                            mesh.scale.set(5, 5, 5);
+                            mesh.name = item.locNo;
+                            mesh.traverse((child) => {
+                                if (child.isMesh) {
+                                    switch (child.name) {
+                                        case '璐ф灦':
+                                            child.material.color.set(0x4680BF);
+                                            break;
+                                        case '鎵樼洏':
+                                            child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
+                                            child.material.color.set(0xBEBEBE);
+                                            break;
+                                        case '涓嶈鍒�':
+                                            child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT';
+                                            child.material.color.set(0xE8B67E);
+                                            break;
+                                        default:
+                                            break;
+                                    }
+                                    child.name = item.locNo;
+                                    child.castShadow = true;
+                                    child.receiveShadow = true;
+                                }
+                            });
+                            addObject(mesh);
+                            resolve();
+                        });
+                    }));
+                }
+
+                Promise.all(promises).then(() => {
+                    if (shelfThreeRef.current) {
+                        if (typeof shelfThreeRef.current.setNewSelectedMesh === 'function') {
+                            shelfThreeRef.current.setNewSelectedMesh(curLocNo);
+                        }
+                        if (typeof shelfThreeRef.current.rePerspective === 'function') {
+                            shelfThreeRef.current.rePerspective(singleHeight * info.length, 500);
+                        }
+                    }
+                }).catch(error => {
+                    console.error(error);
+                });
+            });
+        }
+    };
+
     useEffect(() => {
         if (info) {
             setSelectedLoc(info[0]);
-            endThree();
             setLoading(true);
             setTimeout(() => {
                 startThree(containerRef.current);
-                shelfThree.handleClick = (objName) => {
+                shelfThreeRef.current.handleClick = (objName) => {
                     setCurLocNo(objName);
                     setSelectedLoc(info.find(loc => objName === loc.locNo));
                 };
                 renderThree(info, curLocNo);
                 setLoading(false);
-            }, 200)
+            }, 200);
         }
         return endThree;
     }, [info]);
@@ -127,7 +128,7 @@
             notify.success(translate('common.response.fail'));
             console.error(`Error: ${error.message}`);
         });
-    }
+    };
 
     return (
         <Box display="flex" height="100%">
diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfThree.js b/zy-acs-flow/src/map/insight/shelf/ShelfThree.js
index c42cf00..beb1c2d 100644
--- a/zy-acs-flow/src/map/insight/shelf/ShelfThree.js
+++ b/zy-acs-flow/src/map/insight/shelf/ShelfThree.js
@@ -87,7 +87,7 @@
         // this.renderer.shadowMap.type = THREE.BasicShadowMap;    // 鏈�浣庨槾褰�
         // renderer.toneMapping = THREE.ReinhardToneMapping;
         renderer.toneMapping = THREE.ACESFilmicToneMapping;
-        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
         renderer.setSize(this.getFullWidth(), this.getFullHeight());
         this.dom?.appendChild(renderer.domElement);
         return renderer;
@@ -213,6 +213,7 @@
     destroy = () => {
         cancelAnimationFrame(this.animationFrame);
         window.removeEventListener('resize', this.resizeHandler);
+        this.dom?.removeEventListener("click", this.handleClickEvent);
         if (this.scene) {
             while (this.scene.children.length > 0) {
                 this.removeEntity(this.scene.children[0]);
@@ -222,8 +223,13 @@
         if (this.renderer) {
             this.renderer.dispose();
             this.renderer.forceContextLoss();
-            this.renderer.context = null;
-            this.renderer.domElement = null;
+            if (this.dom && this.renderer.domElement && this.dom.contains(this.renderer.domElement)) {
+                try {
+                    this.dom.removeChild(this.renderer.domElement);
+                } catch (error) {
+                    console.warn('Failed to remove renderer.domElement:', error);
+                }
+            }
             this.renderer = null;
         }
         if (this.composer) {
@@ -238,16 +244,16 @@
             this.controls.dispose();
             this.controls = null;
         }
-        this.dom?.removeEventListener("click", this.handleClickEvent);
-        this.camera = null;
-        this.objects = [];
-        if (this.dom) {
-            while (this.dom.firstChild) {
-                if (this.dom.contains(this.dom.firstChild)) {
-                    this.dom.removeChild(this.dom.firstChild);
-                }
+        if (this.stats && this.stats.domElement && this.dom.contains(this.stats.domElement)) {
+            try {
+                this.dom.removeChild(this.stats.domElement);
+            } catch (error) {
+                console.warn('Failed to remove stats.domElement:', error);
             }
         }
+
+        this.camera = null;
+        this.objects = [];
     }
 
     removeEntity = (object) => {
diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js
index e3acc62..6960fa9 100644
--- a/zy-acs-flow/src/map/player.js
+++ b/zy-acs-flow/src/map/player.js
@@ -1,7 +1,7 @@
 import * as PIXI from 'pixi.js';
 import * as TWEEDLE from 'tweedle.js';
 import * as Tool from './tool';
-import star from '/public/img/map/star.png'
+import star from '/img/map/star.png'
 
 export default class Player {
 

--
Gitblit v1.9.1