52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
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>
|
|
)
|
|
}
|