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