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