Reading messages from DB + clicking to place new messages

api/.env

@@ -0,0 +1,2 @@
+DB_URI=mongodb://127.0.0.1
+DB_NAME=forum

api/api.py

@@ -1,8 +1,17 @@
-import time
+from flask import Flask, config
-from flask import Flask
+from dotenv import dotenv_values
+from pymongo import MongoClient
+from bson.json_util import dumps
+
+config = dotenv_values(".env")
 
 app = Flask(__name__)
 
-@app.route('/api/time')
+app.mongoclient = MongoClient(config["DB_URI"])
-def get_current_time():
+app.db = app.mongoclient[config["DB_NAME"]]
-    return {'time': time.time()}
+print("Connected to MongoDB database")
+
+@app.route('/api/message')
+def get_messages():
+    messages = dumps(list(app.db["message"].find(limit=100)))
+    return messages

src/App.jsx

@@ -3,30 +3,32 @@ import { Canvas, useFrame } from '@react-three/fiber';
 import Notes from './components/notes';
 import Player from './components/player';
 import Ground from './components/ground';
-import React, { Suspense, useContext, useEffect, useState } from 'react';
+import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
 import { Physics } from '@react-three/rapier';
+import Sun from './components/sun';
+import { Fog } from 'three';
+import * as everforest from './_everforest.module.scss'
 
 export const AppContext = React.createContext(null);
 
 function KeyPressedClearer() {
-    const { setKeysPressed } = useContext(AppContext);
+    const { keysPressed } = useContext(AppContext);
-    useFrame((_s, _d) => setKeysPressed([]));
+    useFrame((_s, _d) => keysPressed.current = [], -1);
     return <></>
 }
 
 function App() {
-    const [keys, setKeys] = useState([]);
+    const keys = useRef([]);
-    const [keysPressed, setKeysPressed] = useState([]);
+    const keysPressed = useRef([]);
+    const [messages, setMessages] = useState();
     const playerKeyDown = (event) => {
-        setKeys(keys => {
+        if (!keys.current.includes(event.code)) {
-            if(!keys.includes(event.code)) {
+            keysPressed.current.push(event.code);
-                setKeysPressed(keysPressed => [...keysPressed, event.code]);
+        }
-            }
+        keys.current.push(event.code);
-         return [...keys, event.code]
-        });
     }
     const playerKeyUp = (event) => {
-        setKeys(keys => keys.filter(k => k != event.code));
+        keys.current = keys.current.filter(k => k != event.code);
     }
     useEffect(() => {
         window.addEventListener('keydown', playerKeyDown);
@@ -36,28 +38,34 @@ function App() {
             window.removeEventListener('keyup', playerKeyUp);
         };
     }, []);
+    useEffect(() => {
+        fetch('/api/message').then((res) => res.json()).then((data) => {
+            console.log(data);
+            setMessages(data);
+        });
+    }, []);
     return (
-        <AppContext.Provider value={{ keys: keys, keysPressed: keysPressed, setKeysPressed: setKeysPressed }}>
+        <>
-            <Canvas shadows>
+            <div className='dot' />
-                <KeyPressedClearer />
+            <p className='unselectable hint'>
-                <Suspense>
+                E - read<br/>
-                    <Physics timeStep={1/60}>
+                LMB - write
-                        <directionalLight
+            </p>
-                            castShadow
+            <AppContext.Provider value={{ keys: keys, keysPressed: keysPressed, messages: messages, setMessages: setMessages }}>
-                            position={[100, 100, 100]}
+                <Canvas shadows>
-                            lookAt={[0, 0, 0]}
+                    <KeyPressedClearer />
-                            intensity={Math.PI / 2}
+                    <Suspense>
-                            shadow-mapSize-height={2048}
+                        <fog color={everforest.bg0} attach="fog" far={500}/>
-                            shadow-mapSize-width={2048}
+                        <Sun />
-                        />
-                        <ambientLight intensity={Math.PI / 4} />
                         <Notes />
-                        <Player />
+                        <Physics timeStep={1 / 60}>
-                        <Ground />
+                            <Player />
-                    </Physics>
+                            <Ground />
-                </Suspense>
+                        </Physics>
-            </Canvas>
+                    </Suspense>
-        </AppContext.Provider>
+                </Canvas>
+            </AppContext.Provider>
+        </>
     )
 }
 

src/components/chatbubble.jsx

@@ -1,7 +1,7 @@
 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 { useFrame } from '@react-three/fiber';
 import { Html } from '@react-three/drei';
 import { AppContext } from '../App';
 import Color from 'color';
@@ -13,25 +13,29 @@ export default function ChatBubble({ position, text }) {
     const [activatable, setActivatable] = useState(false);
     const [active, setActive] = useState(false);
     const { keysPressed } = useContext(AppContext);
-    const { camera } = useThree();
+    useFrame((state, delta) => {
-    useFrame((_, 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();
-            camera.getWorldPosition(cameraPos);
+            state.camera.getWorldPosition(cameraPos);
-            setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 9);
+            setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25);
         } else {
             setActivatable(false);
         }
-        if (keysPressed.includes('KeyE') && activatable) {
+        if (keysPressed.current.includes('KeyE') && activatable) {
             setActive(!active);
         }
-    });
+    }, -2);
     const { nodes } = useGLTF('../assets/message-bubble.glb');
 
