diff options
| author |  Silas Bartha <silas@exvacuum.dev> | 2025-02-10 16:50:19 -0500 |
|---|---|---|
| committer | Silas Bartha <silas@exvacuum.dev> | 2025-02-10 16:50:19 -0500 |
| commit | 89b411863b452fdab9d2b4a0cfd0e9d79d991f72 (patch) | |
| tree | 02de0ae38340386c0ac7bb6e8e4b6ab4317878bd /src/components/chatbubble.jsx | |
| parent | 55a0a3de6550f0142b79ab40645c20b465ddded8 (diff) | |
Reading messages from DB + clicking to place new messages
Diffstat (limited to 'src/components/chatbubble.jsx')
| -rw-r--r-- | src/components/chatbubble.jsx | 23 |
1 files changed, 13 insertions, 10 deletions
diff --git a/src/components/chatbubble.jsx b/src/components/chatbubble.jsx index a1ef114..c85f026 100644 --- a/src/components/chatbubble.jsx +++ b/src/components/chatbubble.jsx @@ -1,7 +1,7 @@ import { useContext, useRef, useState } from 'react' import * as everforest from '../_everforest.module.scss' import { useGLTF } from '@react-three/drei'; -import { useFrame, useThree } from '@react-three/fiber'; +import { useFrame } from '@react-three/fiber'; import { Html } from '@react-three/drei'; import { AppContext } from '../App'; import Color from 'color'; @@ -13,25 +13,29 @@ export default function ChatBubble({ position, text }) { const [activatable, setActivatable] = useState(false); const [active, setActive] = useState(false); const { keysPressed } = useContext(AppContext); - const { camera } = useThree(); - useFrame((_, delta) => { + useFrame((state, delta) => { if (active) { meshRef.current.rotation.y += delta; + let cameraPos = new Vector3(); + state.camera.getWorldPosition(cameraPos); + if (cameraPos.distanceToSquared(meshRef.current.position) > 900) { + setActive(false); + } } if(hovered) { let cameraPos = new Vector3(); - camera.getWorldPosition(cameraPos); - setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 9); + state.camera.getWorldPosition(cameraPos); + setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25); } else { setActivatable(false); } - if (keysPressed.includes('KeyE') && activatable) { + if (keysPressed.current.includes('KeyE') && activatable) { setActive(!active); } - }); + }, -2); const { nodes } = useGLTF('../assets/message-bubble.glb'); - let color = Color(active ? everforest.blue : everforest.orange); + let color = Color(active ? everforest.blue : everforest.purple); if (activatable) { color = color.lighten(.1); } @@ -41,10 +45,9 @@ export default function ChatBubble({ position, text }) { ref={meshRef} scale={active ? 3 : 2} geometry={nodes.Curve.geometry} - castShadow onPointerOver={(_) => setHovered(true)} onPointerOut={(_) => setHovered(false)}> - <meshStandardMaterial color={color.toString()} /> + <meshStandardMaterial color={color.toString()}/> {active && <Html center position={[0, .5, 0]} className='unselectable textPopup'><span>{text}</span></Html>} </mesh> ) |