#

luxiaotao1123

2024-04-24 5e39d5aaf44d377a91c135576a0c22b15790e7c7

 src/components/area.jsx

@@ -2,19 +2,11 @@
import { useFrame, useThree } from '@react-three/fiber';
import * as THREE from 'three';
import { CameraControls } from '@react-three/drei';
import Text2 from './text';
// import Annotation, { IAnnotationDataItem, IAnnotationRef } from './annotation';
import Text from './text';

const Y = 1;
const Area = ({
  x,
  y,
  width,
  height,
  areaNumber,
  textHeight,
  strokeColor,
}) => {
const Area = (props) => {
  const { x, y, width, height, textContent, textHeight, strokeColor } = props;
  const [hovered, setHover] = useState(false);
  const [clicked, setClicked] = useState(false);
  const meshRef = useRef(null);
@@ -65,18 +57,6 @@
    }
  });

  // const annotationRef = useRef(null);
  const annotationData = [
    {
      label: '长',
      value: width + '米',
    },
    {
      label: '宽',
      value: height + '米',
    },
  ];

  return (
    <group
      onClick={handleClick}
@@ -94,20 +74,14 @@
        <meshBasicMaterial attach="material" color={strokeColor} transparent opacity={0.2} />
      </mesh>

      {areaNumber && (
        <Text2
      {textContent && (
        <Text
          position={new THREE.Vector3(position.x, textHeight, position.z)}
          text={areaNumber}
          text={textContent}
          scale={new THREE.Vector3(100, 100, 100)}
          fontSize={100}
        />
      )}
      {/* <Annotation
        ref={annotationRef}
        title={areaNumber}
        position={position}
        data={annotationData}
      ></Annotation> */}
    </group>
  );
};