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