Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 6

Commit

b444172

verified ·

1 Parent(s): 31d09af

Update backup1.index.html

Browse files

Files changed (1) hide show

backup1.index.html +441 -320

backup1.index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Three.js Infinite World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
@@ -12,7 +12,7 @@
         {
             "imports": {
                 "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                 "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
             }
         }
     </script>
@@ -24,26 +24,39 @@
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
-        let newlyPlacedObjects = []; // Track objects added THIS session for saving
-        const placeholderPlots = new Set(); // Track visually created placeholder grounds: 'x_z' string key
-        const groundMeshes = {}; // Store references to ground meshes: 'x_z' string key -> mesh
-        // --- Session Storage Key ---
-        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
-        // --- Access State from Streamlit ---
-        const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
-        const plotsMetadata = window.PLOTS_METADATA || []; // List of saved plot info
-        const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
-        const plotWidth = window.PLOT_WIDTH || 50.0;
-        const plotDepth = window.PLOT_DEPTH || 50.0; // Use plot depth
-        const groundMaterial = new THREE.MeshStandardMaterial({ // Reusable material
-             color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide
-        });
-        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ // Dimmer for placeholders
-             color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide
-        });
         function init() {
@@ -51,13 +64,14 @@
             scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
-            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000); // Increase far plane more
-            camera.position.set(0, 15, 20);
-            camera.lookAt(0, 0, 0);
             scene.add(camera);
             setupLighting();
-            setupInitialGround(); // Setup ground for existing plots ONLY initially
             setupPlayer();
             raycaster = new THREE.Raycaster();
@@ -69,352 +83,459 @@
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
-            loadInitialObjects();
-            restoreUnsavedState(); // Restore unsaved objects after initial load
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
-            document.addEventListener('click', onDocumentClick, false);
             window.addEventListener('resize', onWindowResize, false);
             document.addEventListener('keydown', onKeyDown);
             document.addEventListener('keyup', onKeyUp);
-            // Define global functions needed by Python
             window.teleportPlayer = teleportPlayer;
-            window.getSaveDataAndPosition = getSaveDataAndPosition; // Renamed JS function
-            window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
-            console.log("Three.js Initialized. World ready.");
             animate();
         }
-        function setupLighting() { /* ... unchanged ... */
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            directionalLight.position.set(50, 150, 100); // Higher and angled light
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 4096; // Increase shadow map size
-            directionalLight.shadow.mapSize.height = 4096;
-            directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 500;
-            // Dynamic frustum needed for large worlds, but keep wide for now
-            directionalLight.shadow.camera.left = -150;
-            directionalLight.shadow.camera.right = 150;
-            directionalLight.shadow.camera.top = 150;
-            directionalLight.shadow.camera.bottom = -150;
-            directionalLight.shadow.bias = -0.001;
-            scene.add(directionalLight);
         }
-        function setupInitialGround() {
-            // Create ground ONLY for plots defined in plotsMetadata
-            console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`);
-            plotsMetadata.forEach(plot => {
-                createGroundPlane(plot.grid_x, plot.grid_z, false); // false = not a placeholder
-            });
-             // Create a small initial ground at 0,0 if no plots exist yet
-             if (plotsMetadata.length === 0) {
-                  createGroundPlane(0, 0, false);
-             }
         }
-        // *** NEW: Function to create a ground plane for a specific grid cell ***
-        function createGroundPlane(gridX, gridZ, isPlaceholder) {
-            const gridKey = `${gridX}_${gridZ}`;
-            if (groundMeshes[gridKey]) return; // Don't recreate if it exists
-            console.log(`Creating ${isPlaceholder ? 'placeholder' : 'initial'} ground at ${gridX}, ${gridZ}`);
-            const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
-            const material = isPlaceholder ? placeholderGroundMaterial : groundMaterial;
-            const groundMesh = new THREE.Mesh(groundGeometry, material);
-            groundMesh.rotation.x = -Math.PI / 2;
-            groundMesh.position.y = -0.05;
-            // Position the center of the plane correctly
-            groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
-            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
-            groundMesh.receiveShadow = true;
-            groundMesh.userData.gridKey = gridKey; // Store key for potential removal/update
-            scene.add(groundMesh);
-            groundMeshes[gridKey] = groundMesh; // Store reference
-            if (isPlaceholder) {
-                 placeholderPlots.add(gridKey); // Track placeholders
             }
         }
-        function setupPlayer() { /* ... unchanged ... */
-            const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
-            const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 });
-            playerMesh = new THREE.Mesh(playerGeo, playerMat);
-            playerMesh.position.set(plotWidth / 2, 0.4 + 0.8/2, plotDepth/2); // Start in center of 0,0 plot
-            playerMesh.castShadow = true; playerMesh.receiveShadow = true;
-            scene.add(playerMesh);
         }
-        function loadInitialObjects() { /* ... unchanged, uses createAndPlaceObject ... */
-            console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
-            allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); });
-            console.log("Finished loading initial objects.");
-        }
-        function createAndPlaceObject(objData, isNewObject) { /* ... unchanged ... */
-             let loadedObject = null;
-             switch (objData.type) {
-                 case "Simple House": loadedObject = createSimpleHouse(); break;
-                 case "Tree": loadedObject = createTree(); break;
-                 case "Rock": loadedObject = createRock(); break;
-                 case "Fence Post": loadedObject = createFencePost(); break;
-                 default: console.warn("Unknown object type in data:", objData.type); break;
              }
-             if (loadedObject) {
-                 if (objData.position && objData.position.x !== undefined) {
-                     loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
-                 } else if (objData.pos_x !== undefined) {
-                      loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
-                 }
-                 if (objData.rotation) {
-                     loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
-                 } else if (objData.rot_x !== undefined) {
-                     loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
-                 }
-                 loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
-                 scene.add(loadedObject);
-                 if (isNewObject) { newlyPlacedObjects.push(loadedObject); }
-                 return loadedObject;
-            }
-            return null;
-        }
-        function saveUnsavedState() { /* ... unchanged ... */
-            try {
-                const stateToSave = newlyPlacedObjects.map(obj => ({ obj_id: obj.userData.obj_id, type: obj.userData.type, position: { x: obj.position.x, y: obj.position.y, z: obj.position.z }, rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order } }));
-                sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
-                console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`);
-            } catch (e) { console.error("Error saving state to sessionStorage:", e); }
-        }
-        function restoreUnsavedState() { /* ... unchanged ... */
-             try {
-                const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
-                if (savedState) {
-                    console.log("Found unsaved state in sessionStorage. Restoring...");
-                    const objectsToRestore = JSON.parse(savedState);
-                    if (Array.isArray(objectsToRestore)) {
-                         newlyPlacedObjects = []; let count = 0;
-                         objectsToRestore.forEach(objData => { if(createAndPlaceObject(objData, true)) { count++; } });
-                         console.log(`Restored ${count} objects.`);
-                    }
-                } else { console.log("No unsaved state found in sessionStorage."); }
-            } catch (e) { console.error("Error restoring state from sessionStorage:", e); sessionStorage.removeItem(SESSION_STORAGE_KEY); }
         }
