3DWorldBuilder

Running

App Files Files Community

awacke1 commited on 28 days ago

Commit

0c62314

verified ·

1 Parent(s): 9f9622d

Update index.html

Browse files

Files changed (1) hide show

index.html +1487 -238

index.html CHANGED Viewed

@@ -1,10 +1,1313 @@
-<!DOCTYPE html>
 <html>
 <head>
     <title>Three.js Infinite World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     </style>
     <!-- New: Polling function for game state -->
     <script>
@@ -17,6 +1320,10 @@
     </script>
 </head>
 <body>
     <script type="importmap">
         {
             "imports": {
@@ -44,15 +1351,81 @@
         const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
         const plotsMetadata = window.PLOTS_METADATA || [];
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
-        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
-        });
         function init() {
             scene = new THREE.Scene();
@@ -89,6 +1462,7 @@
             // Define functions callable by Streamlit
             window.teleportPlayer = teleportPlayer;
             window.getSaveDataAndPosition = getSaveDataAndPosition;
             window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
             console.log("Three.js Initialized. World ready.");
@@ -128,7 +1502,7 @@
             if (groundMeshes[gridKey]) return;
             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;
@@ -157,34 +1531,6 @@
             console.log("Finished loading initial objects.");
         }
-        function createAndPlaceObject(objData, isNewObject) {
-            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() {
             try {
                 const stateToSave = newlyPlacedObjects.map(obj => ({
@@ -233,209 +1579,112 @@
             return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
         }
-        function createSimpleHouse() {
-            const base = createObjectBase("Simple House");
-            const group = new THREE.Group();
-            Object.assign(group, base);
-            const mat1 = new THREE.MeshStandardMaterial({color:0xffccaa, roughness:0.8});
-            const 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() {
-            const base = createObjectBase("Tree");
-            const group = new THREE.Group();
-            Object.assign(group, base);
-            const mat1 = new THREE.MeshStandardMaterial({color:0x8B4513, roughness:0.9});
-            const 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() {
-            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() {
-            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;
-        }
-        function onMouseMove(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        }
-        function onDocumentClick(event) {
-            if (selectedObjectType === "None") 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;
-                let newObjectToPlace = null;
-                switch (selectedObjectType) {
-                    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);
-                    newObjectToPlace.position.y += 0.01;
-                    scene.add(newObjectToPlace);
-                    newlyPlacedObjects.push(newObjectToPlace);
-                    saveUnsavedState();
-                    console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
                 }
-            }
-        }
-        function onKeyDown(event) { keysPressed[event.code] = true; }
-        function onKeyUp(event) { keysPressed[event.code] = false; }
-        function teleportPlayer(targetX, targetZ) {
-            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${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 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 {
-                    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);
-        }
-        function resetNewlyPlacedObjects() {
-            console.log(`JS resetNewlyPlacedObjects called.`);
-            clearUnsavedState();
-        }
-        function updatePlayerMovement() {
-            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) {
-                moveDirection.normalize().multiplyScalar(playerSpeed);
-                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.4 + 0.8/2);
-                checkAndExpandGround();
-            }
-        }
-        function checkAndExpandGround() {
-            if (!playerMesh) return;
-            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
-            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
-            for (let dx = -1; dx <= 1; dx++) {
-                for (let dz = -1; dz <= 1; dz++) {
-                    if (dx === 0 && dz === 0) continue;
-                    const checkX = currentGridX + dx;
-                    const checkZ = currentGridZ + dz;
-                    const gridKey = `${checkX}_${checkZ}`;
-                    if (!groundMeshes[gridKey]) {
-                        const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
-                        if (!isSavedPlot) {
-                            createGroundPlane(checkX, checkZ, true);
-                        }
-                    }
                 }
             }
-        }
-        function updateCamera() {
-            if (!playerMesh) return;
-            const offset = new THREE.Vector3(0, 15, 20);
-            const targetPosition = playerMesh.position.clone().add(offset);
-            camera.position.lerp(targetPosition, 0.08);
-            camera.lookAt(playerMesh.position);
-        }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            updatePlayerMovement();
-            updateCamera();
-            renderer.render(scene, camera);
-        }
-        init();
-    </script>
-</body>
-</html>

+const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
+            const innerFlameMat = new THREE.MeshStandardMaterial({
+                color: 0xFFFF00,
+                roughness: 0.2,
+                metalness: 0.0,
+                emissive: 0xFFFF00,
+                emissiveIntensity: 1.0
+            });
+            const innerFlame = new THREE.Mesh(innerFlameGeo, innerFlameMat);
+            innerFlame.position.set(0, 0.04, 0);
+            flame.add(innerFlame);
+            group.position.y = 1.5; // Mount height
+            return group;
+        }
+        function createBonePile() {
+            const base = createObjectBase("Bone Pile");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Create various bones
+            for (let i = 0; i < 8; i++) {
+                let bone;
+                // Choose bone type
+                const boneType = Math.floor(Math.random() * 3);
+                if (boneType === 0) { // Long bone
+                    const boneGeo = new THREE.CylinderGeometry(0.06, 0.08, 0.5 + Math.random() * 0.3, 8);
+                    bone = new THREE.Mesh(boneGeo, materials.bone);
+                } else if (boneType === 1) { // Skull-like
+                    const boneGeo = new THREE.SphereGeometry(0.15 + Math.random() * 0.1, 8, 8);
+                    bone = new THREE.Mesh(boneGeo, materials.bone);
+                } else { // Smaller bone fragment
+                    const boneGeo = new THREE.BoxGeometry(
+                        0.1 + Math.random() * 0.1,
+                        0.05 + Math.random() * 0.05,
+                        0.2 + Math.random() * 0.1
+                    );
+                    bone = new THREE.Mesh(boneGeo, materials.bone);
+                }
+                // Position randomly within a circle
+                const angle = Math.random() * Math.PI * 2;
+                const distance = Math.random() * 0.6;
+                bone.position.set(
+                    Math.sin(angle) * distance,
+                    Math.random() * 0.2,
+                    Math.cos(angle) * distance
+                );
+                // Random rotation
+                bone.rotation.set(
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI
+                );
+                bone.castShadow = true;
+                bone.receiveShadow = true;
+                group.add(bone);
+            }
+            // Add a skull as centerpiece
+            const skullGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            const skull = new THREE.Mesh(skullGeo, materials.bone);
+            skull.scale.set(1, 0.8, 1.2);
+            skull.position.set(0, 0.15, 0);
+            skull.rotation.x = Math.PI/6;
+            skull.castShadow = true;
+            skull.receiveShadow = true;
+            group.add(skull);
+            // Eye sockets
+            const socketGeo = new THREE.SphereGeometry(0.06, 8, 8);
+            const blackMat = new THREE.MeshBasicMaterial({color: 0x000000});
+            const leftEye = new THREE.Mesh(socketGeo, blackMat);
+            leftEye.position.set(-0.07, 0.05, 0.15);
+            skull.add(leftEye);
+            const rightEye = new THREE.Mesh(socketGeo, blackMat);
+            rightEye.position.set(0.07, 0.05, 0.15);
+            skull.add(rightEye);
+            group.position.y = 0.05; // Slightly above ground
+            return group;
+        }
+        // =================== CHARACTERS CATEGORY ===================
+        function createKingFigure() {
+            const base = createObjectBase("King Figure");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Body
+            const bodyGeo = new THREE.CylinderGeometry(0.35, 0.25, 1.2, 8);
+            const body = new THREE.Mesh(bodyGeo, materials.cloth);
+            body.position.y = 0.6;
+            body.castShadow = true;
+            body.receiveShadow = true;
+            group.add(body);
+            // Head
+            const headGeo = new THREE.SphereGeometry(0.25, 8, 8);
+            const head = new THREE.Mesh(headGeo, materials.skin);
+            head.position.y = 1.35;
+            head.castShadow = true;
+            head.receiveShadow = true;
+            group.add(head);
+            // Crown
+            const crownBaseGeo = new THREE.CylinderGeometry(0.28, 0.28, 0.15, 8);
+            const crownBase = new THREE.Mesh(crownBaseGeo, materials.goldMetal);
+            crownBase.position.y = 1.5;
+            crownBase.castShadow = true;
+            crownBase.receiveShadow = true;
+            group.add(crownBase);
+            // Crown spikes
+            for (let i = 0; i < 4; i++) {
+                const spikeGeo = new THREE.ConeGeometry(0.06, 0.15, 4);
+                const spike = new THREE.Mesh(spikeGeo, materials.goldMetal);
+                const angle = i * Math.PI / 2;
+                spike.position.set(
+                    Math.sin(angle) * 0.2,
+                    1.65,
+                    Math.cos(angle) * 0.2
+                );
+                spike.castShadow = true;
+                spike.receiveShadow = true;
+                group.add(spike);
+            }
+            // Arms
+            const armGeo = new THREE.CylinderGeometry(0.08, 0.08, 0.6, 8);
+            const leftArm = new THREE.Mesh(armGeo, materials.cloth);
+            leftArm.position.set(-0.4, 0.9, 0);
+            leftArm.rotation.z = Math.PI / 4;
+            leftArm.castShadow = true;
+            leftArm.receiveShadow = true;
+            group.add(leftArm);
+            const rightArm = new THREE.Mesh(armGeo, materials.cloth);
+            rightArm.position.set(0.4, 0.9, 0);
+            rightArm.rotation.z = -Math.PI / 4;
+            rightArm.castShadow = true;
+            rightArm.receiveShadow = true;
+            group.add(rightArm);
+            // Cape
+            const capeGeo = new THREE.BoxGeometry(0.7, 1, 0.1);
+            const cape = new THREE.Mesh(capeGeo, new THREE.MeshStandardMaterial({
+                color: 0x880000,
+                roughness: 0.8
+            }));
+            cape.position.set(0, 0.7, -0.2);
+            cape.castShadow = true;
+            cape.receiveShadow = true;
+            group.add(cape);
+            // Scepter
+            const scepterGeo = new THREE.CylinderGeometry(0.03, 0.05, 0.8, 8);
+            const scepter = new THREE.Mesh(scepterGeo, materials.goldMetal);
+            scepter.position.set(0.65, 0.9, 0);
+            scepter.rotation.z = -Math.PI / 4;
+            scepter.castShadow = true;
+            scepter.receiveShadow = true;
+            group.add(scepter);
+            // Scepter orb
+            const orbGeo = new THREE.SphereGeometry(0.08, 8, 8);
+            const orb = new THREE.Mesh(orbGeo, materials.goldMetal);
+            orb.position.set(0, 0.45, 0);
+            orb.castShadow = true;
+            orb.receiveShadow = true;
+            scepter.add(orb);
+            return group;
+        }
+        function createSoldierFigure() {
+            const base = createObjectBase("Soldier Figure");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Body with armor
+            const bodyGeo = new THREE.CylinderGeometry(0.3, 0.25, 1, 8);
+            const body = new THREE.Mesh(bodyGeo, materials.metal);
+            body.position.y = 0.5;
+            body.castShadow = true;
+            body.receiveShadow = true;
+            group.add(body);
+            // Head
+            const headGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            const head = new THREE.Mesh(headGeo, materials.skin);
+            head.position.y = 1.1;
+            head.castShadow = true;
+            head.receiveShadow = true;
+            group.add(head);
+            // Helmet
+            const helmetGeo = new THREE.CylinderGeometry(0.22, 0.22, 0.2, 8);
+            const helmet = new THREE.Mesh(helmetGeo, materials.metal);
+            helmet.position.y = 1.2;
+            helmet.castShadow = true;
+            helmet.receiveShadow = true;
+            group.add(helmet);
+            const helmetTopGeo = new THREE.SphereGeometry(0.22, 8, 8);
+            const helmetTop = new THREE.Mesh(helmetTopGeo, materials.metal);
+            helmetTop.position.y = 1.3;
+            helmetTop.scale.y = 0.5;
+            helmetTop.castShadow = true;
+            helmetTop.receiveShadow = true;
+            group.add(helmetTop);
+            // Arms
+            const armGeo = new THREE.CylinderGeometry(0.07, 0.07, 0.5, 8);
+            const leftArm = new THREE.Mesh(armGeo, materials.metal);
+            leftArm.position.set(-0.3, 0.7, 0);
+            leftArm.rotation.z = Math.PI / 6;
+            leftArm.castShadow = true;
+            leftArm.receiveShadow = true;
+            group.add(leftArm);
+            const rightArm = new THREE.Mesh(armGeo, materials.metal);
+            rightArm.position.set(0.3, 0.7, 0);
+            rightArm.rotation.z = -Math.PI / 6;
+            rightArm.castShadow = true;
+            rightArm.receiveShadow = true;
+            group.add(rightArm);
+            // Shield
+            const shieldGeo = new THREE.BoxGeometry(0.4, 0.6, 0.1);
+            const shield = new THREE.Mesh(shieldGeo, materials.metal);
+            shield.position.set(-0.45, 0.6, 0.1);
+            shield.rotation.y = Math.PI / 10;
+            shield.castShadow = true;
+            shield.receiveShadow = true;
+            group.add(shield);
+            // Sword
+            const swordHandleGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.2, 8);
+            const swordHandle = new THREE.Mesh(swordHandleGeo, materials.leather);
+            swordHandle.position.set(0.4, 0.6, 0.2);
+            swordHandle.rotation.x = Math.PI / 2;
+            swordHandle.castShadow = true;
+            swordHandle.receiveShadow = true;
+            group.add(swordHandle);
+            const swordBladeGeo = new THREE.BoxGeometry(0.05, 0.6, 0.01);
+            const swordBlade = new THREE.Mesh(swordBladeGeo, materials.metal);
+            swordBlade.position.set(0, -0.3, 0);
+            swordBlade.castShadow = true;
+            swordBlade.receiveShadow = true;
+            swordHandle.add(swordBlade);
+            // Legs
+            const legGeo = new THREE.CylinderGeometry(0.09, 0.07, 0.5, 8);
+            const leftLeg = new THREE.Mesh(legGeo, materials.metal);
+            leftLeg.position.set(-0.1, 0, 0);
+            leftLeg.castShadow = true;
+            leftLeg.receiveShadow = true;
+            group.add(leftLeg);
+            const rightLeg = new THREE.Mesh(legGeo, materials.metal);
+            rightLeg.position.set(0.1, 0, 0);
+            rightLeg.castShadow = true;
+            rightLeg.receiveShadow = true;
+            group.add(rightLeg);
+            group.position.y = 0.5;
+            return group;
+        }
+        function createMageFigure() {
+            const base = createObjectBase("Mage Figure");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Body (robe)
+            const bodyGeo = new THREE.CylinderGeometry(0.4, 0.5, 1.3, 8);
+            const bodyMat = new THREE.MeshStandardMaterial({
+                color: 0x5522AA,
+                roughness: 0.8,
+                metalness: 0.1
+            });
+            const body = new THREE.Mesh(bodyGeo, bodyMat);
+            body.position.y = 0.65;
+            body.castShadow = true;
+            body.receiveShadow = true;
+            group.add(body);
+            // Head
+            const headGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            const head = new THREE.Mesh(headGeo, materials.skin);
+            head.position.y = 1.4;
+            head.castShadow = true;
+            head.receiveShadow = true;
+            group.add(head);
+            // Wizard hat
+            const hatBaseGeo = new THREE.CylinderGeometry(0.25, 0.25, 0.05, 8);
+            const hatBase = new THREE.Mesh(hatBaseGeo, bodyMat);
+            hatBase.position.y = 1.55;
+            hatBase.castShadow = true;
+            hatBase.receiveShadow = true;
+            group.add(hatBase);
+            const hatTopGeo = new THREE.ConeGeometry(0.2, 0.5, 8);
+            const hatTop = new THREE.Mesh(hatTopGeo, bodyMat);
+            hatTop.position.y = 1.8;
+            hatTop.castShadow = true;
+            hatTop.receiveShadow = true;
+            group.add(hatTop);
+            // Arms
+            const armGeo = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 8);
+            const leftArm = new THREE.Mesh(armGeo, bodyMat);
+            leftArm.position.set(-0.4, 0.9, 0);
+            leftArm.rotation.z = Math.PI / 4;
+            leftArm.castShadow = true;
+            leftArm.receiveShadow = true;
+            group.add(leftArm);
+            const rightArm = new THREE.Mesh(armGeo, bodyMat);
+            rightArm.position.set(0.4, 0.9, 0);
+            rightArm.rotation.z = -Math.PI / 4;
+            rightArm.castShadow = true;
+            rightArm.receiveShadow = true;
+            group.add(rightArm);
+            // Staff
+            const staffGeo = new THREE.CylinderGeometry(0.03, 0.05, 1.8, 8);
+            const staffMat = new THREE.MeshStandardMaterial({
+                color: 0x663300,
+                roughness: 0.9
+            });
+            const staff = new THREE.Mesh(staffGeo, staffMat);
+            staff.position.set(0.7, 0.9, 0);
+            staff.rotation.z = -0.2;
+            staff.castShadow = true;
+            staff.receiveShadow = true;
+            group.add(staff);
+            // Orb on staff
+            const orbGeo = new THREE.SphereGeometry(0.12, 8, 8);
+            const orbMat = new THREE.MeshStandardMaterial({
+                color: 0x00CCFF,
+                roughness: 0.2,
+                metalness: 0.5,
+                emissive: 0x0088FF,
+                emissiveIntensity: 0.8
+            });
+            const orb = new THREE.Mesh(orbGeo, orbMat);
+            orb.position.y = 0.9;
+            orb.castShadow = true;
+            orb.receiveShadow = true;
+            staff.add(orb);
+            // Cloak/cape
+            const cloakGeo = new THREE.BoxGeometry(0.8, 1.2, 0.1);
+            const cloak = new THREE.Mesh(cloakGeo, bodyMat);
+            cloak.position.set(0, 0.7, -0.25);
+            cloak.castShadow = true;
+            cloak.receiveShadow = true;
+            group.add(cloak);
+            group.position.y = 0.5;
+            return group;
+        }
+        function createZombieFigure() {
+            const base = createObjectBase("Zombie Figure");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Body
+            const bodyGeo = new THREE.CylinderGeometry(0.25, 0.25, 1, 8);
+            const body = new THREE.Mesh(bodyGeo, materials.zombie);
+            body.position.y = 0.5;
+            body.rotation.x = 0.2; // Leaning forward
+            body.castShadow = true;
+            body.receiveShadow = true;
+            group.add(body);
+            // Head
+            const headGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            const head = new THREE.Mesh(headGeo, materials.zombie);
+            head.position.set(0, 1.1, 0.1); // Pushed forward due to leaning
+            head.castShadow = true;
+            head.receiveShadow = true;
+            group.add(head);
+            // Arms - asymmetrical for zombie look
+            const armGeo1 = new THREE.CylinderGeometry(0.08, 0.06, 0.6, 8);
+            const leftArm = new THREE.Mesh(armGeo1, materials.zombie);
+            leftArm.position.set(-0.3, 0.7, 0);
+            leftArm.rotation.set(0.1, 0, Math.PI / 2.5); // Extended forward
+            leftArm.castShadow = true;
+            leftArm.receiveShadow = true;
+            group.add(leftArm);
+            const armGeo2 = new THREE.CylinderGeometry(0.07, 0.07, 0.55, 8);
+            const rightArm = new THREE.Mesh(armGeo2, materials.zombie);
+            rightArm.position.set(0.3, 0.7, 0);
+            rightArm.rotation.set(-0.3, 0, -Math.PI / 3); // Hanging down
+            rightArm.castShadow = true;
+            rightArm.receiveShadow = true;
+            group.add(rightArm);
+            // Legs - asymmetrical stride
+            const legGeo1 = new THREE.CylinderGeometry(0.09, 0.07, 0.5, 8);
+            const leftLeg = new THREE.Mesh(legGeo1, materials.zombie);
+            leftLeg.position.set(-0.1, 0, 0);
+            leftLeg.rotation.x = -0.2; // Stepping forward
+            leftLeg.castShadow = true;
+            leftLeg.receiveShadow = true;
+            group.add(leftLeg);
+            const legGeo2 = new THREE.CylinderGeometry(0.08, 0.07, 0.5, 8);
+            const rightLeg = new THREE.Mesh(legGeo2, materials.zombie);
+            rightLeg.position.set(0.1, 0, -0.1);
+            rightLeg.castShadow = true;
+            rightLeg.receiveShadow = true;
+            group.add(rightLeg);
+            // Tattered clothes
+            const clothesGeo = new THREE.CylinderGeometry(0.26, 0.28, 0.7, 8);
+            const clothes = new THREE.Mesh(clothesGeo, new THREE.MeshStandardMaterial({
+                color: 0x445566,
+                roughness: 0.9,
+                metalness: 0.0
+            }));
+            clothes.position.y = 0.4;
+            clothes.castShadow = true;
+            clothes.receiveShadow = true;
+            body.add(clothes);
+            // Gore detail (blood)
+            const goreGeo = new THREE.SphereGeometry(0.1, 8, 8);
+            const gore = new THREE.Mesh(goreGeo, new THREE.MeshStandardMaterial({
+                color: 0x880000,
+                roughness: 0.8,
+                metalness: 0.2
+            }));
+            gore.position.set(0.15, 0.2, 0.1);
+            gore.scale.set(1, 0.3, 1);
+            body.add(gore);
+            group.position.y = 0.5;
+            return group;
+        }
+        function createSurvivorFigure() {
+            const base = createObjectBase("Survivor Figure");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Body
+            const bodyGeo = new THREE.CylinderGeometry(0.25, 0.25, 1, 8);
+            const body = new THREE.Mesh(bodyGeo, materials.leather);
+            body.position.y = 0.5;
+            body.castShadow = true;
+            body.receiveShadow = true;
+            group.add(body);
+            // Head
+            const headGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            const head = new THREE.Mesh(headGeo, materials.skin);
+            head.position.y = 1.1;
+            head.castShadow = true;
+            head.receiveShadow = true;
+            group.add(head);
+            // Arms
+            const armGeo = new THREE.CylinderGeometry(0.07, 0.07, 0.5, 8);
+            const leftArm = new THREE.Mesh(armGeo, materials.leather);
+            leftArm.position.set(-0.3, 0.7, 0);
+            leftArm.rotation.z = Math.PI / 6;
+            leftArm.castShadow = true;
+            leftArm.receiveShadow = true;
+            group.add(leftArm);
+            const rightArm = new THREE.Mesh(armGeo, materials.leather);
+            rightArm.position.set(0.3, 0.7, 0);
+            rightArm.rotation.z = -Math.PI / 6;
+            rightArm.castShadow = true;
+            rightArm.receiveShadow = true;
+            group.add(rightArm);
+            // Legs
+            const legGeo = new THREE.CylinderGeometry(0.08, 0.07, 0.5, 8);
+            const leftLeg = new THREE.Mesh(legGeo, new THREE.MeshStandardMaterial({
+                color: 0x223355, // Denim
+                roughness: 0.8,
+            }));
+            leftLeg.position.set(-0.1, 0, 0);
+            leftLeg.castShadow = true;
+            leftLeg.receiveShadow = true;
+            group.add(leftLeg);
+            const rightLeg = new THREE.Mesh(legGeo, new THREE.MeshStandardMaterial({
+                color: 0x223355, // Denim
+                roughness: 0.8
+            }));
+            rightLeg.position.set(0.1, 0, 0);
+            rightLeg.castShadow = true;
+            rightLeg.receiveShadow = true;
+            group.add(rightLeg);
+            // Backpack
+            const backpackGeo = new THREE.BoxGeometry(0.3, 0.4, 0.2);
+            const backpack = new THREE.Mesh(backpackGeo, new THREE.MeshStandardMaterial({
+                color: 0x556B2F, // Olive green
+                roughness: 0.9
+            }));
+            backpack.position.set(0, 0.6, -0.2);
+            backpack.castShadow = true;
+            backpack.receiveShadow = true;
+            group.add(backpack);
+            // Baseball bat or weapon
+            const batGeo = new THREE.CylinderGeometry(0.03, 0.05, 0.8, 8);
+            const bat = new THREE.Mesh(batGeo, materials.wood);
+            bat.position.set(0.45, 0.4, 0.2);
+            bat.rotation.set(Math.PI/6, 0, Math.PI/6);
+            bat.castShadow = true;
+            bat.receiveShadow = true;
+            group.add(bat);
+            group.position.y = 0.5;
+            return group;
+        }
+        function createDwarfMinerFigure() {
+            const base = createObjectBase("Dwarf Miner Figure");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Body - shorter, stockier
+            const bodyGeo = new THREE.CylinderGeometry(0.3, 0.3, 0.7, 8);
+            const body = new THREE.Mesh(bodyGeo, new THREE.MeshStandardMaterial({
+                color: 0x8B4513, // Brown leather
+                roughness: 0.8
+            }));
+            body.position.y = 0.35;
+            body.castShadow = true;
+            body.receiveShadow = true;
+            group.add(body);
+            // Head - larger in proportion
+            const headGeo = new THREE.SphereGeometry(0.22, 8, 8);
+            const head = new THREE.Mesh(headGeo, materials.skin);
+            head.position.y = 0.8;
+            head.castShadow = true;
+            head.receiveShadow = true;
+            group.add(head);
+            // Beard
+            const beardGeo = new THREE.ConeGeometry(0.2, 0.3, 8);
+            const beard = new THREE.Mesh(beardGeo, new THREE.MeshStandardMaterial({
+                color: 0xDD9933, // Golden beard
+                roughness: 0.9
+            }));
+            beard.position.set(0, 0.7, 0.1);
+            beard.rotation.x = -Math.PI/2;
+            beard.castShadow = true;
+            beard.receiveShadow = true;
+            group.add(beard);
+            // Miner's helmet
+            const helmetGeo = new THREE.CylinderGeometry(0.23, 0.23, 0.15, 8);
+            const helmet = new THREE.Mesh(helmetGeo, materials.metal);
+            helmet.position.y = 0.95;
+            helmet.castShadow = true;
+            helmet.receiveShadow = true;
+            group.add(helmet);
+            // Helmet light
+            const lightGeo = new THREE.CylinderGeometry(0.05, 0.05, 0.07, 8);
+            const light = new THREE.Mesh(lightGeo, new THREE.MeshStandardMaterial({
+                color: 0xFFFF00,
+                emissive: 0xFFFF00,
+                emissiveIntensity: 0.8
+            }));
+            light.position.set(0, 0, 0.25);
+            helmet.add(light);
+            // Arms
+            const armGeo = new THREE.CylinderGeometry(0.08, 0.08, 0.4, 8);
+            const leftArm = new THREE.Mesh(armGeo, materials.leather);
+            leftArm.position.set(-0.35, 0.5, 0);
+            leftArm.rotation.z = Math.PI / 4;
+            leftArm.castShadow = true;
+            leftArm.receiveShadow = true;
+            group.add(leftArm);
+            const rightArm = new THREE.Mesh(armGeo, materials.leather);
+            rightArm.position.set(0.35, 0.5, 0);
+            rightArm.rotation.z = -Math.PI / 4;
+            rightArm.castShadow = true;
+            rightArm.receiveShadow = true;
+            group.add(rightArm);
+            // Legs - Short, sturdy
+            const legGeo = new THREE.CylinderGeometry(0.1, 0.08, 0.3, 8);
+            const leftLeg = new THREE.Mesh(legGeo, materials.leather);
+            leftLeg.position.set(-0.15, 0, 0);
+            leftLeg.castShadow = true;
+            leftLeg.receiveShadow = true;
+            group.add(leftLeg);
+            const rightLeg = new THREE.Mesh(legGeo, materials.leather);
+            rightLeg.position.set(0.15, 0            const wallGeo = new THREE.BoxGeometry(5, 3, 0.5);
+            const wall = new THREE.Mesh(wallGeo, materials.redBrick);
+            wall.castShadow = true;
+            wall.receiveShadow = true;
+            group.add(wall);
+            // Broken window
+            const windowGeo = new THREE.BoxGeometry(1.2, 1.2, 0.1);
+            const window = new THREE.Mesh(windowGeo, materials.glass);
+            window.position.set(-1.2, 0.5, 0.3);
+            window.material.opacity = 0.3; // Broken glass is more transparent
+            group.add(window);
+            // Door frame
+            const doorFrameGeo = new THREE.BoxGeometry(1.1, 2.2, 0.1);
+            const doorFrame = new THREE.Mesh(doorFrameGeo, materials.darkWood);
+            doorFrame.position.set(1.2, -0.4, 0.3);
+            group.add(doorFrame);
+            // Damage details
+            const damageGeo = new THREE.BoxGeometry(1.5, 1.2, 0.6);
+            const damage = new THREE.Mesh(damageGeo, materials.damagedConcrete);
+            damage.position.set(0.5, 1, 0.2);
+            group.add(damage);
+            // Add some rubble at the base
+            for (let i = 0; i < 5; i++) {
+                const rubbleGeo = new THREE.IcosahedronGeometry(0.3 * Math.random() + 0.1, 0);
+                const rubble = new THREE.Mesh(rubbleGeo, materials.redBrick);
+                rubble.position.set(
+                    Math.random() * 4 - 2,
+                    -1.5 + Math.random() * 0.3,
+                    0.3 + Math.random() * 0.5
+                );
+                rubble.rotation.set(
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI
+                );
+                rubble.castShadow = true;
+                rubble.receiveShadow = true;
+                group.add(rubble);
+            }
+            group.position.y = 1.5; // Raise to ground level
+            return group;
+        }
+        // =================== NATURE CATEGORY ===================
+        function createPineTree() {
+            const base = createObjectBase("Pine Tree");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Trunk
+            const trunkGeo = new THREE.CylinderGeometry(0.2, 0.3, 3, 8);
+            const trunk = new THREE.Mesh(trunkGeo, materials.wood);
+            trunk.position.y = 1.5;
+            trunk.castShadow = true;
+            trunk.receiveShadow = true;
+            group.add(trunk);
+            // Pine layers - cones stacked
+            const colors = [0x005500, 0x006600, 0x007700];
+            for (let i = 0; i < 3; i++) {
+                const coneGeo = new THREE.ConeGeometry(1.2 - i * 0.3, 1.5, 8);
+                const leafMat = new THREE.MeshStandardMaterial({
+                    color: colors[i],
+                    roughness: 0.8
+                });
+                const foliage = new THREE.Mesh(coneGeo, leafMat);
+                foliage.position.y = 2 + i*1.2;
+                foliage.castShadow = true;
+                foliage.receiveShadow = true;
+                group.add(foliage);
+            }
+            return group;
+        }
+        function createBoulder() {
+            const base = createObjectBase("Boulder");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Main boulder
+            const boulderGeo = new THREE.IcosahedronGeometry(1.2, 1);
+            const boulder = new THREE.Mesh(boulderGeo, materials.stone);
+            boulder.castShadow = true;
+            boulder.receiveShadow = true;
+            boulder.scale.y = 0.8;
+            boulder.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
+            group.add(boulder);
+            // Add some smaller stones nearby
+            for (let i = 0; i < 3; i++) {
+                const smallStoneGeo = new THREE.IcosahedronGeometry(0.3 * Math.random() + 0.2, 0);
+                const smallStone = new THREE.Mesh(smallStoneGeo, materials.stone);
+                smallStone.position.set(
+                    Math.random() * 2 - 1,
+                    Math.random() * 0.3,
+                    Math.random() * 2 - 1
+                );
+                smallStone.rotation.set(
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI
+                );
+                smallStone.castShadow = true;
+                smallStone.receiveShadow = true;
+                group.add(smallStone);
+            }
+            group.position.y = 0.6; // Raise to ground level
+            return group;
+        }
+        function createAlienPlant() {
+            const base = createObjectBase("Alien Plant");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Plant base
+            const baseGeo = new THREE.CylinderGeometry(0.3, 0.5, 0.5, 6);
+            const plantBase = new THREE.Mesh(baseGeo, materials.darkGreen);
+            plantBase.position.y = 0.25;
+            plantBase.castShadow = true;
+            plantBase.receiveShadow = true;
+            group.add(plantBase);
+            // Strange tentacle-like growths
+            for (let i = 0; i < 5; i++) {
+                const tentacleGeo = new THREE.CylinderGeometry(0.1, 0.05, 1.5, 6);
+                // Bend the geometry
+                const tentacleMat = new THREE.MeshStandardMaterial({
+                    color: 0x8800AA,
+                    roughness: 0.6,
+                    emissive: 0x330033,
+                    emissiveIntensity: 0.3
+                });
+                const tentacle = new THREE.Mesh(tentacleGeo, tentacleMat);
+                tentacle.position.set(
+                    Math.sin(i * Math.PI * 2 / 5) * 0.3,
+                    1,
+                    Math.cos(i * Math.PI * 2 / 5) * 0.3
+                );
+                tentacle.rotation.set(
+                    Math.random() * 0.5 - 0.25 + 0.3,
+                    0,
+                    Math.random() * 0.5 - 0.25 + (i * Math.PI * 2 / 5)
+                );
+                tentacle.castShadow = true;
+                tentacle.receiveShadow = true;
+                group.add(tentacle);
+                // Add glowing bulbs at the end of tentacles
+                const bulbGeo = new THREE.SphereGeometry(0.15, 8, 8);
+                const bulbMat = new THREE.MeshStandardMaterial({
+                    color: 0xAA00FF,
+                    roughness: 0.4,
+                    emissive: 0xAA00FF,
+                    emissiveIntensity: 0.8
+                });
+                const bulb = new THREE.Mesh(bulbGeo, bulbMat);
+                bulb.position.y = 0.8;
+                tentacle.add(bulb);
+            }
+            return group;
+        }
+        function createFloatingRockPlatform() {
+            const base = createObjectBase("Floating Rock Platform");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Main floating rock
+            const rockGeo = new THREE.CylinderGeometry(1.5, 2, 1, 8);
+            const rock = new THREE.Mesh(rockGeo, materials.stone);
+            rock.castShadow = true;
+            rock.receiveShadow = true;
+            rock.position.y = 1.5;
+            group.add(rock);
+            // Top surface - grass
+            const topGeo = new THREE.CylinderGeometry(1.5, 1.5, 0.1, 8);
+            const top = new THREE.Mesh(topGeo, materials.ground);
+            top.position.y = 2.05;
+            top.receiveShadow = true;
+            group.add(top);
+            // Bottom details - crystals
+            for (let i = 0; i < 6; i++) {
+                const crystalGeo = new THREE.ConeGeometry(0.2, 0.6, 5);
+                const crystal = new THREE.Mesh(crystalGeo, materials.crystal);
+                const angle = i * Math.PI * 2 / 6;
+                crystal.position.set(
+                    Math.sin(angle) * 1.7,
+                    1,
+                    Math.cos(angle) * 1.7
+                );
+                crystal.rotation.x = Math.PI;
+                crystal.rotation.z = Math.random() * 0.3 - 0.15;
+                crystal.castShadow = true;
+                crystal.receiveShadow = true;
+                group.add(crystal);
+            }
+            // Anti-gravity effect (particles) - simulated with small meshes
+            for (let i = 0; i < 8; i++) {
+                const particleGeo = new THREE.SphereGeometry(0.1, 4, 4);
+                const particle = new THREE.Mesh(particleGeo, materials.energyBeam);
+                const angle = i * Math.PI * 2 / 8;
+                const distance = 1 + Math.random() * 0.5;
+                particle.position.set(
+                    Math.sin(angle) * distance,
+                    Math.random() * 1.5,
+                    Math.cos(angle) * distance
+                );
+                group.add(particle);
+            }
+            group.position.y = 0.8; // Hover above ground
+            return group;
+        }
+        function createRubblePile() {
+            const base = createObjectBase("Rubble Pile");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Create multiple rubble pieces
+            const materials = [
+                new THREE.MeshStandardMaterial({color: 0x888888, roughness: 0.9}), // Concrete
+                new THREE.MeshStandardMaterial({color: 0xA03C28, roughness: 0.9}), // Brick
+                new THREE.MeshStandardMaterial({color: 0x777777, roughness: 0.8})  // Stone
+            ];
+            // Add chunks of various sizes
+            for (let i = 0; i < 15; i++) {
+                // Choose random geometry
+                let geo;
+                const geoType = Math.floor(Math.random() * 3);
+                if (geoType === 0) {
+                    geo = new THREE.BoxGeometry(
+                        0.3 + Math.random() * 0.7,
+                        0.2 + Math.random() * 0.3,
+                        0.3 + Math.random() * 0.7
+                    );
+                } else if (geoType === 1) {
+                    geo = new THREE.IcosahedronGeometry(0.2 + Math.random() * 0.4, 0);
+                } else {
+                    geo = new THREE.TetrahedronGeometry(0.3 + Math.random() * 0.4, 0);
+                }
+                // Choose random material
+                const material = materials[Math.floor(Math.random() * materials.length)];
+                const chunk = new THREE.Mesh(geo, material);
+                chunk.position.set(
+                    Math.random() * 2 - 1,
+                    Math.random() * 0.8,
+                    Math.random() * 2 - 1
+                );
+                chunk.rotation.set(
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI,
+                    Math.random() * Math.PI
+                );
+                chunk.castShadow = true;
+                chunk.receiveShadow = true;
+                group.add(chunk);
+            }
+            // Add some rebar sticking out
+            for (let i = 0; i < 5; i++) {
+                const rebarGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.8 + Math.random() * 0.8, 6);
+                const rebar = new THREE.Mesh(rebarGeo, materials.rustedMetal);
+                rebar.position.set(
+                    Math.random() * 1.8 - 0.9,
+                    0.3 + Math.random() * 0.3,
+                    Math.random() * 1.8 - 0.9
+                );
+                rebar.rotation.set(
+                    Math.random() * 0.8 - 0.4,
+                    Math.random() * Math.PI,
+                    Math.random() * 0.8 - 0.4
+                );
+                rebar.castShadow = true;
+                rebar.receiveShadow = true;
+                group.add(rebar);
+            }
+            // Add dusty material on ground
+            const dustGeo = new THREE.CircleGeometry(1.5, 16);
+            const dustMat = new THREE.MeshStandardMaterial({
+                color: 0xCCBBAA,
+                roughness: 1.0,
+                metalness: 0.0
+            });
+            const dust = new THREE.Mesh(dustGeo, dustMat);
+            dust.rotation.x = -Math.PI/2;
+            dust.position.y = 0.01;
+            dust.receiveShadow = true;
+            group.add(dust);
+            group.position.y = 0.4; // Raise to ground level
+            return group;
+        }
+        // =================== PROPS CATEGORY ===================
+        function createRooftopACUnit() {
+            const base = createObjectBase("Rooftop AC Unit");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Main AC unit body
+            const acGeo = new THREE.BoxGeometry(1.5, 0.8, 1.2);
+            const ac = new THREE.Mesh(acGeo, materials.metal);
+            ac.castShadow = true;
+            ac.receiveShadow = true;
+            group.add(ac);
+            // Fan grille on top
+            const fanGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.1, 8);
+            const fan = new THREE.Mesh(fanGeo, materials.rustedMetal);
+            fan.rotation.x = Math.PI/2;
+            fan.position.set(0, 0.45, 0);
+            group.add(fan);
+            // Vents on sides
+            const ventGeo = new THREE.BoxGeometry(1.2, 0.4, 0.1);
+            const vent1 = new THREE.Mesh(ventGeo, materials.rustedMetal);
+            vent1.position.set(0, 0, 0.65);
+            group.add(vent1);
+            const vent2 = new THREE.Mesh(ventGeo, materials.rustedMetal);
+            vent2.position.set(0, 0, -0.65);
+            group.add(vent2);
+            // Pipes
+            const pipeGeo = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 8);
+            const pipe = new THREE.Mesh(pipeGeo, materials.metal);
+            pipe.rotation.x = Math.PI/2;
+            pipe.position.set(-0.6, -0.25, 0);
+            group.add(pipe);
+            group.position.y = 0.4; // Raise to ground level
+            return group;
+        }
+        function createHolographicWindowDisplay() {
+            const base = createObjectBase("Holographic Window Display");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Frame
+            const frameGeo = new THREE.BoxGeometry(2, 1.5, 0.1);
+            const frame = new THREE.Mesh(frameGeo, materials.metal);
+            frame.castShadow = true;
+            frame.receiveShadow = true;
+            group.add(frame);
+            // Holographic display
+            const displayGeo = new THREE.PlaneGeometry(1.8, 1.3);
+            const displayMat = new THREE.MeshStandardMaterial({
+                color: 0x00AAFF,
+                roughness: 0.2,
+                metalness: 0.8,
+                emissive: 0x0066FF,
+                emissiveIntensity: 0.8,
+                transparent: true,
+                opacity: 0.7
+            });
+            const display = new THREE.Mesh(displayGeo, displayMat);
+            display.position.z = 0.06;
+            group.add(display);
+            // Data lines on the display
+            for (let i = 0; i < 5; i++) {
+                const lineGeo = new THREE.BoxGeometry(1.4, 0.04, 0.01);
+                const line = new THREE.Mesh(lineGeo, materials.energyBeam);
+                line.position.set(0, -0.4 + i * 0.2, 0.07);
+                group.add(line);
+            }
+            group.position.y = 1.5; // Raise to wall mount height
+            return group;
+        }
+        function createJerseyBarrier() {
+            const base = createObjectBase("Jersey Barrier");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Create the barrier shape - custom geometry
+            const shape = new THREE.Shape();
+            shape.moveTo(-0.5, 0);
+            shape.lineTo(-0.4, 0.8);
+            shape.lineTo(0.4, 0.8);
+            shape.lineTo(0.5, 0);
+            shape.lineTo(-0.5, 0);
+            const extrudeSettings = {
+                steps: 1,
+                depth: 2,
+                bevelEnabled: false
+            };
+            const barrierGeo = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+            const barrier = new THREE.Mesh(barrierGeo, materials.concrete);
+            barrier.castShadow = true;
+            barrier.receiveShadow = true;
+            barrier.rotation.y = Math.PI/2;
+            group.add(barrier);
+            // Add some damage/weathering details
+            const damageGeo = new THREE.BoxGeometry(0.2, 0.1, 0.3);
+            const damage1 = new THREE.Mesh(damageGeo, materials.damagedConcrete);
+            damage1.position.set(0.51, 0.4, 0.7);
+            group.add(damage1);
+            const damage2 = new THREE.Mesh(damageGeo, materials.damagedConcrete);
+            damage2.position.set(0.51, 0.3, -0.5);
+            group.add(damage2);
+            // Optional graffiti - represented as colored patches
+            const graffitiGeo = new THREE.PlaneGeometry(0.8, 0.3);
+            const graffitiMat = new THREE.MeshStandardMaterial({
+                color: 0xFF3300,
+                roughness: 0.9
+            });
+            const graffiti = new THREE.Mesh(graffitiGeo, graffitiMat);
+            graffiti.rotation.y = Math.PI/2;
+            graffiti.position.set(0.51, 0.5, 0);
+            group.add(graffiti);
+            group.position.y = 0.4; // Raise to ground level
+            return group;
+        }
+        function createOilDrum() {
+            const base = createObjectBase("Oil Drum");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Main drum body
+            const drumGeo = new THREE.CylinderGeometry(0.4, 0.4, 1.2, 16);
+            const drum = new THREE.Mesh(drumGeo, materials.rustedMetal);
+            drum.castShadow = true;
+            drum.receiveShadow = true;
+            group.add(drum);
+            // Top and bottom rims
+            const rimGeo = new THREE.TorusGeometry(0.4, 0.05, 8, 24);
+            const topRim = new THREE.Mesh(rimGeo, materials.metal);
+            topRim.rotation.x = Math.PI/2;
+            topRim.position.y = 0.6;
+            group.add(topRim);
+            const bottomRim = new THREE.Mesh(rimGeo, materials.metal);
+            bottomRim.rotation.x = Math.PI/2;
+            bottomRim.position.y = -0.6;
+            group.add(bottomRim);
+            // Add some bullet holes
+            for (let i = 0; i < 3; i++) {
+                const holeGeo = new THREE.CircleGeometry(0.05 + Math.random() * 0.05, 8);
+                const hole = new THREE.Mesh(holeGeo, new THREE.MeshBasicMaterial({color: 0x000000}));
+                // Position on the curved surface of the drum
+                const angle = Math.random() * Math.PI * 2;
+                hole.position.set(
+                    Math.sin(angle) * 0.41,
+                    Math.random() * 0.8 - 0.4,
+                    Math.cos(angle) * 0.41
+                );
+                // Rotate to face outward
+                hole.rotation.y = angle;
+                hole.rotation.x = Math.PI/2;
+                group.add(hole);
+            }
+            // Add a lid cap
+            const lidGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.05, 16);
+            const lid = new THREE.Mesh(lidGeo, materials.metal);
+            lid.position.y = 0.625;
+            group.add(lid);
+            // Add cap in center
+            const capGeo = new THREE.CylinderGeometry(0.1, 0.1, 0.03, 16);
+            const cap = new THREE.Mesh(capGeo, materials.metal);
+            cap.position.y = 0.65;
+            group.add(cap);
+            group.position.y = 0.6; // Raise to ground level
+            return group;
+        }
+        function createCannedFood() {
+            const base = createObjectBase("Canned Food");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Main can body
+            const canGeo = new THREE.CylinderGeometry(0.15, 0.15, 0.25, 16);
+            const can = new THREE.Mesh(canGeo, materials.metal);
+            can.castShadow = true;
+            can.receiveShadow = true;
+            group.add(can);
+            // Top and bottom rims
+            const rimGeo = new THREE.TorusGeometry(0.15, 0.02, 8, 24);
+            const topRim = new THREE.Mesh(rimGeo, materials.metal);
+            topRim.rotation.x = Math.PI/2;
+            topRim.position.y = 0.125;
+            group.add(topRim);
+            const bottomRim = new THREE.Mesh(rimGeo, materials.metal);
+            bottomRim.rotation.x = Math.PI/2;
+            bottomRim.position.y = -0.125;
+            group.add(bottomRim);
+            // Label - simulated with a colored band
+            const labelGeo = new THREE.CylinderGeometry(0.151, 0.151, 0.2, 16);
+            const labelMat = new THREE.MeshStandardMaterial({
+                color: 0x2244AA,
+                roughness: 0.9,
+                metalness: 0.0
+            });
+            const label = new THREE.Mesh(labelGeo, labelMat);
+            group.add(label);
+            // Add a dent
+            const dentGeo = new THREE.SphereGeometry(0.1, 8, 8);
+            const dent = new THREE.Mesh(dentGeo, materials.metal);
+            dent.position.set(0.08, 0, 0.12);
+            dent.scale.set(0.5, 0.5, 0.2);
+            group.add(dent);
+            group.position.y = 0.125; // Raise to ground level
+            group.scale.set(0.7, 0.7, 0.7); // Make the can a reasonable size
+            return group;
+        }
+        function createTreasureChest() {
+            const base = createObjectBase("Treasure Chest");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Chest base
+            const chestBaseGeo = new THREE.BoxGeometry(1, 0.6, 0.7);
+            const chestBase = new THREE.Mesh(chestBaseGeo, materials.wood);
+            chestBase.position.y = 0.3;
+            chestBase.castShadow = true;
+            chestBase.receiveShadow = true;
+            group.add(chestBase);
+            // Chest lid
+            const chestLidGeo = new THREE.BoxGeometry(1, 0.2, 0.7);
+            const chestLid = new THREE.Mesh(chestLidGeo, materials.wood);
+            chestLid.position.set(0, 0.7, -0.2);
+            chestLid.rotation.x = Math.PI/4; // Opened
+            chestLid.castShadow = true;
+            chestLid.receiveShadow = true;
+            group.add(chestLid);
+            // Metal bands
+            const bandGeo = new THREE.BoxGeometry(1.02, 0.1, 0.72);
+            const band1 = new THREE.Mesh(bandGeo, materials.metal);
+            band1.position.y = 0.15;
+            group.add(band1);
+            const band2 = new THREE.Mesh(bandGeo, materials.metal);
+            band2.position.y = 0.45;
+            group.add(band2);
+            // Lid band
+            const lidBandGeo = new THREE.BoxGeometry(1.02, 0.1, 0.72);
+            const lidBand = new THREE.Mesh(lidBandGeo, materials.metal);
+            lidBand.position.y = 0.05;
+            chestLid.add(lidBand);
+            // Lock
+            const lockGeo = new THREE.BoxGeometry(0.25, 0.2, 0.1);
+            const lock = new THREE.Mesh(lockGeo, materials.goldMetal);
+            lock.position.set(0, 0.6, 0.35);
+            group.add(lock);
+            // Glow effect inside (treasure!)
+            const glowGeo = new THREE.IcosahedronGeometry(0.3, 0);
+            const glowMat = new THREE.MeshStandardMaterial({
+                color: 0xFFD700,
+                roughness: 0.2,
+                metalness: 1.0,
+                emissive: 0xFFD700,
+                emissiveIntensity: 0.5
+            });
+            const glow = new THREE.Mesh(glowGeo, glowMat);
+            glow.position.set(0, 0.3, 0);
+            group.add(glow);
+            return group;
+        }
+        function createWallTorch() {
+            const base = createObjectBase("Wall Torch");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            // Torch handle
+            const handleGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.5, 8);
+            const handle = new THREE.Mesh(handleGeo, materials.wood);
+            handle.rotation.x = Math.PI/4;
+            handle.position.y = 0.2;
+            handle.castShadow = true;
+            handle.receiveShadow = true;
+            group.add(handle);
+            // Torch holder
+            const holderGeo = new THREE.CylinderGeometry(0.08, 0.12, 0.15, 8);
+            const holder = new THREE.Mesh(holderGeo, materials.metal);
+            holder.position.set(0, 0.48, 0.17);
+            holder.rotation.x = Math.PI/4;
+            group.add(holder);
+            // Wall mount
+            const mountGeo = new THREE.BoxGeometry(0.25, 0.25, 0.1);
+            const mount = new THREE.Mesh(mountGeo, materials.metal);
+            mount.position.z = -0.1;
+            group.add(mount);
+            // Flame effect (simplified)
+            const flameGeo = new THREE.ConeGeometry(0.1, 0.25, 8);
+            const flameMat = new THREE.MeshStandardMaterial({
+                color: 0xFF6600,
+                roughness: 0.3,
+                metalness: 0.0,
+                emissive: 0xFF3300,
+                emissiveIntensity: 0.8
+            });
+            const flame = new THREE.Mesh(flameGeo, flameMat);
+            flame.position.set(0, 0.58, 0.26);
+            flame.rotation.x = Math.PI/4;
+            group.add(flame);
+            // Inner flame
+            const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
+            const innerFlameM<!DOCTYPE html>
 <html>
 <head>
     <title>Three.js Infinite World</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
