From 6f338f73c8b2111420fd28dde9afadd925fdce0b Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 19 四月 2024 09:25:12 +0800
Subject: [PATCH] #
---
src/pages/base.jsx | 44 ++++++++++-----------
src/components/help.jsx | 18 +++++++++
2 files changed, 39 insertions(+), 23 deletions(-)
diff --git a/src/components/help.jsx b/src/components/help.jsx
new file mode 100644
index 0000000..3359bd8
--- /dev/null
+++ b/src/components/help.jsx
@@ -0,0 +1,18 @@
+import { GizmoHelper, GizmoViewport, Stats } from '@react-three/drei';
+import { Suspense } from 'react';
+
+const Gizmo = () => {
+ return (
+ <Suspense>
+ <GizmoHelper alignment="bottom-right" margin={[80, 80]} onUpdate={() => null}>
+ {/* <mesh>
+ <boxBufferGeometry args={[1, 1, 1]} />
+ <meshStandardMaterial color="hotpink" />
+ </mesh> */}
+ <GizmoViewport labelColor="white" axisHeadScale={1} />
+ <Stats className="!right-0 top-0 !left-[inherit]" />
+ </GizmoHelper>
+ </Suspense>
+ );
+};
+export default Gizmo;
diff --git a/src/pages/base.jsx b/src/pages/base.jsx
index 6f453c0..150d9e0 100644
--- a/src/pages/base.jsx
+++ b/src/pages/base.jsx
@@ -2,29 +2,7 @@
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Environment } from '@react-three/drei'
-
-const Box = (props) => {
-
- const ref = useRef()
-
- const [hovered, hover] = useState(false)
- const [clicked, click] = useState(false)
-
- useFrame((state, delta) => (ref.current.rotation.x += delta))
-
- return (
- <mesh
- {...props}
- ref={ref}
- scale={clicked ? 1.5 : 1}
- onClick={(event) => click(!clicked)}
- onPointerOver={(event) => (event.stopPropagation(), hover(true))}
- onPointerOut={(event) => hover(false)}>
- <boxGeometry args={[1, 1, 1]} />
- <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
- </mesh>
- )
-}
+import Help from '@/components/help'
const Base = () => {
return (
@@ -36,10 +14,30 @@
<Box position={[0, 0, 0]} />
<OrbitControls />
<Environment background preset="warehouse" />
+ <Help />
</Canvas>
</div>
)
}
+const Box = (props) => {
+ const ref = useRef()
+ const [hovered, hover] = useState(false)
+ const [clicked, click] = useState(false)
+ useFrame((state, delta) => (ref.current.rotation.x += delta))
+ return (
+ <mesh
+ {...props}
+ ref={ref}
+ scale={clicked ? 1.5 : 1}
+ onClick={(event) => click(!clicked)}
+ onPointerOver={(event) => (event.stopPropagation(), hover(true))}
+ onPointerOut={(event) => hover(false)}>
+ <boxGeometry args={[1, 1, 1]} />
+ <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+ </mesh>
+ )
+}
+
export default Base;
\ No newline at end of file
--
Gitblit v1.9.1