From 5926db501c43e9fff6f793e6c8e138063e097528 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 24 四月 2024 16:34:40 +0800
Subject: [PATCH] #
---
src/components/text.jsx | 1 -
src/assets/data/area.js | 2 +-
src/components/area.jsx | 45 ++++-----------------------------------------
3 files changed, 5 insertions(+), 43 deletions(-)
diff --git a/src/assets/data/area.js b/src/assets/data/area.js
index 093bf25..251c37d 100644
--- a/src/assets/data/area.js
+++ b/src/assets/data/area.js
@@ -4,7 +4,7 @@
y: -700,
width: 800,
height: 1500,
- strokeColor: 'rgb(255, 0, 14)',
+ strokeColor: 'rgb(255, 120, 120)',
textContent: 'AGV',
textHeight: 400,
},
diff --git a/src/components/area.jsx b/src/components/area.jsx
index 5294bbc..59b08ec 100644
--- a/src/components/area.jsx
+++ b/src/components/area.jsx
@@ -1,69 +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 Text from './text';
const Y = 1;
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;
- // 鐩告満绉诲姩鍒板尯鍩熺殑浣嶇疆
- 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;
}
});
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} />
diff --git a/src/components/text.jsx b/src/components/text.jsx
index 6d35cfd..fce096e 100644
--- a/src/components/text.jsx
+++ b/src/components/text.jsx
@@ -1,7 +1,6 @@
import * as THREE from 'three';
import { useEffect, useState } from 'react';
-
function generateSprite(text, color, fontSize = 50) {
const canvas = document.createElement('canvas');
canvas.width = 300;
--
Gitblit v1.9.1