Reading messages from DB + clicking to place new messages

1 files changed, 36 insertions, 10 deletions

diff --git a/src/components/player.jsx b/src/components/player.jsx
index bd8e392..a9ddad0 100644
--- a/src/components/player.jsx
+++ b/src/components/player.jsx
@@ -1,29 +1,47 @@
-import { Capsule, PerspectiveCamera, PointerLockControls } from "@react-three/drei";
-import { useFrame } from "@react-three/fiber";
+import { PerspectiveCamera, PointerLockControls } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
 import { useContext, useEffect, useRef } from "react";
 import { AppContext } from "../App";
-import { CapsuleCollider, RapierCollider, RapierRigidBody, RigidBody, useRapier, vec3 } from "@react-three/rapier";
-import { quat } from "@react-three/rapier";
-import { Euler, Object3D, Vector3 } from "three";
+import { CapsuleCollider, RigidBody, useRapier, vec3 } from "@react-three/rapier";
+import { Vector3 } from "three";
 import { useBeforePhysicsStep } from "@react-three/rapier";
+import { Raycaster } from "three";
 
 const _movespeed = 3.0;
 
 export default function Player() {
     const controlsRef = useRef();
-    const { keys } = useContext(AppContext);
+    const { keys, setMessages } = useContext(AppContext);
     const rapier = useRapier();
     const controller = useRef();
     const collider = useRef();
     const rigidbody = useRef();
     const camera = useRef();
+    const raycaster = useRef(new Raycaster());
+    const { scene, pointer } = useThree();
 
     const refState = useRef({
         grounded: false,
-        jumping: false,
         velocity: vec3(),
     });
 
+    const onClick = (_) => {
+        raycaster.current.setFromCamera(pointer, camera.current);
+        const intersect = raycaster.current.intersectObjects(scene.children).at(0);
+        if (intersect && intersect.object.name === 'ground' && intersect.distance < 10 && controlsRef.current.isLocked) {
+            const message = prompt();
+            if (message) {
+                setMessages(messages => [...messages, { position: intersect.point, message: message}]);
+            }
+            controlsRef.current.lock();
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener("click", onClick);
+        return () => window.removeEventListener("click", onClick);
+    }, []);
+
     useEffect(() => {
         const c = rapier.world.createCharacterController(0.1);
         c.setApplyImpulsesToDynamicBodies(true);
@@ -31,10 +49,18 @@ export default function Player() {
         controller.current = c;
     }, [rapier]);
 
+    useFrame((_, delta) => {
+        const fov_axis = +(keys.current.includes('Minus')) - +(keys.current.includes('Equal'));
+        if (fov_axis != 0) {
+            camera.current.fov += 45 * fov_axis * delta;
+            camera.current.updateProjectionMatrix();
+        }
+    });
+
     useBeforePhysicsStep((world) => {
         if (controller.current && rigidbody.current && collider.current) {
-            const move_axis_x = +(keys.includes('KeyD')) - +(keys.includes('KeyA'));
-            const move_axis_z = +(keys.includes('KeyW')) - +(keys.includes('KeyS'));
+            const move_axis_x = +(keys.current.includes('KeyD')) - +(keys.current.includes('KeyA'));
+            const move_axis_z = +(keys.current.includes('KeyW')) - +(keys.current.includes('KeyS'));
 
             const { velocity } = refState.current;
             const position = vec3(rigidbody.current.translation());
@@ -69,7 +95,7 @@ export default function Player() {
 
     return (
         <RigidBody type="kinematicPosition" colliders={false} ref={rigidbody} position={[0, 2, 0]}>
-            <PerspectiveCamera makeDefault position={[0, .9, 0]} fov={90} ref={camera} />
+            <PerspectiveCamera makeDefault position={[0, .9, 0]} ref={camera} fov={80}/>
             <PointerLockControls ref={controlsRef} />
             <CapsuleCollider ref={collider} args={[1, 0.5]} />
         </RigidBody>