| | |
|---|
| | | y: -1000, |
|---|
| | | width: 200, |
|---|
| | | height: 2000, |
|---|
| | | name: 'selected-rect1684723196047', |
|---|
| | | type: 'tunnel', |
|---|
| | | strokeColor: 'yellow', |
|---|
| | | tunnelNumber: 'T1', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | |
|---|
| | | y: -50, |
|---|
| | | width: 1300, |
|---|
| | | height: 100, |
|---|
| | | name: 'selected-rect1684723196047', |
|---|
| | | type: 'tunnel', |
|---|
| | | strokeColor: 'yellow', |
|---|
| | | tunnelNumber: 'T2', |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | |
|---|
| | | 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); |
|---|
| | |
|---|
| | | ></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> |
|---|
