| | |
|---|
| | | 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); |
|---|
| | |
|---|
| | | metalness={0.85} |
|---|
| | | roughness={0.95} |
|---|
| | | mirror={0} |
|---|
| | | ></MeshReflectorMaterial> |
|---|
| | | /> |
|---|
| | | </mesh> |
|---|
| | | <mesh position={outerPosition} rotation={[-Math.PI / 2, 0, 0]}> |
|---|
| | | <planeGeometry |
|---|
| | |
|---|
| | | ></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> |
|---|
