bigger world + worldborder

TODO: fix teleport glitch when exiting car
2025-11-28 18:43:43 +01:00
parent cb05f9834b
commit 87bf9d7d38
4 changed files with 185 additions and 25 deletions
--- a/src/WorldBorder.tsx
+++ b/src/WorldBorder.tsx
@@ -0,0 +1,103 @@
+import { useRef, useMemo } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
+import { ShaderMaterial, Vector3, DoubleSide } from 'three'
+
+export function WorldBorder() {
+    const materialRef = useRef<ShaderMaterial>(null)
+    const { camera } = useThree()
+
+    const uniforms = useMemo(
+        () => ({
+            uPlayerPos: { value: new Vector3() },
+            uVisibleDistance: { value: 200.0 },
+        }),
+        []
+    )
+
+    useFrame(() => {
+        if (materialRef.current) {
+            materialRef.current.uniforms.uPlayerPos.value.copy(camera.position)
+        }
+    })
+
+    const vertexShader = `
+    varying vec3 vWorldPos;
+void main() {
+      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+    vWorldPos = worldPosition.xyz;
+    gl_Position = projectionMatrix * viewMatrix * worldPosition;
+}
+`
+
+    const fragmentShader = `
+    uniform vec3 uPlayerPos;
+    uniform float uVisibleDistance;
+    varying vec3 vWorldPos;
+
+void main() {
+      // Calculate distance from player to this fragment
+      float distToPlayer = distance(uPlayerPos, vWorldPos);
+
+      // Fade based on distance
+      float alpha = 1.0 - smoothstep(0.0, uVisibleDistance, distToPlayer);
+
+    if (alpha <= 0.0) discard;
+
+    gl_FragColor = vec4(1.0, 0.0, 0.0, alpha * 0.8);
+}
+`
+
+    const mapSize = 2500
+    const halfSize = mapSize / 2
+    const wallHeight = 100
+
+    return (
+        <group>
+            {/* North Wall (-Z) */}
+            <mesh position={[0, wallHeight / 2, -halfSize]}>
+                <planeGeometry args={[mapSize, wallHeight]} />
+                <shaderMaterial
+                    ref={materialRef}
+                    vertexShader={vertexShader}
+                    fragmentShader={fragmentShader}
+                    uniforms={uniforms}
+                    transparent
+                    side={DoubleSide}
+                />
+            </mesh>
+            {/* South Wall (+Z) */}
+            <mesh position={[0, wallHeight / 2, halfSize]}>
+                <planeGeometry args={[mapSize, wallHeight]} />
+                <shaderMaterial
+                    vertexShader={vertexShader}
+                    fragmentShader={fragmentShader}
+                    uniforms={uniforms}
+                    transparent
+                    side={DoubleSide}
+                />
+            </mesh>
+            {/* East Wall (+X) */}
+            <mesh position={[halfSize, wallHeight / 2, 0]} rotation={[0, -Math.PI / 2, 0]}>
+                <planeGeometry args={[mapSize, wallHeight]} />
+                <shaderMaterial
+                    vertexShader={vertexShader}
+                    fragmentShader={fragmentShader}
+                    uniforms={uniforms}
+                    transparent
+                    side={DoubleSide}
+                />
+            </mesh>
+            {/* West Wall (-X) */}
+            <mesh position={[-halfSize, wallHeight / 2, 0]} rotation={[0, Math.PI / 2, 0]}>
+                <planeGeometry args={[mapSize, wallHeight]} />
+                <shaderMaterial
+                    vertexShader={vertexShader}
+                    fragmentShader={fragmentShader}
+                    uniforms={uniforms}
+                    transparent
+                    side={DoubleSide}
+                />
+            </mesh>
+        </group>
+    )
+}