-        function clearUnsavedState() { /* ... unchanged ... */
-            sessionStorage.removeItem(SESSION_STORAGE_KEY);
-            newlyPlacedObjects = [];
-            console.log("Cleared unsaved state from memory and sessionStorage.");
-        }
-        function createObjectBase(type) { /* ... unchanged ... */
-             return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
         }
-        function createSimpleHouse() { /* ... unchanged ... */
-            const base = createObjectBase("Simple House"); const group = new THREE.Group(); Object.assign(group, base);
-            const mat1=new THREE.MeshStandardMaterial({color:0xffccaa,roughness:0.8}), mat2=new THREE.MeshStandardMaterial({color:0xaa5533,roughness:0.7});
-            const m1=new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5),mat1); m1.position.y=1.5/2;m1.castShadow=true;m1.receiveShadow=true;group.add(m1);
-            const m2=new THREE.Mesh(new THREE.ConeGeometry(1.8,1,4),mat2); m2.position.y=1.5+1/2;m2.rotation.y=Math.PI/4;m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group;
-         }
-         function createTree() { /* ... unchanged ... */
-            const base=createObjectBase("Tree"); const group=new THREE.Group(); Object.assign(group,base);
-            const mat1=new THREE.MeshStandardMaterial({color:0x8B4513,roughness:0.9}), mat2=new THREE.MeshStandardMaterial({color:0x228B22,roughness:0.8});
-            const m1=new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8),mat1); m1.position.y=1; m1.castShadow=true;m1.receiveShadow=true;group.add(m1);
-            const m2=new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0),mat2); m2.position.y=2.8; m2.castShadow=true;m2.receiveShadow=true;group.add(m2); return group;
          }
-         function createRock() { /* ... unchanged ... */
-             const base=createObjectBase("Rock"); const mat=new THREE.MeshStandardMaterial({color:0xaaaaaa,roughness:0.8,metalness:0.1});
-             const rock=new THREE.Mesh(new THREE.IcosahedronGeometry(0.7,0),mat); Object.assign(rock,base);
-             rock.position.y=0.35; rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0); rock.castShadow=true;rock.receiveShadow=true; return rock;
-         }
-         function createFencePost() { /* ... unchanged ... */
-             const base=createObjectBase("Fence Post"); const mat=new THREE.MeshStandardMaterial({color:0xdeb887,roughness:0.9});
-             const post=new THREE.Mesh(new THREE.BoxGeometry(0.2,1.5,0.2),mat); Object.assign(post,base);
-             post.position.y=0.75; post.castShadow=true;post.receiveShadow=true; return post;
          }
