change units to meters

Author: julerex

.gitignore

@@ -8,6 +8,9 @@ node_modules/
 dist/
 *.log
 
+# Local dev logs
+.devlogs/
+
 # Environment
 .env
 .env.local

client/src/camera/CameraController.ts

@@ -32,19 +32,19 @@ interface CameraRotation {
 export class CameraController {
     private readonly camera: THREE.PerspectiveCamera;
     private rotation: CameraRotation = { theta: 0, phi: 0.5 };
-    private distance: number = 1000;
+    private distance: number = 10;
     private anchored: boolean = false;
     private focusPoint: THREE.Vector3 | null = null;
 
     // Configuration
-    private readonly minDistance: number = 200;
-    private readonly maxDistance: number = 5000;
+    private readonly minDistance: number = 2;
+    private readonly maxDistance: number = 50;
     private readonly rotationSpeed: number = 0.02;
-    private readonly freeMoveSpeed: number = 50;
+    private readonly freeMoveSpeed: number = 0.5;
 
     constructor(aspectRatio: number) {
-        this.camera = new THREE.PerspectiveCamera(75, aspectRatio, 10, 100000);
-        this.camera.position.set(0, 500, 1000);
+        this.camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 10000);
+        this.camera.position.set(0, 5, 10);
         this.camera.lookAt(0, 0, 0);
     }
 
@@ -147,7 +147,7 @@ export class CameraController {
         this.camera.position.set(targetX + x, targetY + y, targetZ + z);
 
         // Look at the target point
-        const target = new THREE.Vector3(targetX, targetY + 150, targetZ);
+        const target = new THREE.Vector3(targetX, targetY + 1.5, targetZ);
         this.camera.lookAt(target);
     }
 
@@ -158,6 +158,6 @@ export class CameraController {
 
     public setInitialPosition(player: Player): void {
         const pos = player.mesh.position;
-        this.camera.position.set(pos.x, pos.y + 500, pos.z + 1000);
+        this.camera.position.set(pos.x, pos.y + 5, pos.z + 10);
     }
 }

client/src/entities/Entity.ts

@@ -88,7 +88,7 @@ export class Entity {
 
     private createBallMesh(): THREE.Mesh {
         // Create a bouncy ball - a sphere with a bright color
-        const geometry = new THREE.SphereGeometry(50, 32, 32); // 50 unit radius (0.5m in game units)
+        const geometry = new THREE.SphereGeometry(0.5, 32, 32); // 0.5m radius
         const material = new THREE.MeshStandardMaterial({
             color: 0xff0000, // Bright red
             roughness: 0.3,

client/src/entities/Player.ts

@@ -8,7 +8,7 @@ import * as THREE from 'three';
 
 /**
  * 3D position in the game world.
- * Units are in centimeters (1 unit = 1 cm).
+ * Units are in meters (1 unit = 1 m).
  */
 export interface Position {
     /** X coordinate (horizontal, east-west) */
@@ -269,46 +269,46 @@ export class Player {
         const group = new THREE.Group();
 
         // Body (torso)
-        const bodyGeometry = new THREE.BoxGeometry(60, 80, 40);
+        const bodyGeometry = new THREE.BoxGeometry(0.6, 0.8, 0.4);
         const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x4a90e2 });
         const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
-        body.position.y = 110;
+        body.position.y = 1.1;
         body.castShadow = true;
         group.add(body);
 
         // Head
-        const headGeometry = new THREE.BoxGeometry(40, 40, 40);
+        const headGeometry = new THREE.BoxGeometry(0.4, 0.4, 0.4);
         const headMaterial = new THREE.MeshStandardMaterial({ color: 0xffdbac });
         const head = new THREE.Mesh(headGeometry, headMaterial);
-        head.position.y = 170;
+        head.position.y = 1.7;
         head.castShadow = true;
         group.add(head);
 
         // Legs
-        const legGeometry = new THREE.BoxGeometry(20, 70, 20);
+        const legGeometry = new THREE.BoxGeometry(0.2, 0.7, 0.2);
         const legMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
 
         const leftLeg = new THREE.Mesh(legGeometry, legMaterial);
-        leftLeg.position.set(-15, 35, 0);
+        leftLeg.position.set(-0.15, 0.35, 0);
         leftLeg.castShadow = true;
         group.add(leftLeg);
 
         const rightLeg = new THREE.Mesh(legGeometry, legMaterial);
-        rightLeg.position.set(15, 35, 0);
+        rightLeg.position.set(0.15, 0.35, 0);
         rightLeg.castShadow = true;
         group.add(rightLeg);
 
         // Arms
-        const armGeometry = new THREE.BoxGeometry(20, 70, 20);
+        const armGeometry = new THREE.BoxGeometry(0.2, 0.7, 0.2);
         const armMaterial = new THREE.MeshStandardMaterial({ color: 0x4a90e2 });
 
         const leftArm = new THREE.Mesh(armGeometry, armMaterial);
-        leftArm.position.set(-40, 110, 0);
+        leftArm.position.set(-0.4, 1.1, 0);
         leftArm.castShadow = true;
         group.add(leftArm);
 
         const rightArm = new THREE.Mesh(armGeometry, armMaterial);
-        rightArm.position.set(40, 110, 0);
+        rightArm.position.set(0.4, 1.1, 0);
         rightArm.castShadow = true;
         group.add(rightArm);
 
@@ -329,8 +329,8 @@ export class Player {
         const texture = new THREE.CanvasTexture(canvas);
         const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
         const sprite = new THREE.Sprite(spriteMaterial);
-        sprite.position.y = 250;
-        sprite.scale.set(200, 50, 100);
+        sprite.position.y = 2.5;
+        sprite.scale.set(2.0, 0.5, 1.0);
         group.add(sprite);
 
         // Activity info box (above name label)
@@ -345,8 +345,8 @@ export class Player {
         const activityTexture = new THREE.CanvasTexture(activityCanvas);
         const activitySpriteMaterial = new THREE.SpriteMaterial({ map: activityTexture });
         const activitySprite = new THREE.Sprite(activitySpriteMaterial);
-        activitySprite.position.y = 310;
-        activitySprite.scale.set(240, 36, 100);
+        activitySprite.position.y = 3.1;
+        activitySprite.scale.set(2.4, 0.36, 1.0);
         group.add(activitySprite);
 
         return { group, leftLeg, rightLeg, leftArm, rightArm, activityCanvas, activityTexture };

client/src/environment/DayNightCycle.ts

@@ -25,7 +25,7 @@ export class DayNightCycle {
     private readonly moonMesh: THREE.Mesh;
 
     // Configuration
-    private readonly sunRadius: number = 5000;
+    private readonly sunRadius: number = 50;
     private readonly dayColor = new THREE.Color(0x87ceeb);
     private readonly sunsetColor = new THREE.Color(0xff4500);
     private readonly nightColor = new THREE.Color(0x000022);
@@ -88,28 +88,28 @@ export class DayNightCycle {
 
     private createSunLight(): THREE.DirectionalLight {
         const light = new THREE.DirectionalLight(0xffffff, 1.0);
-        light.position.set(0, 10000, 0);
+        light.position.set(0, 100, 0);
         light.castShadow = true;
 
         // Shadow camera setup
-        light.shadow.camera.left = -5000;
-        light.shadow.camera.right = 5000;
-        light.shadow.camera.top = 5000;
-        light.shadow.camera.bottom = -5000;
+        light.shadow.camera.left = -50;
+        light.shadow.camera.right = 50;
+        light.shadow.camera.top = 50;
+        light.shadow.camera.bottom = -50;
         light.shadow.mapSize.width = 2048;
         light.shadow.mapSize.height = 2048;
 
         return light;
     }
 
     private createSunMesh(): THREE.Mesh {
-        const geometry = new THREE.SphereGeometry(200, 32, 32);
+        const geometry = new THREE.SphereGeometry(2, 32, 32);
         const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
         return new THREE.Mesh(geometry, material);
     }
 
     private createMoonMesh(): THREE.Mesh {
-        const geometry = new THREE.SphereGeometry(150, 32, 32);
+        const geometry = new THREE.SphereGeometry(1.5, 32, 32);
         const material = new THREE.MeshBasicMaterial({ color: 0xcccccc });
         return new THREE.Mesh(geometry, material);
     }

client/src/game-client.ts

@@ -145,31 +145,32 @@ export class GameClient {
 
         // Initialize random movement controller
         // Movement configuration (scaled for 60x game time)
-        // 6000 units/game minute = 100 units/frame at 60 FPS
-        // Lawn boundaries (ground size 10000, so half = 5000, minus margin for player body)
+        // Lawn boundaries (ground size 100m, so half = 50m, minus margin for player body)
         this.randomMovement = new RandomMovementController({
-            moveSpeed: 100,
+            moveSpeed: 1,
             rotationSpeed: 0.2,
             bounds: {
-                minX: -4970,
-                maxX: 4970,
-                minZ: -4970,
-                maxZ: 4970
+                minX: -49.7,
+                maxX: 49.7,
+                minZ: -49.7,
+                maxZ: 49.7
             }
         });
 
         // Create world objects
-        const house = WorldObjectFactory.createHouse(-600, -400);
+        const house = WorldObjectFactory.createHouse(-6, -4);
         this.scene.add(house);
         this.worldObjects.push(house);
 
-        // Pole next to house (100 units to the right)
-        const pole = WorldObjectFactory.createPole(-500, -400);
+        // Pole next to house (~1m to the right)
+        const pole = WorldObjectFactory.createPole(-5, -4);
         this.scene.add(pole);
         this.worldObjects.push(pole);
 
-        // Load and place bed at (2500, 2500)
-        WorldObjectFactory.loadBed(2500, 2500)
+        // Load and place bed near the house so it's immediately visible.
+        // House is centered at (-6, -4) with a 12m x 10m footprint (units are meters).
+        // Place the bed on the first-floor level (foundationHeight ~ 0.4m, floor at ~0.41m).
+        WorldObjectFactory.loadBed(-7.5, -2.5, 0.42)
             .then((bed) => {
                 if (this.scene) {
                     this.scene.add(bed);
@@ -212,7 +213,7 @@ export class GameClient {
             // Height-based opacity: 1-9 hide objects above (n * 3m), 0 resets
             if (key >= '1' && key <= '9') {
                 const level = parseInt(key, 10);
-                const heightThreshold = level * 300; // 300cm = 3m per level
+                const heightThreshold = level * 3; // 3m per level
                 this.heightOpacityManager?.setHeightOpacity(heightThreshold);
             } else if (key === '0') {
                 this.heightOpacityManager?.setHeightOpacity(null); // Reset to fully opaque

client/src/world/HeightOpacityManager.ts

@@ -1,10 +1,11 @@
 import * as THREE from 'three';
 
 // Floor height constants (matching WorldObjectFactory/HouseBuilder)
-const FOUNDATION_HEIGHT = 40;
-const FLOOR_HEIGHT = 270;
-const FLOOR1_TOP = FOUNDATION_HEIGHT + FLOOR_HEIGHT;       // 310cm
-const FLOOR2_TOP = FOUNDATION_HEIGHT + FLOOR_HEIGHT * 2;   // 580cm
+// Units: meters
+const FOUNDATION_HEIGHT = 0.4;
+const FLOOR_HEIGHT = 2.7;
+const FLOOR1_TOP = FOUNDATION_HEIGHT + FLOOR_HEIGHT;       // 3.1m
+const FLOOR2_TOP = FOUNDATION_HEIGHT + FLOOR_HEIGHT * 2;   // 5.8m
 
 const HIDDEN_OPACITY = 0.15;
 const VISIBLE_OPACITY = 1.0;
@@ -25,7 +26,7 @@ export class HeightOpacityManager {
      * Sets opacity for objects based on height threshold.
      * Objects above the threshold become semi-transparent.
      * Doors and roof elements are made transparent along with walls at the same floor level.
-     * @param heightThreshold - Height in cm above which objects become transparent. null = fully opaque.
+     * @param heightThreshold - Height in meters above which objects become transparent. null = fully opaque.
      */
     public setHeightOpacity(heightThreshold: number | null): void {
         for (const obj of this.worldObjects) {
@@ -45,8 +46,8 @@ export class HeightOpacityManager {
 
                         if (occlusionType === 'door' && floorLevel !== undefined) {
                             // Doors become transparent when their floor's walls would be transparent
-                            // Floor 1 doors: transparent when threshold < floor1Top (310cm)
-                            // Floor 2 doors: transparent when threshold < floor2Top (580cm)
+                            // Floor 1 doors: transparent when threshold < floor1Top (3.1m)
+                            // Floor 2 doors: transparent when threshold < floor2Top (5.8m)
                             const floorTop = floorLevel === 1 ? FLOOR1_TOP : FLOOR2_TOP;
                             targetOpacity = heightThreshold < floorTop ? HIDDEN_OPACITY : VISIBLE_OPACITY;
                         } else if (occlusionType === 'roof') {

client/src/world/HouseBuilder.ts

@@ -8,7 +8,11 @@
  * - Roof with chimney
  * - Porch
  * 
- * All dimensions are in centimeters (1 unit = 1 cm).
+ * World units are meters (1 unit = 1 m).
+ *
+ * NOTE: This builder is currently authored in centimeters for readability of
+ * traditional architectural dimensions, then the final group is scaled by 0.01
+ * to convert to meters.
  */
 
 import * as THREE from 'three';
@@ -22,7 +26,7 @@ import * as THREE from 'three';
 export class HouseBuilder {
     private readonly group: THREE.Group;
 
-    // Realistic house dimensions (1 unit = 1 cm)
+    // Realistic house dimensions (authored in centimeters, converted to meters via group scale)
     // Total footprint: 12m x 10m (1200cm x 1000cm)
     private readonly width = 1200;      // 12 meters wide
     private readonly depth = 1000;      // 10 meters deep
@@ -94,6 +98,9 @@ export class HouseBuilder {
         this.addChimney();
         this.addPorch();
 
+        // Convert authored-centimeter dimensions to world meters.
+        this.group.scale.set(0.01, 0.01, 0.01);
+
         return this.group;
     }