react three fiber, drei, sass

1 files changed, 25 insertions, 0 deletions

diff --git a/src/components/chatbubble.jsx b/src/components/chatbubble.jsx
new file mode 100644
index 0000000..b3f4ad5
--- /dev/null
+++ b/src/components/chatbubble.jsx
@@ -0,0 +1,25 @@
+import { useRef, useState } from 'react'
+import * as everforest from '../_everforest.module.scss'
+import { useGLTF } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+
+export default function ChatBubble(props) {
+    const meshRef = useRef();
+    const [hovered, setHovered] = useState(false);
+    const [active, setActive] = useState(false);
+    useFrame((_, delta) => (meshRef.current.rotation.y += delta));
+    const {nodes} = useGLTF('../assets/message-bubble.glb');
+
+    return (
+        <mesh
+            {...props}
+            ref={meshRef}
+            scale={active ? 3 : 2}
+            onClick={(_) => setActive(!active)}
+            geometry={nodes.Curve.geometry}
+            onPointerOver={(_) => setHovered(true)}
+            onPointerOut={(_) => setHovered(false)}>
+            <meshStandardMaterial color={active ? everforest.blue : everforest.orange} />
+        </mesh>
+    )
+}