+        .info-panel {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            background: rgba(0,0,0,0.6);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-family: Arial, sans-serif;
+            font-size: 14px;
+            pointer-events: none;
+        }
     </style>
     <!-- New: Polling function for game state -->
     <script>
     </script>
 </head>
 <body>
+    <div class="info-panel">
+        WASD or Arrow Keys to move | Click to place objects
+    </div>
     <script type="importmap">
         {
             "imports": {
         const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
         const plotsMetadata = window.PLOTS_METADATA || [];
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
+        const customScale = window.CUSTOM_SCALE || 1.0;
+        const customRotationY = window.CUSTOM_ROTATION_Y || 0;
         const plotWidth = window.PLOT_WIDTH || 50.0;
         const plotDepth = window.PLOT_DEPTH || 50.0;
+        // Materials Library - Centralized for reuse
+        const materials = {
+            // Common materials
+            ground: new THREE.MeshStandardMaterial({
+                color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide
+            }),
+            placeholderGround: new THREE.MeshStandardMaterial({
+                color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide
+            }),
+            wood: new THREE.MeshStandardMaterial({
+                color: 0x8B4513, roughness: 0.9, metalness: 0.1
+            }),
+            darkWood: new THREE.MeshStandardMaterial({
+                color: 0x5D2906, roughness: 0.85, metalness: 0.15
+            }),
+            redBrick: new THREE.MeshStandardMaterial({
+                color: 0xA03C28, roughness: 0.9, metalness: 0.05
+            }),
+            metal: new THREE.MeshStandardMaterial({
+                color: 0x888888, roughness: 0.4, metalness: 0.8
+            }),
+            rustedMetal: new THREE.MeshStandardMaterial({
+                color: 0x964B00, roughness: 0.7, metalness: 0.6
+            }),
+            glass: new THREE.MeshStandardMaterial({
+                color: 0x88CCFF, roughness: 0.1, metalness: 0.9, transparent: true, opacity: 0.4
+            }),
+            concrete: new THREE.MeshStandardMaterial({
+                color: 0x888888, roughness: 0.9, metalness: 0.1
+            }),
+            damagedConcrete: new THREE.MeshStandardMaterial({
+                color: 0x777777, roughness: 0.95, metalness: 0.05
+            }),
+            darkGreen: new THREE.MeshStandardMaterial({
+                color: 0x225522, roughness: 0.8, metalness: 0.1
+            }),
+            skin: new THREE.MeshStandardMaterial({
+                color: 0xE0AC69, roughness: 0.7, metalness: 0.1
+            }),
+            cloth: new THREE.MeshStandardMaterial({
+                color: 0xCCAA88, roughness: 0.9, metalness: 0.0
+            }),
+            neonGlow: new THREE.MeshStandardMaterial({
+                color: 0x00FFFF, roughness: 0.2, metalness: 0.8, emissive: 0x00FFFF, emissiveIntensity: 1.0
+            }),
+            goldMetal: new THREE.MeshStandardMaterial({
+                color: 0xFFD700, roughness: 0.3, metalness: 1.0
+            }),
+            leather: new THREE.MeshStandardMaterial({
+                color: 0x8B4513, roughness: 0.9, metalness: 0.1
+            }),
+            stone: new THREE.MeshStandardMaterial({
+                color: 0x777777, roughness: 0.9, metalness: 0.1
+            }),
+            bone: new THREE.MeshStandardMaterial({
+                color: 0xE3DAC9, roughness: 0.7, metalness: 0.1
+            }),
+            zombie: new THREE.MeshStandardMaterial({
+                color: 0x7D9F85, roughness: 0.8, metalness: 0.1
+            }),
+            lava: new THREE.MeshStandardMaterial({
+                color: 0xFF4500, roughness: 0.7, metalness: 0.3, emissive: 0xFF4500, emissiveIntensity: 0.8
+            }),
+            crystal: new THREE.MeshStandardMaterial({
+                color: 0x88CCFF, roughness: 0.1, metalness: 0.9, transparent: true, opacity: 0.7
+            }),
+            energyBeam: new THREE.MeshStandardMaterial({
+                color: 0x88FFFF, roughness: 0.1, metalness: 0.5, emissive: 0x88FFFF, emissiveIntensity: 1.0, transparent: true, opacity: 0.7
+            })
+        };
         function init() {
             scene = new THREE.Scene();
             // Define functions callable by Streamlit
             window.teleportPlayer = teleportPlayer;
             window.getSaveDataAndPosition = getSaveDataAndPosition;
+            window.getSaveDataForNamedPlot = getSaveDataForNamedPlot;
             window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
             console.log("Three.js Initialized. World ready.");
             if (groundMeshes[gridKey]) return;
             console.log(`Creating ${isPlaceholder ? 'placeholder' : 'initial'} ground at ${gridX}, ${gridZ}`);
             const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
+            const material = isPlaceholder ? materials.placeholderGround : materials.ground;
             const groundMesh = new THREE.Mesh(groundGeometry, material);
             groundMesh.rotation.x = -Math.PI / 2;
             groundMesh.position.y = -0.05;
             console.log("Finished loading initial objects.");
         }
         function saveUnsavedState() {
             try {
                 const stateToSave = newlyPlacedObjects.map(obj => ({
             return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
         }
+        function createAndPlaceObject(objData, isNewObject) {
+            let loadedObject = null;
+            switch (objData.type) {
+                // Original objects
+                case "Simple House": loadedObject = createSimpleHouse(); break;
+                case "Tree": loadedObject = createTree(); break;
+                case "Rock": loadedObject = createRock(); break;
+                case "Fence Post": loadedObject = createFencePost(); break;
+                // Building category
+                case "Cyberpunk Wall Panel": loadedObject = createCyberpunkWallPanel(); break;
+                case "Modular Hab Block": loadedObject = createModularHabBlock(); break;
+                case "MegaCorp Skyscraper": loadedObject = createMegaCorpSkyscraper(); break;
+                case "Castle Wall Section": loadedObject = createCastleWallSection(); break;
+                case "Wooden Door": loadedObject = createWoodenDoor(); break;
+                case "House Roof Section": loadedObject = createHouseRoofSection(); break;
+                case "Concrete Bunker Wall": loadedObject = createConcreteBunkerWall(); break;
+                case "Damaged House Facade": loadedObject = createDamagedHouseFacade(); break;
+                // Nature category
+                case "Pine Tree": loadedObject = createPineTree(); break;
+                case "Boulder": loadedObject = createBoulder(); break;
+                case "Alien Plant": loadedObject = createAlienPlant(); break;
+                case "Floating Rock Platform": loadedObject = createFloatingRockPlatform(); break;
+                case "Rubble Pile": loadedObject = createRubblePile(); break;
+                // Props category
+                case "Rooftop AC Unit": loadedObject = createRooftopACUnit(); break;
+                case "Holographic Window Display": loadedObject = createHolographicWindowDisplay(); break;
+                case "Jersey Barrier": loadedObject = createJerseyBarrier(); break;
+                case "Oil Drum": loadedObject = createOilDrum(); break;
+                case "Canned Food": loadedObject = createCannedFood(); break;
+                case "Treasure Chest": loadedObject = createTreasureChest(); break;
+                case "Wall Torch": loadedObject = createWallTorch(); break;
+                case "Bone Pile": loadedObject = createBonePile(); break;
+                // Characters category
+                case "King Figure": loadedObject = createKingFigure(); break;
+                case "Soldier Figure": loadedObject = createSoldierFigure(); break;
+                case "Mage Figure": loadedObject = createMageFigure(); break;
+                case "Zombie Figure": loadedObject = createZombieFigure(); break;
+                case "Survivor Figure": loadedObject = createSurvivorFigure(); break;
+                case "Dwarf Miner Figure": loadedObject = createDwarfMinerFigure(); break;
+                case "Undead Knight Figure": loadedObject = createUndeadKnightFigure(); break;
+                case "Hero Figure": loadedObject = createHeroFigure(); break;
+                // Vehicles category
+                case "Wooden Cart": loadedObject = createWoodenCart(); break;
+                case "Ballista": loadedObject = createBallista(); break;
+                case "Siege Tower": loadedObject = createSiegeTower(); break;
+                case "Buggy Frame": loadedObject = createBuggyFrame(); break;
+                case "Motorbike": loadedObject = createMotorbike(); break;
+                case "Hover Bike": loadedObject = createHoverBike(); break;
+                case "APC": loadedObject = createAPC(); break;
+                case "Sand Boat": loadedObject = createSandBoat(); break;
+                // Weapons category
+                case "Makeshift Machete": loadedObject = createMakeshiftMachete(); break;
+                case "Pistol Body": loadedObject = createPistolBody(); break;
+                case "Scope Attachment": loadedObject = createScopeAttachment(); break;
+                case "Laser Pistol": loadedObject = createLaserPistol(); break;
+                case "Energy Sword": loadedObject = createEnergySword(); break;
+                case "Dwarven Axe": loadedObject = createDwarvenAxe(); break;
+                case "Magic Staff": loadedObject = createMagicStaff(); break;
+                // Effects category
+                case "Candle Flame": loadedObject = createCandleFlame(); break;
+                case "Dust Cloud": loadedObject = createDustCloud(); break;
+                case "Blood Splat Decal": loadedObject = createBloodSplatDecal(); break;
+                case "Burning Barrel Fire": loadedObject = createBurningBarrelFire(); break;
+                case "Warp Tunnel Effect": loadedObject = createWarpTunnelEffect(); break;
+                case "Laser Beam": loadedObject = createLaserBeam(); break;
+                case "Gold Sparkle": loadedObject = createGoldSparkle(); break;
+                case "Steam Vent": loadedObject = createSteamVent(); break;
+                default: console.warn("Unknown object type in data:", objData.type); break;
+            }
+            if (loadedObject) {
+                // Apply stored position
+                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);
                 }
+                // Apply stored rotation
+                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');
                 }
+                // Apply custom scale if it's a new object (not loading from save)
+                if (isNewObject && window.CUSTOM_SCALE && window.CUSTOM_SCALE !== 1.0) {
+                    loadedObject.scale.set(window.CUSTOM_SCALE, window.CUSTOM_SCALE, window.CUSTOM_SCALE);
+                }
+                // Apply custom rotation if it's a new object
+                if (isNewObject && window.CUSTOM_ROTATION_Y) {
+                    loadedObject.rotation.y = window.CUSTOM_ROTATION_Y;
                 }
+                loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
+                scene.add(loadedObject);
+                if (isNewObject) newlyPlacedObjects.push(loadedObject);
+                return loadedObject;
             }
+            return null;
+        }