Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 26

Commit

d23d185

verified ·

1 Parent(s): 37a085b

Update index.html

Browse files

Files changed (1) hide show

index.html +371 -473

index.html CHANGED Viewed

@@ -1,17 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shared World Builder</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
-        #info { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.7); padding: 10px; }
     </style>
-</head>
 <body>
-    <div id="info">Click to place selected object or move player, right-click to delete.</div>
     <script type="importmap">
         {
             "imports": {
@@ -24,21 +20,31 @@
     <script type="module">
         import * as THREE from 'three';
-        let scene, camera, renderer;
         let raycaster, mouse;
-        let worldObjects = new Map();
-        let groundMeshes = {};
-        // Access State from Streamlit
         const myUsername = window.USERNAME || `User_${Math.random().toString(36).substring(2, 6)}`;
-        let selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
-        const worldState = window.WORLD_STATE || { objects: {}, players: {}, action_history: [], selected_object: "None" };
-        // 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 });
         const objectMaterials = {
             'wood': new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9 }),
             'leaf': new THREE.MeshStandardMaterial({ color: 0x228B22, roughness: 0.8 }),
@@ -48,27 +54,25 @@
             '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 })
         };
-        const VALID_OBJECT_TYPES = [
-            "Tree", "Rock", "Simple House", "Pine Tree", "Brick Wall", "Sphere", "Cube",
-            "Cylinder", "Cone", "Torus", "Mushroom", "Cactus", "Campfire", "Star", "Gem",
-            "Tower", "Barrier", "Fountain", "Lantern", "Sign Post"
-        ];
         function init() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0xabcdef);
             const aspect = window.innerWidth / window.innerHeight;
-            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 5000);
             camera.position.set(plotWidth / 2, 15, plotDepth / 2 + 20);
             camera.lookAt(plotWidth/2, 0, plotDepth/2);
             scene.add(camera);
             setupLighting();
-            createGroundPlane(0, 0, false);
             raycaster = new THREE.Raycaster();
             mouse = new THREE.Vector2();
@@ -79,169 +83,212 @@
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
             document.addEventListener('mousemove', onMouseMove, false);
-            document.addEventListener('click', onDocumentClick, false);
-            document.addEventListener('contextmenu', onRightClick, false);
             window.addEventListener('resize', onWindowResize, false);
-            window.updateSelectedObjectType = updateSelectedObjectType;
-            // Initialize scene with world state
-            loadWorldState();
-            console.log(`Three.js Initialized for user: ${myUsername}`);
             animate();
         }
