From 4f32ade76be015062d305c6b0eecf1b7fbedd331 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 17 十月 2024 10:40:54 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/insight/agv/AgvMain.jsx |  111 ++++++++++------------
 zy-acs-flow/src/map/insight/agv/index.jsx   |   14 +-
 zy-acs-flow/src/map/insight/agv/AgvThree.js |  144 +++++++++++++---------------
 3 files changed, 122 insertions(+), 147 deletions(-)

diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
index ada1503..8651c52 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
+++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
@@ -1,81 +1,70 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useTranslate } from 'react-admin';
-import {
-    Box,
-    CircularProgress,
-    Grid,
-    Typography,
-    Paper,
-    Button,
-    Divider,
-    Stack,
-} from '@mui/material';
-import ShelfThree from './AgvThree';
+import * as THREE from 'three';
+import { Box, CircularProgress } from '@mui/material';
+import AgvThree from './AgvThree';
 import { getAgvInfo } from '../../http';
-import { grey } from '@mui/material/colors';
 
-let shelfThree;
+let three;
 
 const startThree = (dom) => {
-    shelfThree = new ShelfThree(dom);
-    shelfThree.startup();
+    three = new AgvThree(dom);
+    three.startup();
 }
 
 const endThree = () => {
-    if (shelfThree) {
-        shelfThree.destroy();
-        shelfThree = null;
+    if (three) {
+        three.destroy();
+        three = null;
     }
 }
 
 const renderThree = (info, curAgvNo) => {
-    if (info && shelfThree) {
-        shelfThree.generateMesh((loader, addObject) => {
-            const promises = [];
-            promises.push(new Promise((resolve) => {
-                loader.load('model/agv.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.castShadow = true;
-                            child.receiveShadow = true;
-                        }
+    if (info && three) {
+        three.generateMesh((loader, addObject) => {
+            const loadModel = (path) => {
+                return new Promise((resolve, reject) => {
+                    loader.load(path, (mesh) => {
+                        resolve(mesh);
+                    }, undefined, (error) => {
+                        reject(error);
                     });
-                    addObject(mesh);
-                    resolve();
-                })
-            }));
+                });
+            };
 
-            Promise.all(promises).then(() => {
-                shelfThree.setNewSelectedMesh(curLocNo);
-                shelfThree.rePerspective(singleHeight * info.length, 500);
-            }).catch(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);
+
+                loaderMesh.position.set(0, 150, 0);;
+                forkMesh.position.set(0, 165, 0);;
+
+                const agvGroup = new THREE.Group();
+                agvGroup.add(bodyMesh);
+                agvGroup.add(loaderMesh);
+                agvGroup.add(forkMesh);
+
+                agvGroup.name = curAgvNo;
+
+                addObject(agvGroup);
+
+                three.setNewSelectedMesh(curAgvNo);
+                three.rePerspective(350, 550);
+
+            }).catch((error) => {
                 console.error(error);
             });
-        })
+        });
     }
 }
 
 const AgvMain = (props) => {
     const { data, curAgvNo, setCurAgvNo } = props;
-    const translate = useTranslate();
     const containerRef = useRef();
     const [loading, setLoading] = useState(true);
     const [info, setInfo] = useState(null);
@@ -95,12 +84,12 @@
             setLoading(true);
             setTimeout(() => {
                 startThree(containerRef.current);
-                shelfThree.handleClick = (objName) => {
+                three.handleClick = (objName) => {
                     setCurAgvNo(objName);
                 };
                 renderThree(info, curAgvNo);
                 setLoading(false);
-            }, 300)
+            }, 300);
         }
         return endThree;
     }, [info]);
@@ -121,7 +110,7 @@
                         left="50%"
                         style={{ transform: 'translate(-50%, -50%)' }}
                     >
-                        <CircularProgress sx={{ color: grey[50] }} />
+                        <CircularProgress />
                     </Box>
                 )}
             </Box>
@@ -131,4 +120,4 @@
     );
 }
 
