From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 04 十一月 2024 10:22:45 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/insight/agv/AgvMain.jsx | 122 ++++++++++++++++++++-------------------- 1 files changed, 62 insertions(+), 60 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); -- Gitblit v1.9.1