-        function setupLighting() {
-            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 createGroundPlane(gridX, gridZ, isPlaceholder) {
-            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;
-            groundMesh.name = 'ground';
-            scene.add(groundMesh);
-            groundMeshes[gridKey] = groundMesh;
-            return groundMesh;
         }
-        function loadWorldState() {
-            clearWorldObjects();
-            const objects = worldState.objects || {};
-            console.log(`Loading ${Object.keys(objects).length} objects from WORLD_STATE`);
-            for (const obj_id in objects) {
-                const objData = objects[obj_id];
-                if (!objData || !objData.obj_id || !objData.type || !VALID_OBJECT_TYPES.includes(objData.type) || !objData.position) {
-                    console.warn(`Skipping invalid object: ${obj_id}`, objData);
-                    continue;
-                }
-                const mesh = createAndPlaceObject(objData, false);
-                if (!mesh) {
-                    console.warn(`Failed to create mesh for object: ${obj_id}`, objData);
-                }
-            }
-            const players = worldState.players || {};
-            console.log(`Loading ${Object.keys(players).length} players from WORLD_STATE`);
-            for (const username in players) {
-                const pos = players[username].position;
-                if (pos && typeof pos.x === 'number' && typeof pos.y === 'number' && typeof pos.z === 'number') {
-                    createPlayerMarker(username, pos);
-                } else {
-                    console.warn(`Invalid player position for ${username}:`, pos);
-                }
             }
-            selectedObjectType = worldState.selected_object || "None";
-            console.log(`Loaded selected tool: ${selectedObjectType}`);
-            const actionHistory = worldState.action_history || [];
-            console.log(`Loaded ${actionHistory.length} action history entries`);
         }
         function clearWorldObjects() {
-            console.log("Clearing existing world objects...");
-            for (const [obj_id, mesh] of worldObjects.entries()) {
-                scene.remove(mesh);
-            }
-            worldObjects.clear();
-            scene.children.forEach(child => {
-                if (child.userData.isPlayerMarker) {
-                    scene.remove(child);
-                }
-            });
         }
-        function createPlayerMarker(username, position) {
-            const geometry = new THREE.SphereGeometry(0.3, 8, 8);
-            const material = new THREE.MeshBasicMaterial({ color: username === myUsername ? 0x0000ff : 0xff0000 });
-            const marker = new THREE.Mesh(geometry, material);
-            marker.position.set(position.x, position.y + 0.5, position.z);
-            marker.userData.isPlayerMarker = true;
-            marker.userData.username = username;
-            scene.add(marker);
-            console.log(`Created player marker for ${username} at`, position);
         }
-        function createAndPlaceObject(objData, isNewlyPlacedLocally) {
-            if (!objData || !objData.obj_id || !objData.type || !objData.position) {
                 console.warn("Invalid object data:", objData);
                 return null;
             }
             let mesh = worldObjects.get(objData.obj_id);
             let isNew = false;
             if (mesh) {
-                if (mesh.position.distanceToSquared(new THREE.Vector3(objData.position.x, objData.position.y, objData.position.z)) > 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)) > 0.01 ||
-                    Math.abs(mesh.rotation.y - (objData.rotation._y || 0)) > 0.01 ||
-                    Math.abs(mesh.rotation.z - (objData.rotation._z || 0)) > 0.01 )) {
-                    mesh.rotation.set(
-                        objData.rotation._x || 0,
-                        objData.rotation._y || 0,
-                        objData.rotation._z || 0,
-                        objData.rotation._order || 'XYZ'
-                    );
-                }
             } else {
-                mesh = createPrimitiveMesh(objData.type);
-                if (!mesh) return null;
-                isNew = true;
-                mesh.userData.obj_id = objData.obj_id;
-                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 || 0,
-                        objData.rotation._y || 0,
-                        objData.rotation._z || 0,
-                        objData.rotation._order || 'XYZ'
-                    );
-                }
-                scene.add(mesh);
-                worldObjects.set(objData.obj_id, mesh);
-                console.log(`Created new object ${objData.obj_id} (${objData.type}) at`, objData.position);
             }
             return mesh;
         }
         function createPrimitiveMesh(type) {
-            if (!VALID_OBJECT_TYPES.includes(type)) {
-                console.warn(`Invalid object type for mesh creation: ${type}`);
-                return null;
-            }
             let mesh = null;
-            let geometry, material, material2;
             const wood = objectMaterials.wood;
             const leaf = objectMaterials.leaf;
             const stone = objectMaterials.stone;
@@ -252,280 +299,168 @@
             const gem = objectMaterials.gem;
             const lightMat = objectMaterials.light;
-            try {
                 switch(type) {
                     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;
-                        mesh = new THREE.Mesh(geometry, material);
-                        mesh.castShadow = true;
-                        mesh.receiveShadow = true;
-                        mesh.scale.set(1, Math.random()*0.4 + 0.8, 1);
                         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 "Pine Tree":
                         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":
-                        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":
-                        geometry = new THREE.BoxGeometry(1, 1, 1);
-                        material = 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;
-                        mesh = new THREE.Mesh(geometry, material);
-                        mesh.position.y = 0.6;
-                        mesh.castShadow = true;
-                        mesh.receiveShadow = true;
                         break;
-                    case "Torus":
-                        geometry = new THREE.TorusGeometry(0.6, 0.2, 8, 24);
-                        material = gem;
-                        mesh = new THREE.Mesh(geometry, material);
-                        mesh.position.y = 0.7;
-                        mesh.castShadow = true;
-                        mesh.receiveShadow = true;
-                        mesh.rotation.x = Math.PI / 2;
                         break;
                     case "Mushroom":
-                        mesh = new THREE.Group();
-                        geometry = new THREE.CylinderGeometry(0.15, 0.1, 0.6, 8);
-                        material = house_wall;
-                        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;
-                        const cap = new THREE.Mesh(geometry, material);
-                        cap.position.y = 0.6;
-                        cap.castShadow = true;
-                        cap.receiveShadow = false;
-                        mesh.add(cap);
-                        break;
-                    case "Cactus":
-                        mesh = new THREE.Group();
-                        material = leaf;
                         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);
-                        const flame = new THREE.Mesh(geometry, material2);
-                        flame.position.y = 0.35;
-                        mesh.add(flame);
-                        break;
                     case "Star":
-                        geometry = new THREE.SphereGeometry(0.5, 4, 2);
-                        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":
-                        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":
-                        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":
-                        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;
-                        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;
-                        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("Unexpected object type:", type);
-                        return null;
                 }
             } catch (e) {
                 console.error(`Error creating geometry/mesh for type ${type}:`, e);
                 return null;
             }
             if (mesh) {
                 mesh.userData = { type: type };
                 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;
         }
