src/components/chatbubble.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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 { 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);
    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();
            state.camera.getWorldPosition(cameraPos);
            setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25);
        } else {
            setActivatable(false);
        }
        if (keysPressed.current.includes('KeyE') && activatable) {
            setActive(!active);
        }
    }, -2);
    const { nodes } = useGLTF('../assets/message-bubble.glb');

    let color = Color(active ? everforest.blue : everforest.purple);
    if (activatable) {
        color = color.lighten(.1);
    }
    return (
        <mesh
            position={position}
            ref={meshRef}
            scale={active ? 3 : 2}
            geometry={nodes.Curve.geometry}
            onPointerOver={(_) => setHovered(true)}
            onPointerOut={(_) => setHovered(false)}>
            <meshStandardMaterial color={color.toString()}/>
            {active && <Html center position={[0, .5, 0]} className='unselectable textPopup'><span>{text}</span></Html>}
        </mesh>
    )
}