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 { Html } from '@react-three/drei'; import { AppContext } from '../App'; import Color from 'color'; import { Vector3 } from 'three'; export default function ChatBubble({ position, text }) { const meshRef = useRef(); const [hovered, setHovered] = useState(false); const [activatable, setActivatable] = useState(false); const [active, setActive] = useState(false); 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 ( setHovered(true)} onPointerOut={(_) => setHovered(false)}> {active && {text}} ) }