-export default AgvMain;
\ No newline at end of file
+export default AgvMain;
diff --git a/zy-acs-flow/src/map/insight/agv/AgvThree.js b/zy-acs-flow/src/map/insight/agv/AgvThree.js
index 01b60c0..1a15c01 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvThree.js
+++ b/zy-acs-flow/src/map/insight/agv/AgvThree.js
@@ -1,22 +1,21 @@
-import * as THREE from 'three'
+import * as THREE from 'three';
 import Stats from 'three/addons/libs/stats.module.js';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import TWEEN from '@tweenjs/tween.js';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 
 const help = false;
 
-export default class ShelfThree {
-
+export default class AgvThree {
     constructor(dom) {
         this.dom = dom;
-
         this.objects = [];
+        this.handleClick = null;
     }
 
     startup = () => {
@@ -26,9 +25,9 @@
         this.controls = this.initControls();
         this.stats = this.initStats();
         this.composer = this.initComposer();
-        this.windowResize();
+        this.initLight();
         this.initRaycaster();
-        initLight(this.scene);
+        this.windowResize();
 
         this.animate();
     }
@@ -40,20 +39,17 @@
     }
 
     render = () => {
-        // this.renderer.render(this.scene, this.camera);
-        this.composer.render(); // use special effects
+        this.composer.render();
         this.stats.update();
-        // Rotate the scene
-        this.controls.update()
-        this.controls.autoRotateSpeed = 2;
+        this.controls.update();
     }
 
     getFullWidth = () => {
-        return this.dom?.offsetWidth;
+        return this.dom?.offsetWidth || window.innerWidth;
     }
 
     getFullHeight = () => {
-        return this.dom?.offsetHeight;
+        return this.dom?.offsetHeight || window.innerHeight;
     }
 
     addObject = (object) => {
@@ -63,7 +59,6 @@
 
     initScene = () => {
         const scene = new THREE.Scene();
-        // scene.background = new THREE.Color(0xf8f8f8);
         scene.background = new THREE.Color(0x7a7a7a);
         scene.fog = new THREE.Fog(scene.background, 1, 5000);
         if (help) {
@@ -75,17 +70,13 @@
     initCamera = () => {
         const camera = new THREE.PerspectiveCamera(70, this.getFullWidth() / this.getFullHeight(), 1, 60000);
         camera.position.set(-400, 400, 400);
-        this.scene.add(camera);
         return camera;
     }
 
     initRenderer = () => {
         const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
         renderer.setClearAlpha(0);
-        // renderer.useLegacyLights = false;  // 鏃х増鍏夋簮 閲嶈
         renderer.shadowMap.enabled = true;
-        // this.renderer.shadowMap.type = THREE.BasicShadowMap;    // 鏈�浣庨槾褰�
-        // renderer.toneMapping = THREE.ReinhardToneMapping;
         renderer.toneMapping = THREE.ACESFilmicToneMapping;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.setSize(this.getFullWidth(), this.getFullHeight());
@@ -97,39 +88,36 @@
         const composer = new EffectComposer(this.renderer);
         const renderPass = new RenderPass(this.scene, this.camera);
         composer.addPass(renderPass);
-        // pixel ratio
+
         const pixelRatio = this.renderer.getPixelRatio();
         const newWidth = Math.floor(this.getFullWidth() * pixelRatio) || 1;
         const newHeight = Math.floor(this.getFullHeight() * pixelRatio) || 1;
         composer.setSize(newWidth, newHeight);
-        // antialias
+
         const effectFXAA = new ShaderPass(FXAAShader);
         effectFXAA.uniforms['resolution'].value.set(1 / newWidth, 1 / newHeight);
         composer.addPass(effectFXAA);
-        // outline
+
         this.outlinePass = new OutlinePass(new THREE.Vector2(this.getFullWidth(), this.getFullHeight()), this.scene, this.camera);
-        this.outlinePass.visibleEdgeColor.set('#ffffff'); // outline color
-        this.outlinePass.edgeStrength = 10; // outline weight
+        this.outlinePass.visibleEdgeColor.set('#ffffff');
+        this.outlinePass.edgeStrength = 10;
         composer.addPass(this.outlinePass);
+
         return composer;
     }
 
     initControls = () => {
         const controls = new OrbitControls(this.camera, this.renderer.domElement);
-        // controls.enableRotate = false; // 绂佺敤鏁翠綋鏃嬭浆鍔熻兘
-        controls.enablePan = false; // 鍏佽骞崇Щ
-        controls.enableDamping = true;   // 寮�鍚樆灏�
-        controls.dampingFactor = 0.08; // 闃诲凹鍥犲瓙
-        controls.enableZoom = true; // 鍏佽缂╂斁
-        // controls.minDistance = 1; // 鏈�灏忕缉鏀捐窛绂�
-        // controls.maxDistance = 30; // 鏈�澶х缉鏀捐窛绂�
-        controls.minPolarAngle = 0; // 鏈�灏忎刊浠拌搴︼紙鍚戜笅鐪嬶級
+        controls.enablePan = false;
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.08;
+        controls.enableZoom = true;
         controls.minPolarAngle = Math.PI / 2.1;
-        controls.maxPolarAngle = Math.PI / 2.1; // 鏈�澶т刊浠拌搴︼紙鍚戜笂鐪嬶級
-        controls.rotateSpeed = 0.6; // 瑙嗚绉诲姩閫熷害鍑忔參
-        controls.autoRotate = true; // 鑷姩鏃嬭浆
-
-        controls.target = new THREE.Vector3(0, 250, 0)  // 灞忓箷涓績鐐� 骞虫浛 camera鐨刲ookAt
+        controls.maxPolarAngle = Math.PI / 2.1;
+        controls.rotateSpeed = 0.6;
+        controls.autoRotate = true;
+        controls.autoRotateSpeed = 2;
+        controls.target = new THREE.Vector3(0, 250, 0);
         return controls;
     }
 
@@ -142,18 +130,29 @@
         return stats;
     }
 
-    windowResize = () => {
-        this.resizeHandler = () => {
-            this.camera.aspect = this.getFullWidth() / this.getFullHeight();
-            this.camera.updateProjectionMatrix();
-            this.renderer.setSize(this.getFullWidth(), this.getFullHeight());
-        };
-        window.addEventListener('resize', this.resizeHandler, false);
+    initLight = () => {
+        const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 6);
+        hemiLight.color.setHSL(0.6, 1, 0.6);
+        hemiLight.groundColor.setHSL(0.095, 1, 0.75);
+        hemiLight.position.set(0, 1500, 0);
+        this.scene.add(hemiLight);
+
+        const dirLight = new THREE.DirectionalLight(0xffffff, 2.5);
+        dirLight.color.setHSL(0.1, 1, 0.95);
+        dirLight.position.set(-10, 10, 10);
+        dirLight.position.multiplyScalar(30);
+        this.scene.add(dirLight);
+
+        const dirLight1 = new THREE.DirectionalLight(0xffffff, 2.5);
+        dirLight1.color.setHSL(0.1, 1, 0.95);
+        dirLight1.position.set(10, 10, -10);
+        dirLight1.position.multiplyScalar(30);
+        this.scene.add(dirLight1);
     }
 
     initRaycaster = () => {
-        const raycaster = new THREE.Raycaster();
-        const mouse = new THREE.Vector2();
+        this.raycaster = new THREE.Raycaster();
+        this.mouse = new THREE.Vector2();
         this.handleClickEvent = (event) => {
             let x, y;
             if (event.changedTouches) {
@@ -164,11 +163,11 @@
                 y = event.clientY;
             }
             let rect = this.dom.getBoundingClientRect();
-            mouse.x = ((x - rect.left) / rect.width) * 2 - 1;
-            mouse.y = -((y - rect.top) / rect.height) * 2 + 1;
+            this.mouse.x = ((x - rect.left) / rect.width) * 2 - 1;
+            this.mouse.y = -((y - rect.top) / rect.height) * 2 + 1;
             event.preventDefault();
-            raycaster.setFromCamera(mouse, this.camera);
-            let intersects = raycaster.intersectObjects(this.objects, true);
+            this.raycaster.setFromCamera(this.mouse, this.camera);
+            let intersects = this.raycaster.intersectObjects(this.objects, true);
             if (intersects.length === 0) {
                 return;
             }
@@ -177,7 +176,7 @@
                 if (obj.name === objName) {
                     this.outlinePass.selectedObjects = [obj];
                 }
-            })
+            });
             if (objName && this.handleClick) {
                 this.handleClick(objName, x, y);
             }
@@ -191,16 +190,16 @@
     }
 
     setNewSelectedMesh = (objName) => {
-        for (const mesh of this.objects) {
-            if (mesh.name === objName) {
-                this.outlinePass.selectedObjects = [mesh];
+        for (const obj of this.objects) {
+            if (obj.name === objName) {
+                this.outlinePass.selectedObjects = [obj];
                 break;
             }
         }
     }
 
     rePerspective = (maxHeight, normalHeight) => {
-        const height = Math.max(maxHeight, normalHeight)
+        const height = Math.max(maxHeight, normalHeight);
         const cameraPosScale = 0.7;
         this.camera.position.set(
             -height * cameraPosScale,
@@ -208,6 +207,16 @@
             height * cameraPosScale
         );
         this.controls.target = new THREE.Vector3(0, maxHeight * 0.53, 0);
+    }
+
+    windowResize = () => {
+        this.resizeHandler = () => {
+            this.camera.aspect = this.getFullWidth() / this.getFullHeight();
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(this.getFullWidth(), this.getFullHeight());
+            this.composer.setSize(this.getFullWidth(), this.getFullHeight());
+        };
+        window.addEventListener('resize', this.resizeHandler, false);
     }
 
     destroy = () => {
@@ -249,27 +258,6 @@
     removeEntity = (object) => {
         if (object.material) object.material.dispose();
         if (object.geometry) object.geometry.dispose();
-        if (object.texture) object.texture.dispose();
         this.scene.remove(object);
     }
-};
-
-const initLight = (scene) => {
-    const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 6);
-    hemiLight.color.setHSL(0.6, 1, 0.6);
-    hemiLight.groundColor.setHSL(0.095, 1, 0.75);
-    hemiLight.position.set(0, 1500, 0);
-    scene.add(hemiLight);
-
-    const dirLight = new THREE.DirectionalLight(0xffffff, 2.5);
-    dirLight.color.setHSL(0.1, 1, 0.95);
-    dirLight.position.set(-10, 10, 10);
-    dirLight.position.multiplyScalar(30);
-    scene.add(dirLight);
-
-    const dirLight1 = new THREE.DirectionalLight(0xffffff, 2.5);
-    dirLight1.color.setHSL(0.1, 1, 0.95);
-    dirLight1.position.set(10, 10, -10);
-    dirLight1.position.multiplyScalar(30);
-    scene.add(dirLight1);
-}
\ No newline at end of file
+}
diff --git a/zy-acs-flow/src/map/insight/agv/index.jsx b/zy-acs-flow/src/map/insight/agv/index.jsx
index af002ed..8edcca9 100644
--- a/zy-acs-flow/src/map/insight/agv/index.jsx
+++ b/zy-acs-flow/src/map/insight/agv/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslate } from "react-admin";
 import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material';
-// import AgvMain from './AgvMain';
+import AgvMain from './AgvMain';
 import JsonShow from '../../JsonShow';
 
 const AgvInsight = (props) => {
@@ -33,13 +33,11 @@
 
             <Box flex={1} pt={2}>
                 {activeTab === 0 && (
-                    <>
-                    </>
-                    // <AgvMain
-                    //     data={sprite?.data}
-                    //     curAgvNo={curAgvNo}
-                    //     setCurAgvNo={setCurAgvNo}
-                    // />
+                    <AgvMain
+                        data={sprite?.data}
+                        curAgvNo={curAgvNo}
+                        setCurAgvNo={setCurAgvNo}
+                    />
                 )}
                 {activeTab === 1 && (
                     <JsonShow

--
Gitblit v1.9.1