From 2399081ea033cee6ae19ff458dd707a3392ada69 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 19 四月 2024 15:32:12 +0800
Subject: [PATCH] #
---
src/assets/data/tunnel.js | 24 ++++++++++++
src/components/tunnel.jsx | 62 +++++++++++++++++++++++++++++++
src/core/warehouse.jsx | 7 +++
3 files changed, 93 insertions(+), 0 deletions(-)
diff --git a/src/assets/data/tunnel.js b/src/assets/data/tunnel.js
new file mode 100644
index 0000000..a6d313f
--- /dev/null
+++ b/src/assets/data/tunnel.js
@@ -0,0 +1,24 @@
+const tunnelData = [
+ {
+ x: 200,
+ y: -1000,
+ width: 200,
+ height: 2000,
+ name: 'selected-rect1684723196047',
+ type: 'tunnel',
+ strokeColor: 'yellow',
+ tunnelNumber: 'T1',
+ },
+ {
+ x: 200,
+ y: -50,
+ width: 1300,
+ height: 100,
+ name: 'selected-rect1684723196047',
+ type: 'tunnel',
+ strokeColor: 'yellow',
+ tunnelNumber: 'T2',
+ },
+];
+
+export default tunnelData;
diff --git a/src/components/tunnel.jsx b/src/components/tunnel.jsx
new file mode 100644
index 0000000..c800e08
--- /dev/null
+++ b/src/components/tunnel.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Vector3 } from 'three';
+import { MeshReflectorMaterial, Html } from '@react-three/drei';
+
+// export interface ITunnelProps {
+// x: number;
+// y: number;
+// width: number;
+// height: number;
+// tunnelNumber: string;
+// }
+const Tunnel = ({ x, y, width, height, tunnelNumber }) => {
+ // 宸烽亾鐨勪綅缃�
+ const innerPosition = new Vector3(x + width / 2, 1.1, y + height / 2);
+ const outerPosition = new Vector3(x + width / 2, 1, y + height / 2);
+ const textPosition = new Vector3(x + width / 2, 1.2, y + height / 2);
+
+ return (
+ <group>
+ <mesh position={innerPosition} rotation={[-Math.PI / 2, 0, 0]}>
+ <planeGeometry args={[width, height]}></planeGeometry>
+ <MeshReflectorMaterial
+ blur={[400, 100]}
+ resolution={1024}
+ mixBlur={1}
+ mixStrength={5}
+ depthScale={1}
+ minDepthThreshold={1}
+ color="rgb(0, 73, 45)"
+ metalness={0.85}
+ roughness={0.95}
+ mirror={0}
+ ></MeshReflectorMaterial>
+ </mesh>
+ <mesh position={outerPosition} rotation={[-Math.PI / 2, 0, 0]}>
+ <planeGeometry
+ args={[width > 0 ? width + 20 : width - 20, height > 0 ? height + 20 : height - 20]}
+ ></planeGeometry>
+ <meshBasicMaterial color="rgb(221, 165, 15)"></meshBasicMaterial>
+ </mesh>
+ {/* <Text
+ fontSize={24}
+ color="white"
+ anchorX="center"
+ anchorY="middle"
+ position={textPosition}
+ rotation={[-Math.PI / 2, 0, 0]}
+ matrixWorldAutoUpdate
+ getObjectsByProperty={null}
+ getVertexPosition={null}
+ >
+ {tunnelNumber}
+ <meshPhongMaterial color={"white"}></meshPhongMaterial>
+ </Text> */}
+ <Html scale={100} rotation={[-Math.PI / 2, 0, 0]} position={textPosition} transform occlude>
+ {tunnelNumber}
+ </Html>
+ </group>
+ );
+};
+
+export default Tunnel;
diff --git a/src/core/warehouse.jsx b/src/core/warehouse.jsx
index 0106022..424d279 100644
--- a/src/core/warehouse.jsx
+++ b/src/core/warehouse.jsx
@@ -1,5 +1,7 @@
import { useEffect, useRef, useMemo } from 'react';
import Agv from '../components/agv';
+import tunnelData from '../assets/data/tunnel';
+import Tunnel from '../components/tunnel';
const Warehouse = (props) => {
@@ -13,10 +15,15 @@
)
}, []);
+ const tunnelEl = useMemo(() => {
+ return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />)
+ }, []);
+
return (
<>
<group>
{agvEl}
+ {tunnelEl}
</group>
</>
)
--
Gitblit v1.9.1