From fdd6020d22c6c9d54ce977f125e38b024e284159 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 17 八月 2024 11:23:17 +0800
Subject: [PATCH] #
---
src/components/area.jsx | 87 +++++--------------------------------------
1 files changed, 11 insertions(+), 76 deletions(-)
diff --git a/src/components/area.jsx b/src/components/area.jsx
index 3505595..887d07e 100644
--- a/src/components/area.jsx
+++ b/src/components/area.jsx
@@ -1,89 +1,32 @@
import React, { useRef, useState } from 'react';
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);
- const { controls } = useThree((state) => ({
- controls: state.controls,
- }));
- // 杞崲涓簒杞村拰z杞寸粍鎴愮殑鍧愭爣绯讳腑鐨勪綅缃�
const position = new THREE.Vector3(x + width / 2, Y, y + height / 2);
const size = [width, 1, height];
- textHeight ||= Y + 50;
+ // textHeight ||= Y + 50;
- // 鐩告満绉诲姩鍒板尯鍩熺殑浣嶇疆
- const handleClick = () => {
- if (clicked) return;
- setClicked(true);
- // controls.fitToBox(meshRef.current!, true);
- const mesh = meshRef.current;
- const { x, y, z } = mesh.position;
-
- const box = new THREE.Box3().setFromCenterAndSize(
- new THREE.Vector3(x, (y + textHeight) / 2, z),
- new THREE.Vector3(width, textHeight, height)
- );
- controls.fitToBox(box, true);
-
- // annotationRef.current?.show();
- };
-
- // 鐩告満绉诲姩鍥炲師鏉ョ殑浣嶇疆
- const handleDoubleClick = () => {
- setClicked(false);
- };
-
- // 鐩戝惉榧犳爣绉诲叆鍜岀Щ鍑轰簨浠讹紝鏀瑰彉hover鐘舵��
- const handlePointerOver = () => setHover(true);
- const handlePointerOut = () => setHover(false);
-
- // 姣忓抚鏇存柊杈规鐨勯鑹插拰绮楃粏
useFrame(() => {
const box = meshRef.current;
if (box) {
- const color = hovered || clicked ? strokeColor : 'white';
- const thickness = clicked ? 0.5 : 0.2;
+ const color = !hovered ? strokeColor : 'white';
const material = box.material;
material.color.set(color);
- material.linewidth = thickness;
+ material.linewidth = 0.2;
}
});
- // const annotationRef = useRef(null);
- const annotationData = [
- {
- label: '闀�',
- value: width + '绫�',
- },
- {
- label: '瀹�',
- value: height + '绫�',
- },
- ];
-
return (
<group
- onClick={handleClick}
- onPointerOver={handlePointerOver}
- onPointerOut={handlePointerOut}
- onDoubleClick={handleDoubleClick}
- onPointerMissed={() => setClicked(false)}
+ onPointerOver={() => setHover(true)}
+ onPointerOut={() => setHover(false)}
>
<mesh ref={meshRef} position={position}>
<boxGeometry attach="geometry" args={size} />
@@ -94,20 +37,12 @@
<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}
- scale={new THREE.Vector3(100, 100, 100)}
- fontSize={100}
+ text={textContent}
/>
)}
- {/* <Annotation
- ref={annotationRef}
- title={areaNumber}
- position={position}
- data={annotationData}
- ></Annotation> */}
</group>
);
};
--
Gitblit v1.9.1