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

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 (
        <mesh
            position={position}
            ref={meshRef}
            scale={active ? 3 : 2}
            geometry={nodes.Curve.geometry}
            castShadow
            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>
    )
}