#

luxiaotao1123

2024-04-26 73e5e4f17c23a7f4832ea2bb36e1bd3799ab9ad9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { useRef, useState } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import * as THREE from 'three';
import Text from './text';
 
const Y = 1;
const Area = (props) => {
  const { x, y, width, height, textContent, textHeight, strokeColor } = props;
  const [hovered, setHover] = useState(false);
  const meshRef = useRef(null);
 
  const position = new THREE.Vector3(x + width / 2, Y, y + height / 2);
  const size = [width, 1, height];
  textHeight ||= Y + 50;
 
  useFrame(() => {
    const box = meshRef.current;
    if (box) {
      const color = !hovered ? strokeColor : 'white';
      const material = box.material;
      material.color.set(color);
      material.linewidth = 0.2;
    }
  });
 
  return (
    <group
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
    >
      <mesh ref={meshRef} position={position}>
        <boxGeometry attach="geometry" args={size} />
        <lineSegments>
          <edgesGeometry attach="geometry" args={[new THREE.BoxGeometry(...size)]} />
          <lineBasicMaterial attach="material" color={strokeColor} linewidth={0.2} />
        </lineSegments>
        <meshBasicMaterial attach="material" color={strokeColor} transparent opacity={0.2} />
      </mesh>
 
      {textContent && (
        <Text
          position={new THREE.Vector3(position.x, textHeight, position.z)}
          text={textContent}
        />
      )}
    </group>
  );
};
 
export default Area;