Minor improvements to camera, effects and phantoms

packages/client/src/3d/Effects.tsx

@@ -12,13 +12,18 @@ const Effects: React.FC = () => {
     <EffectComposer>
       <DepthOfField
         focusDistance={0}
-        focalLength={0.15}
+        focalLength={0.55}
-        bokehScale={2.5}
+        bokehScale={1.25}
         width={window.innerWidth / 2}
         height={window.innerHeight / 2}
       />
       <Vignette eskil={false} offset={0.1} darkness={0.8} />
-      <Bloom luminanceThreshold={0.7} luminanceSmoothing={0.5} height={300} opacity={3} />
+      <Bloom
+        luminanceThreshold={0.7}
+        luminanceSmoothing={0.5}
+        height={300}
+        opacity={2.2}
+      />
     </EffectComposer>
   )
 }

packages/client/src/3d/Phantom.tsx

@@ -1,5 +1,7 @@
 // @ts-nocheck
 import React, { useEffect, useRef } from 'react'
+import { extend } from 'react-three-fiber'
+import { Vector3, Euler } from 'three'
 
 import api, { Transform } from '../store'
 
@@ -19,7 +21,7 @@ const Phantom: React.FC<PhantomProps> = ({ id }) => {
           }
           ref.current?.position.fromArray([
             state.position[0],
-            state.position[1] + 1.25,
+            state.position[1] + 0.25,
             state.position[2],
           ])
           ref.current?.rotation.fromArray(state.rotation)
@@ -30,10 +32,21 @@ const Phantom: React.FC<PhantomProps> = ({ id }) => {
   }, [ref.current])
 
   return (
-    <mesh ref={ref}>
+    <group ref={ref}>
-      <sphereBufferGeometry args={[1, 16, 16]} />
+      <mesh scale={new Vector3(0.5, 0.5, 0.5)}>
+        <sphereBufferGeometry />
         <meshStandardMaterial color="hotpink" />
+        <meshBasicMaterial color="white" emmisive="white" opacity={0.8} transparent />
       </mesh>
+      <mesh
+        scale={new Vector3(0.15, 0.15, 0.15)}
+        position={new Vector3(0, 0, -0.8)}
+        rotation={new Euler(-Math.PI / 2, 0, 0)}
+      >
+        <coneBufferGeometry args={[1, 2, 4]} />
+        <meshBasicMaterial color="yellow" emmisive="yellow" opacity={0.8} transparent />
+      </mesh>
+    </group>
   )
 }
 

packages/client/src/3d/Player.tsx

@@ -12,7 +12,11 @@ const keys: Record<string, string> = {
   KeyS: 'backward',
   KeyA: 'left',
   KeyD: 'right',
-  ShiftLeft: 'running',
+  ArrowUp: 'forward',
+  ArrowDown: 'backward',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+  ShiftLeft: 'run',
   Space: 'jump',
 }
 const moveFieldByKey = (key: string) => keys[key]
@@ -26,15 +30,16 @@ const usePlayerControls = () => {
     backward: false,
     left: false,
     right: false,
-    running: false,
+    run: false,
     jump: false,
   })
   useEffect(() => {
     const handleKeyDown = (e: Event) => {
       setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: true }))
     }
-    const handleKeyUp = (e: Event) =>
+    const handleKeyUp = (e: Event) => {
       setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: false }))
+    }
     document.addEventListener('keydown', handleKeyDown)
     document.addEventListener('keyup', handleKeyUp)
     return () => {
@@ -48,30 +53,32 @@ const usePlayerControls = () => {
 // TODO Improve physics in player
 const Player = (props: SphereProps) => {
   const socket = useStore((state) => state.socket)
-  const { forward, backward, left, right, running } = usePlayerControls()
+  const pointerLocked = useStore((state) => state.pointerLocked)
+  const { forward, backward, left, right, run } = usePlayerControls()
   const { camera } = useThree()
   const [ref, api] = useSphere(() => ({
     type: 'Dynamic',
     fixedRotation: true,
-    position: [0, 1.5, 0],
+    position: [0, 2, 0],
-    args: 0.2,
+    args: 1,
-    mass: 9,
+    mass: 5,
     linearDamping: 0,
     angularDamping: 0,
-    material: { friction: 0, restitution: 0 },
+    material: { friction: 10, restitution: 0 },
     ...props,
   }))
 
   useEffect(() => {
     const socketEmitTransformInterval = setInterval(() => {
       if (socket && ref.current && camera) {
+        const cameraRotation = camera.rotation.toArray()
         socket.emit('transform', {
           position: [
             ref.current.position.x,
             ref.current.position.y,
             ref.current.position.z,
           ],
-          rotation: [camera.rotation.x, camera.rotation.y, camera.rotation.z],
+          rotation: [cameraRotation[0], cameraRotation[1], cameraRotation[2]],
         })
       }
     }, 16)
@@ -87,7 +94,7 @@ const Player = (props: SphereProps) => {
     if (!ref.current) return
     camera.position.set(
       ref.current.position.x,
-      ref.current.position.y + 1,
+      ref.current.position.y + 0.4,
       ref.current.position.z,
     )
     frontVector.set(0, 0, Number(backward) - Number(forward))
@@ -95,10 +102,10 @@ const Player = (props: SphereProps) => {
     direction
       .subVectors(frontVector, sideVector)
       .normalize()
-      .multiplyScalar(running ? SPEED * 2 : SPEED)
+      .multiplyScalar(run ? SPEED * 2 : SPEED)
       .applyEuler(camera.rotation)
 
-    if (forward || backward || left || right) {
+    if (pointerLocked && (forward || backward || left || right)) {
       api.velocity.set(direction.x, -SPEED / 2, direction.z)
     } else {
       api.velocity.set(0, 0, 0)

packages/client/src/3d/index.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense } from 'react'
 import { Physics } from '@react-three/cannon'
+import { Stats } from '@react-three/drei'
 
 import World from './models/World'
 import WorldCollisions from './models/WorldCollisions'
@@ -12,14 +13,18 @@ import Users from './Users'
 const Scene: React.FC = () => {
   return (
     <>
+      <Stats />
       <Lighting />
 
       <Suspense fallback={null}>
         <World />
         <Physics
           gravity={[0, 0, 0]}
+          tolerance={0}
           iterations={2}
           size={2}
+          broadphase="SAP"
+          axisIndex={1}
           defaultContactMaterial={{
             friction: 0,
             restitution: 0,

packages/client/src/components/Museo.tsx

@@ -38,7 +38,15 @@ const Museo: React.FC = () => {
       ) : (
         <>
           <MenuOverlay />
-          <Canvas colorManagement concurrent>
+          <Canvas
+            colorManagement
+            concurrent
+            camera={{
+              fov: 45,
+              near: 0.25,
+              far: 200,
+            }}
+          >
             <Scene />
           </Canvas>
         </>