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