parent: 292cb440 | 补丁 | 提交 | ignore whitespace
#
luxiaotao1123
2024-04-19 2399081ea033cee6ae19ff458dd707a3392ada69 
#
2个文件已添加
1个文件已修改
93 ■■■■■ 已修改文件
src/assets/data/tunnel.js 24 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/tunnel.jsx 62 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/core/warehouse.jsx 7 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 src/assets/data/tunnel.js


New file


@@ -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;




 src/components/tunnel.jsx


New file


@@ -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;




 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>


        </>


    )