-    let color = Color(active ? everforest.blue : everforest.orange);
+    let color = Color(active ? everforest.blue : everforest.purple);
     if (activatable) {
         color = color.lighten(.1);
     }
@@ -41,10 +45,9 @@ export default function ChatBubble({ position, text }) {
             ref={meshRef}
             scale={active ? 3 : 2}
             geometry={nodes.Curve.geometry}
-            castShadow
             onPointerOver={(_) => setHovered(true)}
             onPointerOut={(_) => setHovered(false)}>
-            <meshStandardMaterial color={color.toString()} />
+            <meshStandardMaterial color={color.toString()}/>
             {active && <Html center position={[0, .5, 0]} className='unselectable textPopup'><span>{text}</span></Html>}
         </mesh>
     )

src/components/ground.jsx

@@ -1,16 +1,16 @@
 import { useRef } from 'react';
 import * as everforest from '../_everforest.module.scss'
 import { RigidBody } from '@react-three/rapier';
-import { DoubleSide } from 'three';
 import { useGLTF } from '@react-three/drei';
 
 export default function Ground() {
     const meshRef = useRef();
     const { nodes } = useGLTF('../assets/terrain.glb');
+    
     return (
         <RigidBody type='fixed' colliders="trimesh">
-            <mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow geometry={nodes.Plane.geometry}>
+            <mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} geometry={nodes.Plane.geometry} name='ground'>
-                <meshStandardMaterial color={everforest.yellow} side={DoubleSide}/>
+                <meshStandardMaterial color={everforest.yellow}/>
             </mesh>
         </RigidBody>
     );

src/components/notes.jsx

@@ -1,14 +1,12 @@
+import { useContext } from "react";
 import ChatBubble from "./chatbubble";
-
+import { AppContext } from "../App";
-const chatbubbles = [
-    {position: [0,0,-3], text: "ugh. really struggling with double bleeds in my ankles. makes it hard to do very much of anything, let alone focus for my hobbies"},
-    {position: [-1,0,-5], text: "reddit is everywhere on google and i am sick of it... why can't there be a good forum site?"},
-];
 
 export default function Notes() {
+    const { messages } = useContext(AppContext);
     return (<>
-        {chatbubbles.map((chatbubble, index) => 
+        {messages.map((chatbubble, index) => 
-            <ChatBubble key={index} position={chatbubble.position} text={chatbubble.text}/>
+            <ChatBubble key={index} position={chatbubble.position} text={chatbubble.message}/>
         )}
     </>);
 }

src/components/player.jsx

@@ -1,29 +1,47 @@
-import { Capsule, PerspectiveCamera, PointerLockControls } from "@react-three/drei";
+import { PerspectiveCamera, PointerLockControls } from "@react-three/drei";
-import { useFrame } from "@react-three/fiber";
+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 { CapsuleCollider, RigidBody, useRapier, vec3 } from "@react-three/rapier";
-import { quat } from "@react-three/rapier";
+import { Vector3 } from "three";
-import { Euler, Object3D, 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_x = +(keys.current.includes('KeyD')) - +(keys.current.includes('KeyA'));
-            const move_axis_z = +(keys.includes('KeyW')) - +(keys.includes('KeyS'));
+            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>

src/components/sun.jsx

@@ -0,0 +1,18 @@
+import { Matrix4 } from 'three';
+import * as everforest from '../_everforest.module.scss'
+
+export default function Sun() {
+    return (<>
+        <directionalLight
+            position={[1000, 1000, 1000]}
+            lookAt={[0, 0, 0]}
+            intensity={Math.PI / 2}
+            color={everforest.red}
+        />
+        <ambientLight intensity={Math.PI / 4} />
+        <mesh position={[1000,1000,1000]}>
+            <icosahedronGeometry args={[100,100]}/>
+            <meshStandardMaterial color={everforest.red} emissive={everforest.red} emissiveIntensity={1} fog={false}/>
+        </mesh>
+    </>);
+}

src/main.jsx

@@ -5,6 +5,5 @@ import App from './App.jsx'
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />
-    <div className='dot'/>
   </StrictMode>,
 )

src/style.scss

@@ -31,7 +31,17 @@
   height: 5px;
   border-radius: 50%;
   transform: translate3d(-50%, -50%, 0);
-  border: 2px solid white;
+  border: 2px solid everforest.$fg;
+  z-index: 999999;
+}
+
+.hint {
+  position: fixed;
+  bottom: 0%;
+  left: 0%;
+  color: everforest.$bg2;
+  z-index: 999999;
+  margin: 5px;
 }
 
 html,
@@ -47,6 +57,7 @@ h1 {
 
 html {
   background-color: everforest.$bg0;
+  color: everforest.$fg;
   height: 100%;
 }