-        function onMouseMove(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         }
         function onDocumentClick(event) {
             const groundCandidates = Object.values(groundMeshes);
             if (groundCandidates.length === 0) return;
@@ -535,116 +470,79 @@
             if (intersects.length > 0) {
                 const intersectPoint = intersects[0].point;
-                if (selectedObjectType !== "None" && selectedObjectType) {
-                    // Place object
-                    const newObjData = {
-                        obj_id: THREE.MathUtils.generateUUID(),
-                        type: selectedObjectType,
-                        position: { x: intersectPoint.x, y: 0, z: intersectPoint.z },
-                        rotation: { _x: 0, _y: Math.random() * Math.PI * 2, _z: 0, _order: 'XYZ' }
-                    };
-                    const tempMesh = createPrimitiveMesh(selectedObjectType);
-                    if (tempMesh && tempMesh.geometry) {
-                        tempMesh.geometry.computeBoundingBox();
-                        const height = tempMesh.geometry.boundingBox.max.y - tempMesh.geometry.boundingBox.min.y;
-                        newObjData.position.y = (height / 2) + intersectPoint.y + 0.01;
-                    } else {
-                        newObjData.position.y = 0.5 + intersectPoint.y;
-                    }
-                    console.log(`Placing ${selectedObjectType} (${newObjData.obj_id}) at`, newObjData.position);
-                    const mesh = createAndPlaceObject(newObjData, true);
-                    if (mesh) {
-                        window.parent.postMessage({
-                            type: 'place_object',
-                            payload: { username: myUsername, object_data: newObjData }
-                        }, '*');
-                    }
                 } else {
-                    // Move player
-                    const newPosition = {
-                        x: intersectPoint.x,
-                        y: 0.5,
-                        z: intersectPoint.z
-                    };
-                    console.log(`Moving player ${myUsername} to`, newPosition);
-                    window.parent.postMessage({
-                        type: 'move_player',
-                        payload: { username: myUsername, position: newPosition }
-                    }, '*');
                 }
-            }
-        }
-        function onRightClick(event) {
-            event.preventDefault();
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(Array.from(worldObjects.values()));
-            if (intersects.length > 0) {
-                const obj_id = intersects[0].object.userData.obj_id;
-                console.log(`Deleting object ${obj_id}`);
-                removeObjectById(obj_id);
-                window.parent.postMessage({
-                    type: 'delete_object',
-                    payload: { username: myUsername, obj_id: obj_id }
-                }, '*');
-            }
-        }
-        function removeObjectById(obj_id) {
-            if (worldObjects.has(obj_id)) {
-                const mesh = worldObjects.get(obj_id);
-                scene.remove(mesh);
-                worldObjects.delete(obj_id);
-                console.log(`Removed object ${obj_id} from scene.`);
-            } else {
-                console.warn(`Attempted to remove non-existent object ID: ${obj_id}`);
             }
         }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         }
-        function updateSelectedObjectType(newType) {
-            console.log("JS updateSelectedObjectType received:", newType);
-            selectedObjectType = newType;
-            window.parent.postMessage({
-                type: 'tool_change',
-                payload: { username: myUsername, tool: newType }
-            }, '*');
         }
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }
-        // Listen for messages from Streamlit
-        window.addEventListener('message', (event) => {
-            const data = event.data;
-            if (data.type === 'place_object') {
-                const mesh = createAndPlaceObject(data.payload.object_data, false);
-                if (!mesh) {
-                    console.warn(`Failed to place object from message:`, data.payload.object_data);
-                }
-            } else if (data.type === 'delete_object') {
-                removeObjectById(data.payload.obj_id);
-            } else if (data.type === 'move_player') {
-                const username = data.payload.username;
-                const position = data.payload.position;
-                scene.children.forEach(child => {
-                    if (child.userData.isPlayerMarker && child.userData.username === username) {
-                        child.position.set(position.x, position.y + 0.5, position.z);
-                        console.log(`Updated player marker for ${username} to`, position);
-                    }
-                });
-            } else if (data.type === 'tool_change') {
-                selectedObjectType = data.payload.tool;
-                console.log(`Updated selected tool from message:

 <!DOCTYPE html>
 <html>
 <head>
     <title>Shared World Builder</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     </style>
+    </head>
 <body>
     <script type="importmap">
         {
             "imports": {
     <script type="module">
         import * as THREE from 'three';
+        let scene, camera, renderer, playerMesh;
         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 }),
             '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 = new THREE.Scene();
             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();
             mouse = new THREE.Vector2();
             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 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;
             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);
         }
+        // --- Start ---
+        init();
+    </script>
+</body>
+</html>