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