-        // --- Event Handlers ---
-        function onMouseMove(event) { /* ... unchanged ... */
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        }
-        function onDocumentClick(event) { // Place object and save state
-             if (selectedObjectType === "None") return;
-             // Determine ground mesh to intersect (could be multiple now)
-             const groundCandidates = Object.values(groundMeshes);
-             if (groundCandidates.length === 0) return; // No ground to place on
-             raycaster.setFromCamera(mouse, camera);
-             // Intersect ALL ground meshes
-             const intersects = raycaster.intersectObjects(groundCandidates);
-             if (intersects.length > 0) {
-                 // Intersect point is on the specific ground mesh clicked
-                 const intersectPoint = intersects[0].point;
-                 let newObjectToPlace = null;
-                 switch (selectedObjectType) { /* ... create object ... */
-                    case "Simple House": newObjectToPlace = createSimpleHouse(); break;
-                    case "Tree": newObjectToPlace = createTree(); break;
-                    case "Rock": newObjectToPlace = createRock(); break;
-                    case "Fence Post": newObjectToPlace = createFencePost(); break;
-                    default: return;
-                 }
-                 if (newObjectToPlace) {
-                     newObjectToPlace.position.copy(intersectPoint);
-                     // Adjust Y position if needed based on object geometry origin
-                     // Base objects on y=0 in create functions for simplicity
-                     if(newObjectToPlace.geometry?.type.includes("Geometry")){ // Adjust Y so base is on ground
-                          newObjectToPlace.position.y += 0.01; // Slight offset above ground
-                     } else if (newObjectToPlace.type === "Group") {
-                          newObjectToPlace.position.y += 0.01; // Assume group base is near 0
-                     }
-                     scene.add(newObjectToPlace);
-                     newlyPlacedObjects.push(newObjectToPlace);
-                     saveUnsavedState(); // Save to sessionStorage immediately
-                     console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
                  }
-             }
-        }
-        function onKeyDown(event) { keysPressed[event.code] = true; }
-        function onKeyUp(event) { keysPressed[event.code] = false; }
-        // --- Functions called by Python via streamlit-js-eval ---
-        function teleportPlayer(targetX, targetZ) { // Now accepts Z coordinate
-            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${targetZ}`);
-            if (playerMesh) {
-                // Teleport near center of the target plot
-                playerMesh.position.x = targetX;
-                playerMesh.position.z = targetZ;
-                 const offset = new THREE.Vector3(0, 15, 20);
-                 const targetPosition = playerMesh.position.clone().add(offset);
-                 camera.position.copy(targetPosition);
-                 camera.lookAt(playerMesh.position);
-                 console.log("Player teleported to:", playerMesh.position);
-            } else { console.error("Player mesh not found for teleport."); }
         }
-        // *** UPDATED: Send player position along with save data ***
-        function getSaveDataAndPosition() {
-             console.log(`JS getSaveDataAndPosition called. Found ${newlyPlacedObjects.length} new objects.`);
-             const objectsToSave = newlyPlacedObjects.map(obj => {
-                 if (!obj.userData || !obj.userData.type) { return null; }
-                 const rotation = { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order };
-                 return { // Send WORLD positions
-                     obj_id: obj.userData.obj_id, type: obj.userData.type,
-                     position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
-                     rotation: rotation
-                 };
-             }).filter(obj => obj !== null);
-             const playerPos = playerMesh ? { x: playerMesh.position.x, y: playerMesh.position.y, z: playerMesh.position.z } : {x:0, y:0, z:0};
-             const payload = {
-                 playerPosition: playerPos,
-                 objectsToSave: objectsToSave
-             };
-             console.log("Prepared payload for saving:", payload);
-             return JSON.stringify(payload); // Return as JSON string
-        }
-        function resetNewlyPlacedObjects() { // Called by Python AFTER successful save
-             console.log(`JS resetNewlyPlacedObjects called.`);
-             clearUnsavedState(); // Clear memory array AND sessionStorage
         }
-        // --- Animation Loop ---
-        function updatePlayerMovement() {
-            if (!playerMesh) return;
-            const moveDirection = new THREE.Vector3(0, 0, 0);
-            // Basic WASD movement
-            if (keysPressed['KeyW'] || keysPressed['ArrowUp']) moveDirection.z -= 1;
-            if (keysPressed['KeyS'] || keysPressed['ArrowDown']) moveDirection.z += 1;
-            if (keysPressed['KeyA'] || keysPressed['ArrowLeft']) moveDirection.x -= 1;
-            if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
-            if (moveDirection.lengthSq() > 0) {
-                moveDirection.normalize().multiplyScalar(playerSpeed);
-                // Apply movement relative to camera direction for better control
-                 const forward = new THREE.Vector3();
-                 camera.getWorldDirection(forward);
-                 forward.y = 0; // Project onto XZ plane
-                 forward.normalize();
-                 const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize(); // Get right vector
-                 const worldMove = new THREE.Vector3();
-                 worldMove.add(forward.multiplyScalar(-moveDirection.z)); // W/S -> Forward/Backward
-                 worldMove.add(right.multiplyScalar(-moveDirection.x)); // A/D -> Left/Right
-                 worldMove.normalize().multiplyScalar(playerSpeed);
-                 playerMesh.position.add(worldMove);
-                 // Basic ground clamping
-                 playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2); // Adjust based on capsule base
-                 // *** ADDED: Check for ground expansion ***
-                 checkAndExpandGround();
-            }
         }
-        // *** NEW: Check if player is near edge and create placeholder ground ***
-        function checkAndExpandGround() {
-            if (!playerMesh) return;
-            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
-            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
-            // Check surrounding cells (Manhattan distance 1)
-            for (let dx = -1; dx <= 1; dx++) {
-                 for (let dz = -1; dz <= 1; dz++) {
-                      if (dx === 0 && dz === 0) continue; // Skip current cell
-                      const checkX = currentGridX + dx;
-                      const checkZ = currentGridZ + dz;
-                      const gridKey = `${checkX}_${checkZ}`;
-                      // Check if this grid cell already has ground (initial or placeholder)
-                      if (!groundMeshes[gridKey]) {
-                           // Check if this grid cell corresponds to a SAVED plot (from metadata)
-                           const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
-                           // If it's NOT a saved plot, create a placeholder
-                           if (!isSavedPlot) {
-                                createGroundPlane(checkX, checkZ, true); // true = is placeholder
-                           }
-                           // If it IS a saved plot but somehow missing ground (error?), recreate it?
-                           // else { createGroundPlane(checkX, checkZ, false); } // Optional robustness
-                      }
-                 }
             }
         }
-        function updateCamera() { /* ... unchanged ... */
-            if (!playerMesh) return;
-            const offset = new THREE.Vector3(0, 15, 20); // Fixed offset for now
-            const targetPosition = playerMesh.position.clone().add(offset);
-            camera.position.lerp(targetPosition, 0.08);
-            camera.lookAt(playerMesh.position);
         }
-        function onWindowResize() { /* ... unchanged ... */
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         }
         function animate() {
             requestAnimationFrame(animate);
-            updatePlayerMovement(); // Includes ground check now
             updateCamera();
             renderer.render(scene, camera);
         }

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Shared World Builder</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
         {
             "imports": {
                 "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
             }
         }
     </script>
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
+        // --- World State (Managed by Server via WebSocket) ---
+        const worldObjects = new Map(); // Map<obj_id, THREE.Object3D>
+        const groundMeshes = {}; // Map<gridKey, THREE.Mesh>
+        // --- WebSocket ---
+        let socket = null;
+        let connectionRetries = 0;
+        const MAX_RETRIES = 5;
+        // --- Access State from Streamlit (Injected) ---
+        const myUsername = window.USERNAME || `User_${Math.random().toString(36).substring(2, 6)}`;
+        const websocketUrl = window.WEBSOCKET_URL || "ws://localhost:8765";
+        let selectedObjectType = window.SELECTED_OBJECT_TYPE || "None"; // Can be updated
+        const plotWidth = window.PLOT_WIDTH || 50.0;
+        const plotDepth = window.PLOT_DEPTH || 50.0;
+        // --- Materials ---
+        const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide });
+        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide });
+        // Basic material cache/reuse
+        const objectMaterials = {
+            'wood': new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 }),
+            'leaf': new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 }),
+            'stone': new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8, metalness: 0.1 }),
+            'house_wall': new THREE.MeshStandardMaterial({ color: 0xffccaa, roughness: 0.8 }),
+            'house_roof': new THREE.MeshStandardMaterial({ color: 0xaa5533, roughness: 0.7 }),
+            'brick': new THREE.MeshStandardMaterial({ color: 0x9B4C43, roughness: 0.85 }),
+            'metal': new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.4, metalness: 0.8 }),
+            'gem': new THREE.MeshStandardMaterial({ color: 0x4FFFFF, roughness: 0.1, metalness: 0.2, transparent: true, opacity: 0.8 }),
+            'light': new THREE.MeshBasicMaterial({ color: 0xFFFF88 }), // For light sources
+            // Add more reusable materials
+        };
         function init() {
             scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
+            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 5000); // Increased far plane
+            camera.position.set(plotWidth / 2, 15, plotDepth / 2 + 20);
+            camera.lookAt(plotWidth/2, 0, plotDepth/2);
             scene.add(camera);
             setupLighting();
+            // Don't setup initial ground here, wait for WebSocket initial state? Or create base?
+            createGroundPlane(0, 0, false); // Create the origin ground at least
             setupPlayer();
             raycaster = new THREE.Raycaster();
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
+            // --- Initialize WebSocket Connection ---
+            connectWebSocket();
             // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
+            document.addEventListener('click', onDocumentClick, false); // Place object
             window.addEventListener('resize', onWindowResize, false);
             document.addEventListener('keydown', onKeyDown);
             document.addEventListener('keyup', onKeyUp);
+            // --- Define global functions needed by Python ---
             window.teleportPlayer = teleportPlayer;
+            // Removed getSaveDataAndPosition - saving now server-side via WS
+            // Removed resetNewlyPlacedObjects - no longer needed
+            window.updateSelectedObjectType = updateSelectedObjectType; // Still needed
+            console.log(`Three.js Initialized for user: ${myUsername}. Connecting to ${websocketUrl}...`);
             animate();
         }
+        // --- WebSocket Logic ---
+        function connectWebSocket() {
+            console.log("Attempting WebSocket connection...");
+            socket = new WebSocket(websocketUrl);
+            socket.onopen = () => {
+                console.log("WebSocket connection established.");
+                connectionRetries = 0;
+                // Request initial state? Server sends it automatically now.
+                // socket.send(JSON.stringify({ type: "request_initial_state" }));
+            };
+            socket.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    // console.log("WebSocket message received:", data); // Debugging
+                    handleWebSocketMessage(data);
+                } catch (e) {
+                    console.error("Failed to parse WebSocket message:", event.data, e);
+                }
+            };
+            socket.onerror = (error) => {
+                console.error("WebSocket error:", error);
+                // Consider showing an error message to the user in Streamlit?
+            };
+            socket.onclose = (event) => {
+                console.warn(`WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason}. Clean: ${event.wasClean}`);
+                socket = null;
+                // Implement reconnection strategy
+                if (connectionRetries < MAX_RETRIES) {
+                    connectionRetries++;
+                    const delay = Math.pow(2, connectionRetries) * 1000; // Exponential backoff
+                    console.log(`Attempting reconnection in ${delay / 1000}s...`);
+                    setTimeout(connectWebSocket, delay);
+                } else {
+                    console.error("WebSocket reconnection failed after max retries.");
+                    // Inform user connection lost - maybe via Streamlit call?
+                }
+            };
         }
+        function sendWebSocketMessage(type, payload) {
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                const message = JSON.stringify({ type, payload });
+                socket.send(message);
+            } else {
+                console.warn("WebSocket not open. Message not sent:", type, payload);
+                // Optionally queue messages to send on reconnect?
+            }
         }
+        function handleWebSocketMessage(data) {
+            const { type, payload } = data;
+            switch (type) {
+                case "initial_state":
+                    console.log(`Received initial world state with ${Object.keys(payload).length} objects.`);
+                    // Clear existing objects (except player?) before loading initial state
+                    clearWorldObjects();
+                    for (const obj_id in payload) {
+                        createAndPlaceObject(payload[obj_id], false); // false = not newly placed
+                    }
+                    // Setup ground based on loaded objects' positions? Or separate metadata needed?
+                    // For now, rely on dynamic ground expansion.
+                    break;
+                case "object_placed":
+                     console.log(`Object placed by ${payload.username}:`, payload.object_data);
+                     // Add or update the object in the scene
+                     createAndPlaceObject(payload.object_data, false); // false = not newly placed by *this* client
+                     break;
+                case "object_deleted":
+                    console.log(`Object deleted by ${payload.username}:`, payload.obj_id);
+                    removeObjectById(payload.obj_id);
+                    break;
+                case "user_join":
+                     console.log(`User joined: ${payload.username} (${payload.id})`);
+                     // Optionally display user join message in chat tab or 3D world?
+                     break;
+                case "user_leave":
+                     console.log(`User left: ${payload.username} (${payload.id})`);
+                     // Optionally display user leave message
+                     break;
+                case "user_rename":
+                     console.log(`User ${payload.old_username} is now ${payload.new_username}`);
+                     break;
+                 case "chat_message":
+                      console.log(`Chat from ${payload.username}: ${payload.message}`);
+                      // Handle displaying chat in the Streamlit Chat tab (Python side handles this)
+                      break;
+                // Add handlers for other message types
+                default:
+                    console.warn("Received unknown WebSocket message type:", type);
             }
         }
+        function clearWorldObjects() {
+             console.log("Clearing existing world objects...");
+             for (const [obj_id, mesh] of worldObjects.entries()) {
+                 scene.remove(mesh);
+                 // Optional: Dispose geometry/material for memory management
+                 // disposeObject3D(mesh);
+             }
+             worldObjects.clear();
+             // Also clear ground meshes? Or keep them? Keep for now.
         }
+        function removeObjectById(obj_id) {
+             if (worldObjects.has(obj_id)) {
+                  const mesh = worldObjects.get(obj_id);
+                  scene.remove(mesh);
+                  // disposeObject3D(mesh); // Optional cleanup
+                  worldObjects.delete(obj_id);
+                  console.log(`Removed object ${obj_id} from scene.`);
+             } else {
+                  console.warn(`Attempted to remove non-existent object ID: ${obj_id}`);
              }
         }
+        // --- Standard Setup Functions ---
+        function setupLighting() { /* ... (Keep as before) ... */
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(75, 150, 100); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 10; directionalLight.shadow.camera.far = 400; directionalLight.shadow.camera.left = -150; directionalLight.shadow.camera.right = 150; directionalLight.shadow.camera.top = 150; directionalLight.shadow.camera.bottom = -150; directionalLight.shadow.bias = -0.002; scene.add(directionalLight);
+            const hemiLight = new THREE.HemisphereLight( 0xabcdef, 0x55aa55, 0.5 ); scene.add( hemiLight );
         }
+        function setupPlayer() { /* ... (Keep as before) ... */
+             const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8); const playerMat = new THREE.MeshStandardMaterial({ color: 0x0055ff, roughness: 0.6 }); playerMesh = new THREE.Mesh(playerGeo, playerMat); playerMesh.position.set(plotWidth / 2, 0.8, plotDepth / 2); playerMesh.castShadow = true; playerMesh.receiveShadow = false; scene.add(playerMesh);
          }
+        function createGroundPlane(gridX, gridZ, isPlaceholder) { /* ... (Keep as before) ... */
+            const gridKey = `${gridX}_${gridZ}`; if (groundMeshes[gridKey]) return groundMeshes[gridKey];
+            const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth); const material = isPlaceholder ? placeholderGroundMaterial : groundMaterial; const groundMesh = new THREE.Mesh(groundGeometry, material); groundMesh.rotation.x = -Math.PI / 2; groundMesh.position.y = -0.05; groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0; groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0; groundMesh.receiveShadow = true; groundMesh.userData.gridKey = gridKey; groundMesh.userData.isPlaceholder = isPlaceholder; scene.add(groundMesh); groundMeshes[gridKey] = groundMesh; return groundMesh;
          }
+        // --- Object Creation & Placement (Modified for WebSocket & New Primitives) ---
+        // Central function to add/update objects based on data
+        function createAndPlaceObject(objData, isNewlyPlacedLocally) { // isNewlyPlacedLocally not really used now
+            if (!objData || !objData.obj_id || !objData.type) {
+                console.warn("Invalid object data:", objData);
+                return null;
+            }
+            // Check if object already exists (update vs create)
+            let mesh = worldObjects.get(objData.obj_id);
+            let isNew = false;
+            if (mesh) {
+                 // Update existing mesh position/rotation if different
+                 if (mesh.position.distanceToSquared(objData.position) > 0.001) {
+                      mesh.position.set(objData.position.x, objData.position.y, objData.position.z);
+                 }
+                 if (objData.rotation && (
+                      Math.abs(mesh.rotation.x - objData.rotation._x) > 0.01 ||
+                      Math.abs(mesh.rotation.y - objData.rotation._y) > 0.01 ||
+                      Math.abs(mesh.rotation.z - objData.rotation._z) > 0.01 )) {
+                       mesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
+                 }
+                 // Could add logic here to update geometry/material if type changes? Unlikely.
+                 // console.log(`Updated object ${objData.obj_id}`);
+            } else {
+                 // Create new mesh
+                 mesh = createPrimitiveMesh(objData.type); // Use the new factory function
+                 if (!mesh) return null; // Failed to create mesh type
+                 isNew = true;
+                 mesh.userData.obj_id = objData.obj_id; // Assign ID from data
+                 mesh.userData.type = objData.type;
+                 mesh.position.set(objData.position.x, objData.position.y, objData.position.z);
+                 if (objData.rotation) {
+                     mesh.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
                  }
+                 scene.add(mesh);
+                 worldObjects.set(objData.obj_id, mesh); // Add to our map
+                 // console.log(`Created new object ${objData.obj_id} (${objData.type})`);
+            }
+            return mesh;
         }
+        // Factory function for creating meshes based on type name
+        function createPrimitiveMesh(type) {
+            let mesh = null;
+            let geometry, material, material2; // Declare vars
+            // Use reusable materials where possible
+            const wood = objectMaterials.wood;
+            const leaf = objectMaterials.leaf;
+            const stone = objectMaterials.stone;
+            const house_wall = objectMaterials.house_wall;
+            const house_roof = objectMaterials.house_roof;
+            const brick = objectMaterials.brick;
+            const metal = objectMaterials.metal;
+            const gem = objectMaterials.gem;
+            const lightMat = objectMaterials.light;
+            try { // Wrap in try-catch for safety if geometry fails
+                switch(type) {
+                    // --- Original Primitives ---
+                    case "Tree":
+                        mesh = new THREE.Group();
+                        geometry = new THREE.CylinderGeometry(0.3, 0.4, 2, 8); material = wood;
+                        const trunk = new THREE.Mesh(geometry, material); trunk.position.y = 1; trunk.castShadow=true; trunk.receiveShadow=true; mesh.add(trunk);
+                        geometry = new THREE.IcosahedronGeometry(1.2, 0); material = leaf;
+                        const canopy = new THREE.Mesh(geometry, material); canopy.position.y = 2.8; canopy.castShadow=true; canopy.receiveShadow=false; mesh.add(canopy);
+                        break;
+                    case "Rock":
+                        geometry = new THREE.IcosahedronGeometry(0.7, 1); material = stone;
+                        // Optional: Deform geometry slightly (can be slow if done often)
+                        mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true;
+                        mesh.scale.set(1, Math.random()*0.4 + 0.8, 1); // Vary shape slightly
+                        break;
+                    case "Simple House":
+                        mesh = new THREE.Group();
+                        geometry = new THREE.BoxGeometry(2, 1.5, 2.5); material = house_wall;
+                        const body = new THREE.Mesh(geometry, material); body.position.y = 0.75; body.castShadow = true; body.receiveShadow = true; mesh.add(body);
+                        geometry = new THREE.ConeGeometry(1.8, 1, 4); material = house_roof;
+                        const roof = new THREE.Mesh(geometry, material); roof.position.y = 1.5 + 0.5; roof.rotation.y = Math.PI / 4; roof.castShadow = true; roof.receiveShadow = false; mesh.add(roof);
+                        break;
+                    case "Fence Post": // Keep original simple fence post
+                        geometry = new THREE.BoxGeometry(0.2, 1.5, 0.2); material = wood;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.75; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    // --- New Primitives ---
+                    case "Pine Tree": // Example: Cone for canopy
+                        mesh = new THREE.Group();
+                        geometry = new THREE.CylinderGeometry(0.2, 0.3, 2.5, 8); material = wood;
+                        const pineTrunk = new THREE.Mesh(geometry, material); pineTrunk.position.y = 1.25; pineTrunk.castShadow=true; pineTrunk.receiveShadow=true; mesh.add(pineTrunk);
+                        geometry = new THREE.ConeGeometry(1, 2.5, 8); material = leaf;
+                        const pineCanopy = new THREE.Mesh(geometry, material); pineCanopy.position.y = 2.5 + (2.5/2) - 0.5; pineCanopy.castShadow=true; pineCanopy.receiveShadow=false; mesh.add(pineCanopy);
+                        break;
+                    case "Brick Wall": // Simple box with brick color
+                        geometry = new THREE.BoxGeometry(3, 2, 0.3); material = brick;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 1; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Sphere":
+                        geometry = new THREE.SphereGeometry(0.8, 16, 12); material = metal;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.8; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cube": // Simple cube
+                        geometry = new THREE.BoxGeometry(1, 1, 1); material = stone; // Re-use stone
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.5; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cylinder":
+                        geometry = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 16); material = metal;
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.75; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Cone":
+                        geometry = new THREE.ConeGeometry(0.6, 1.2, 16); material = house_roof; // Re-use roof
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.6; mesh.castShadow = true; mesh.receiveShadow = true;
+                        break;
+                    case "Torus": // Donut shape
+                        geometry = new THREE.TorusGeometry(0.6, 0.2, 8, 24); material = gem; // Use gem material
+                        mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.7; mesh.castShadow = true; mesh.receiveShadow = true;
+                         mesh.rotation.x = Math.PI / 2; // Stand it up
+                        break;
+                    case "Mushroom":
+                         mesh = new THREE.Group();
+                         geometry = new THREE.CylinderGeometry(0.15, 0.1, 0.6, 8); material = house_wall; // Cream stem
+                         const stem = new THREE.Mesh(geometry, material); stem.position.y = 0.3; stem.castShadow = true; stem.receiveShadow = true; mesh.add(stem);
+                         geometry = new THREE.SphereGeometry(0.4, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2); material = house_roof; // Red cap
+                         const cap = new THREE.Mesh(geometry, material); cap.position.y = 0.6; cap.castShadow = true; cap.receiveShadow = false; mesh.add(cap);
+                         break;
+                    case "Cactus": // Simple segmented cactus
+                        mesh = new THREE.Group(); material = leaf; // Green material
+                        geometry = new THREE.CylinderGeometry(0.3, 0.3, 1.5, 8);
+                        const main = new THREE.Mesh(geometry, material); main.position.y = 0.75; main.castShadow = true; main.receiveShadow = true; mesh.add(main);
+                        geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.8, 8);
+                        const arm1 = new THREE.Mesh(geometry, material); arm1.position.set(0.3, 1, 0); arm1.rotation.z = Math.PI / 4; arm1.castShadow = true; arm1.receiveShadow = true; mesh.add(arm1);
+                        const arm2 = new THREE.Mesh(geometry, material); arm2.position.set(-0.3, 0.8, 0); arm2.rotation.z = -Math.PI / 4; arm2.castShadow = true; arm2.receiveShadow = true; mesh.add(arm2);
+                        break;
+                    case "Campfire":
+                         mesh = new THREE.Group();
+                         material = wood; geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.8, 5);
+                         const log1 = new THREE.Mesh(geometry, material); log1.rotation.x = Math.PI/2; log1.position.set(0, 0.1, 0.2); mesh.add(log1);
+                         const log2 = new THREE.Mesh(geometry, material); log2.rotation.set(Math.PI/2, 0, Math.PI/3); log2.position.set(0.2*Math.cos(Math.PI/6), 0.1, -0.2*Math.sin(Math.PI/6)); mesh.add(log2);
+                         const log3 = new THREE.Mesh(geometry, material); log3.rotation.set(Math.PI/2, 0, -Math.PI/3); log3.position.set(-0.2*Math.cos(Math.PI/6), 0.1, -0.2*Math.sin(Math.PI/6)); mesh.add(log3);
+                         material2 = lightMat; geometry = new THREE.ConeGeometry(0.2, 0.5, 8); // Simple flame
+                         const flame = new THREE.Mesh(geometry, material2); flame.position.y = 0.35; mesh.add(flame);
+                         // Add shadows later if needed
+                         break;
+                    case "Star":
+                         geometry = new THREE.SphereGeometry(0.5, 4, 2); // Low poly sphere looks star-like
+                         material = lightMat;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 1;
+                         break;
+                    case "Gem":
+                         geometry = new THREE.OctahedronGeometry(0.6, 0); material = gem;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.6; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                    case "Tower": // Simple cylinder tower
+                         geometry = new THREE.CylinderGeometry(1, 1.2, 5, 8); material = stone;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 2.5; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                    case "Barrier": // Simple box barrier
+                         geometry = new THREE.BoxGeometry(2, 0.5, 0.5); material = metal;
+                         mesh = new THREE.Mesh(geometry, material); mesh.position.y = 0.25; mesh.castShadow = true; mesh.receiveShadow = true;
+                         break;
+                     case "Fountain": // Placeholder: Tiered cylinders
+                          mesh = new THREE.Group(); material = stone;
+                          geometry = new THREE.CylinderGeometry(1.5, 1.5, 0.3, 16);
+                          const baseF = new THREE.Mesh(geometry, material); baseF.position.y = 0.15; mesh.add(baseF);
+                          geometry = new THREE.CylinderGeometry(0.8, 0.8, 0.5, 16);
+                          const midF = new THREE.Mesh(geometry, material); midF.position.y = 0.3+0.25; mesh.add(midF);
+                           geometry = new THREE.CylinderGeometry(0.4, 0.4, 0.7, 16);
+                          const topF = new THREE.Mesh(geometry, material); topF.position.y = 0.8+0.35; mesh.add(topF);
+                          mesh.castShadow = true; mesh.receiveShadow = true; // Apply to group?
+                          break;
+                     case "Lantern":
+                          mesh = new THREE.Group(); material = metal;
+                          geometry = new THREE.BoxGeometry(0.4, 0.6, 0.4);
+                          const bodyL = new THREE.Mesh(geometry, material); bodyL.position.y = 0.3; mesh.add(bodyL);
+                           geometry = new THREE.SphereGeometry(0.15); material2 = lightMat;
+                          const lightL = new THREE.Mesh(geometry, material2); lightL.position.y = 0.3; mesh.add(lightL);
+                           mesh.castShadow = true; // Group casts shadow?
+                           break;
+                     case "Sign Post":
+                           mesh = new THREE.Group(); material = wood;
+                           geometry = new THREE.CylinderGeometry(0.05, 0.05, 1.8, 8);
+                           const postS = new THREE.Mesh(geometry, material); postS.position.y = 0.9; mesh.add(postS);
+                           geometry = new THREE.BoxGeometry(0.8, 0.4, 0.05);
+                           const signS = new THREE.Mesh(geometry, material); signS.position.y = 1.5; mesh.add(signS);
+                           mesh.castShadow = true; mesh.receiveShadow = true;
+                           break;
+                    default:
+                        console.warn("Unknown primitive type for mesh creation:", type);
+                        return null; // Return null if type not found
+                }
+            } catch (e) {
+                console.error(`Error creating geometry/mesh for type ${type}:`, e);
+                return null;
+            }
+            // Common post-creation steps (if mesh created)
+            if (mesh) {
+                // Set default userData structure (will be overwritten by createAndPlaceObject)
+                mesh.userData = { type: type };
+                // Ensure position is defaulted reasonably if created standalone
+                if (!mesh.position.y && mesh.geometry) {
+                     mesh.geometry.computeBoundingBox();
+                     mesh.position.y = (mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y) / 2;
+                }
+            }
+            return mesh;
         }
+        // --- Event Handlers ---
+        function onMouseMove(event) { /* ... (Keep as before) ... */
+             mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
+        function onDocumentClick(event) {
+            if (selectedObjectType === "None" || !selectedObjectType) return;
+            const groundCandidates = Object.values(groundMeshes);
+            if (groundCandidates.length === 0) return;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(groundCandidates);
+            if (intersects.length > 0) {
+                const intersectPoint = intersects[0].point;
+                // Prepare object data for the server
+                const newObjData = {
+                    obj_id: THREE.MathUtils.generateUUID(), // Generate unique ID client-side
+                    type: selectedObjectType,
+                    position: { x: intersectPoint.x, y: 0, z: intersectPoint.z }, // Base position on ground
+                    rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' } // Random Y rotation
+                };
+                // Adjust Y position based on object type AFTER getting the type
+                // This should ideally use the geometry's bounding box, but hardcoding for now
+                const tempMesh = createPrimitiveMesh(selectedObjectType); // Create temporarily to get height? Costly.
+                if (tempMesh && tempMesh.geometry) {
+                    tempMesh.geometry.computeBoundingBox();
+                    const height = tempMesh.geometry.boundingBox.max.y - tempMesh.geometry.boundingBox.min.y;
+                    // Assume origin is at the center Y for most default geometries
+                    newObjData.position.y = (height / 2) + intersectPoint.y + 0.01; // Place base slightly above ground
+                } else {
+                     // Fallback if mesh creation failed or no geometry
+                     newObjData.position.y = 0.5 + intersectPoint.y; // Default lift
+                }
+                console.log(`Placing ${selectedObjectType} (${newObjData.obj_id}) at`, newObjData.position);
+                // 1. Add object visually immediately (Optimistic Update)
+                createAndPlaceObject(newObjData, true); // Mark as locally placed initially? Not needed now.
+                // 2. Send placement message to server via WebSocket
+                sendWebSocketMessage("place_object", {
+                     username: myUsername,
+                     object_data: newObjData
+                 });
+                // 3. No need for local saving (sessionStorage) anymore
             }
         }
+        function onKeyDown(event) { /* ... (Keep as before) ... */ keysPressed[event.code] = true; }
+        function onKeyUp(event) { /* ... (Keep as before) ... */ keysPressed[event.code] = false; }
+        function onWindowResize() { /* ... (Keep as before) ... */ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
+        // --- Functions called by Python ---
+        function teleportPlayer(targetX, targetZ) { /* ... (Keep as before) ... */
+             console.log(`JS teleportPlayer called: x=${targetX}, z=${targetZ}`); if (playerMesh) { playerMesh.position.x = targetX; playerMesh.position.z = targetZ; const offset = new THREE.Vector3(0, 15, 20); const targetPosition = playerMesh.position.clone().add(offset); camera.position.copy(targetPosition); camera.lookAt(playerMesh.position); console.log("Player teleported to:", playerMesh.position); } else { console.error("Player mesh not found for teleport."); }
+        }
+        function updateSelectedObjectType(newType) { // Renamed from previous attempt
+             console.log("JS updateSelectedObjectType received:", newType);
+             selectedObjectType = newType;
+             // Optionally provide visual feedback (e.g., change cursor)
         }
+        // --- Animation Loop & Helpers ---
+        function updatePlayerMovement() { /* ... (Keep as before, includes checkAndExpandGroundVisuals) ... */
+             if (!playerMesh) return; const moveDirection = new THREE.Vector3(0, 0, 0); if (keysPressed['KeyW'] || keysPressed['ArrowUp']) moveDirection.z -= 1; if (keysPressed['KeyS'] || keysPressed['ArrowDown']) moveDirection.z += 1; if (keysPressed['KeyA'] || keysPressed['ArrowLeft']) moveDirection.x -= 1; if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
+             if (moveDirection.lengthSq() > 0) { const forward = new THREE.Vector3(); camera.getWorldDirection(forward); forward.y = 0; forward.normalize(); const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize(); const worldMove = new THREE.Vector3(); worldMove.add(forward.multiplyScalar(-moveDirection.z)); worldMove.add(right.multiplyScalar(-moveDirection.x)); worldMove.normalize().multiplyScalar(playerSpeed); playerMesh.position.add(worldMove); playerMesh.position.y = Math.max(playerMesh.position.y, 0.8); checkAndExpandGroundVisuals(); }
+        }
+        function checkAndExpandGroundVisuals() { /* ... (Keep as before) ... */
+             if (!playerMesh) return; const currentGridX = Math.floor(playerMesh.position.x / plotWidth); const currentGridZ = Math.floor(playerMesh.position.z / plotDepth); const viewDistanceGrids = 3; // Expand further?
+             for (let dx = -viewDistanceGrids; dx <= viewDistanceGrids; dx++) { for (let dz = -viewDistanceGrids; dz <= viewDistanceGrids; dz++) { const checkX = currentGridX + dx; const checkZ = currentGridZ + dz; const gridKey = `${checkX}_${checkZ}`; if (!groundMeshes[gridKey]) { createGroundPlane(checkX, checkZ, true); } } }
+        }
+        function updateCamera() { /* ... (Keep as before) ... */
+             if (!playerMesh) return; const offset = new THREE.Vector3(0, 12, 18); const targetPosition = playerMesh.position.clone().add(offset); camera.position.lerp(targetPosition, 0.08); const lookAtTarget = playerMesh.position.clone().add(new THREE.Vector3(0, 0.5, 0)); camera.lookAt(lookAtTarget);
         }
         function animate() {
             requestAnimationFrame(animate);
+            updatePlayerMovement();
             updateCamera();
             renderer.render(scene, camera);
         }