#

luxiaotao1123

2024-04-24 5e39d5aaf44d377a91c135576a0c22b15790e7c7

#

 src/assets/data/area.js

@@ -7,7 +7,7 @@
    name: 'selected-rect1684723196047',
    type: 'area',
    strokeColor: 'rgb(255, 0, 14)',
    areaNumber: 'AGV',
    textContent: 'AGV',
    textHeight: 400,
  },
];

 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>
  );
};

 src/components/text.jsx

@@ -18,7 +18,7 @@
  return canvas;
}

const Text2 = ({
const Text = ({
  text,
  position,
  scale = new THREE.Vector3(100, 100, 100),
@@ -37,4 +37,4 @@
  return <sprite material={material} position={position} scale={scale} />;
}

export default Text2;
export default Text;