Update index.html

index.html

@@ -1,1295 +1,4 @@
-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>
+<!DOCTYPE html>
 <html>
 <head>
     <title>Three.js Infinite World</title>
@@ -1297,32 +6,22 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
         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;
+            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>
-        // Poll the shared game state every 5 seconds (for demonstration)
         function pollGameState() {
             console.log("Polling updated game state:", window.GAME_STATE);
-            // Here you could update the scene based on the new state.
         }
         setInterval(pollGameState, 5000);
     </script>
 </head>
 <body>
-    <div class="info-panel">
-        WASD or Arrow Keys to move | Click to place objects
-    </div>
+    <div class="info-panel">WASD or Arrow Keys to move | Click to place objects</div>
 
     <script type="importmap">
         {
@@ -1340,14 +39,11 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
         let raycaster, mouse;
         const keysPressed = {};
         const playerSpeed = 0.15;
-        let newlyPlacedObjects = []; // Track objects added THIS session for saving
+        let newlyPlacedObjects = [];
         const placeholderPlots = new Set();
-        const groundMeshes = {}; // Store ground mesh references
-
-        // --- Session Storage Key ---
+        const groundMeshes = {};
         const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
-
-        // --- Injected State from Streamlit ---
+        
         const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
         const plotsMetadata = window.PLOTS_METADATA || [];
         const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
@@ -1356,75 +52,29 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
         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
-            })
+            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() {
@@ -1452,14 +102,12 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
             loadInitialObjects();
             restoreUnsavedState();
 
-            // Event Listeners
             document.addEventListener('mousemove', onMouseMove, false);
             document.addEventListener('click', onDocumentClick, false);
             window.addEventListener('resize', onWindowResize, false);
             document.addEventListener('keydown', onKeyDown);
             document.addEventListener('keyup', onKeyUp);
 
-            // Define functions callable by Streamlit
             window.teleportPlayer = teleportPlayer;
             window.getSaveDataAndPosition = getSaveDataAndPosition;
             window.getSaveDataForNamedPlot = getSaveDataForNamedPlot;
@@ -1582,13 +230,10 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
         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 "Fence Post": loadedObject = createFence động viên Post(); break;
                 case "Cyberpunk Wall Panel": loadedObject = createCyberpunkWallPanel(); break;
                 case "Modular Hab Block": loadedObject = createModularHabBlock(); break;
                 case "MegaCorp Skyscraper": loadedObject = createMegaCorpSkyscraper(); break;
@@ -1597,15 +242,11 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 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;
@@ -1614,8 +255,6 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 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;
@@ -1624,8 +263,6 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 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;
@@ -1634,8 +271,6 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 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;
@@ -1643,8 +278,6 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 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;
@@ -1653,30 +286,26 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 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;
                 }
@@ -1687,4 +316,446 @@ const innerFlameGeo = new THREE.ConeGeometry(0.05, 0.15, 8);
                 return loadedObject;
             }
             return null;
-        }
+        }
+
+        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 createCyberpunkWallPanel() {
+            const base = createObjectBase("Cyberpunk Wall Panel");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            const panelGeo = new THREE.BoxGeometry(3, 4, 0.3);
+            const panel = new THREE.Mesh(panelGeo, materials.metal);
+            panel.castShadow = true;
+            panel.receiveShadow = true;
+            group.add(panel);
+            const trimGeo = new THREE.BoxGeometry(3.2, 0.1, 0.4);
+            const topTrim = new THREE.Mesh(trimGeo, materials.neonGlow);
+            topTrim.position.y = 2;
+            group.add(topTrim);
+            const bottomTrim = new THREE.Mesh(trimGeo, materials.neonGlow);
+            bottomTrim.position.y = -2;
+            group.add(bottomTrim);
+            const detailGeo = new THREE.BoxGeometry(2.5, 0.1, 0.1);
+            for (let i = 0; i < 4; i++) {
+                const detail = new THREE.Mesh(detailGeo, materials.metal);
+                detail.position.y = -1.5 + i;
+                detail.position.z = 0.2;
+                group.add(detail);
+            }
+            group.position.y = 2;
+            return group;
+        }
+
+        function createModularHabBlock() {
+            const base = createObjectBase("Modular Hab Block");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            const buildingGeo = new THREE.BoxGeometry(5, 5, 5);
+            const building = new THREE.Mesh(buildingGeo, materials.concrete);
+            building.castShadow = true;
+            building.receiveShadow = true;
+            group.add(building);
+            const windowGeo = new THREE.BoxGeometry(1, 1, 0.1);
+            const windowPositions = [
+                [-1.5, 1.5, 2.51], [0, 1.5, 2.51], [1.5, 1.5, 2.51],
+                [-1.5, 0, 2.51], [0, 0, 2.51], [1.5, 0, 2.51],
+                [-1.5, -1.5, 2.51], [0, -1.5, 2.51], [1.5, -1.5, 2.51]
+            ];
+            windowPositions.forEach(pos => {
+                const window = new THREE.Mesh(windowGeo, materials.glass);
+                window.position.set(...pos);
+                group.add(window);
+            });
+            const acGeo = new THREE.BoxGeometry(1.5, 0.8, 1.2);
+            const ac = new THREE.Mesh(acGeo, materials.metal);
+            ac.position.set(1.5, 2.9, 1.5);
+            group.add(ac);
+            const roofAccessGeo = new THREE.BoxGeometry(1.2, 1.5, 1.2);
+            const roofAccess = new THREE.Mesh(roofAccessGeo, materials.concrete);
+            roofAccess.position.set(-1.5, 3.25, 1.5);
+            group.add(roofAccess);
+            group.position.y = 2.5;
+            return group;
+        }
+
+        function createMagicStaff() {
+            const base = createObjectBase("Magic Staff");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            const poleGeo = new THREE.CylinderGeometry(0.05, 0.06, 1.8, 8);
+            const pole = new THREE.Mesh(poleGeo, materials.wood);
+            pole.castShadow = true;
+            pole.receiveShadow = true;
+            group.add(pole);
+            const orbGeo = new THREE.IcosahedronGeometry(0.15, 1);
+            const orbMat = new THREE.MeshStandardMaterial({
+                color: 0x9900FF,
+                roughness: 0.2,
+                metalness: 0.5,
+                emissive: 0x6600CC,
+                emissiveIntensity: 0.5,
+                transparent: true,
+                opacity: 0.7
+            });
+            const orb = new THREE.Mesh(orbGeo, orbMat);
+            orb.position.y = 0.9;
+            orb.castShadow = true;
+            orb.receiveShadow = true;
+            group.add(orb);
+            const numClaws = 4;
+            for (let i = 0; i < numClaws; i++) {
+                const angle = (i / numClaws) * Math.PI * 2;
+                const clawGeo = new THREE.CylinderGeometry(0.02, 0.01, 0.2, 4);
+                const claw = new THREE.Mesh(clawGeo, materials.metal);
+                claw.position.set(
+                    Math.cos(angle) * 0.1,
+                    0.82,
+                    Math.sin(angle) * 0.1
+                );
+                claw.rotation.x = Math.PI/6;
+                claw.rotation.y = -angle;
+                claw.castShadow = true;
+                claw.receiveShadow = true;
+                group.add(claw);
+            }
+            group.position.y = 0.5;
+            return group;
+        }
+
+        function createCandleFlame() {
+            const base = createObjectBase("Candle Flame");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            const candleGeo = new THREE.CylinderGeometry(0.1, 0.1, 0.3, 8);
+            const candle = new THREE.Mesh(candleGeo, new THREE.MeshStandardMaterial({
+                color: 0xF8F8F0,
+                roughness: 0.7
+            }));
+            candle.castShadow = true;
+            candle.receiveShadow = true;
+            group.add(candle);
+            const flameGeo = new THREE.ConeGeometry(0.07, 0.2, 8);
+            const flameMat = new THREE.MeshStandardMaterial({
+                color: 0xFF9900,
+                emissive: 0xFF6600,
+                emissiveIntensity: 1.0,
+                transparent: true,
+                opacity: 0.9
+            });
+            const flame = new THREE.Mesh(flameGeo, flameMat);
+            flame.position.y = 0.25;
+            group.add(flame);
+            const innerFlameGeo = new THREE.ConeGeometry(0.03, 0.1, 8);
+            const innerFlameMat = new THREE.MeshStandardMaterial({
+                color: 0xFFFF66,
+                emissive: 0xFFFF00,
+                emissiveIntensity: 1.0,
+                transparent: true,
+                opacity: 0.9
+            });
+            const innerFlame = new THREE.Mesh(innerFlameGeo, innerFlameMat);
+            innerFlame.position.y = 0.05;
+            flame.add(innerFlame);
+            const light = new THREE.PointLight(0xFF9933, 0.7, 1.5);
+            light.position.y = 0.3;
+            group.add(light);
+            group.position.y = 0.15;
+            return group;
+        }
+
+        function createPlaceholderObject(type) {
+            console.log(`Placeholder for ${type}: Implementation pending`);
+            const base = createObjectBase(type);
+            const geometry = new THREE.BoxGeometry(1, 1, 1);
+            const material = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.8 });
+            const mesh = new THREE.Mesh(geometry, material);
+            Object.assign(mesh, base);
+            mesh.position.y = 0.5;
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            return mesh;
+        }
+
+        function createMegaCorpSkyscraper() { return createPlaceholderObject("MegaCorp Skyscraper"); }
+        function createCastleWallSection() { return createPlaceholderObject("Castle Wall Section"); }
+        function createWoodenDoor() { return createPlaceholderObject("Wooden Door"); }
+        function createHouseRoofSection() { return createPlaceholderObject("House Roof Section"); }
+        function createConcreteBunkerWall() { return createPlaceholderObject("Concrete Bunker Wall"); }
+        function createDamagedHouseFacade() { return createPlaceholderObject("Damaged House Facade"); }
+        function createPineTree() { return createPlaceholderObject("Pine Tree"); }
+        function createBoulder() { return createPlaceholderObject("Boulder"); }
+        function createAlienPlant() { return createPlaceholderObject("Alien Plant"); }
+        function createFloatingRockPlatform() { return createPlaceholderObject("Floating Rock Platform"); }
+        function createRubblePile() { return createPlaceholderObject("Rubble Pile"); }
+        function createRooftopACUnit() { return createPlaceholderObject("Rooftop AC Unit"); }
+        function createHolographicWindowDisplay() { return createPlaceholderObject("Holographic Window Display"); }
+        function createJerseyBarrier() { return createPlaceholderObject("Jersey Barrier"); }
+        function createOilDrum() { return createPlaceholderObject("Oil Drum"); }
+        function createCannedFood() { return createPlaceholderObject("Canned Food"); }
+        function createTreasureChest() { return createPlaceholderObject("Treasure Chest"); }
+        function createWallTorch() { return createPlaceholderObject("Wall Torch"); }
+        function createBonePile() { return createPlaceholderObject("Bone Pile"); }
+        function createKingFigure() { return createPlaceholderObject("King Figure"); }
+        function createSoldierFigure() { return createPlaceholderObject("Soldier Figure"); }
+        function createMageFigure() { return createPlaceholderObject("Mage Figure"); }
+        function createZombieFigure() { return createPlaceholderObject("Zombie Figure"); }
+        function createSurvivorFigure() { return createPlaceholderObject("Survivor Figure"); }
+        function createDwarfMinerFigure() { return createPlaceholderObject("Dwarf Miner Figure"); }
+        function createUndeadKnightFigure() { return createPlaceholderObject("Undead Knight Figure"); }
+        function createHeroFigure() { return createPlaceholderObject("Hero Figure"); }
+        function createWoodenCart() { return createPlaceholderObject("Wooden Cart"); }
+        function createBallista() { return createPlaceholderObject("Ballista"); }
+        function createSiegeTower() { return createPlaceholderObject("Siege Tower"); }
+        function createBuggyFrame() { return createPlaceholderObject("Buggy Frame"); }
+        function createMotorbike() { return createPlaceholderObject("Motorbike"); }
+        function createHoverBike() { return createPlaceholderObject("Hover Bike"); }
+        function createAPC() { return createPlaceholderObject("APC"); }
+        function createSandBoat() { return createPlaceholderObject("Sand Boat"); }
+        function createMakeshiftMachete() { return createPlaceholderObject("Makeshift Machete"); }
+        function createPistolBody() { return createPlaceholderObject("Pistol Body"); }
+        function createScopeAttachment() { return createPlaceholderObject("Scope Attachment"); }
+        function createLaserPistol() { return createPlaceholderObject("Laser Pistol"); }
+        function createEnergySword() { return createPlaceholderObject("Energy Sword"); }
+        function createDwarvenAxe() { return createPlaceholderObject("Dwarven Axe"); }
+        function createDustCloud() { return createPlaceholderObject("Dust Cloud"); }
+        function createBloodSplatDecal() { return createPlaceholderObject("Blood Splat Decal"); }
+        function createBurningBarrelFire() { return createPlaceholderObject("Burning Barrel Fire"); }
+        function createWarpTunnelEffect() { return createPlaceholderObject("Warp Tunnel Effect"); }
+        function createLaserBeam() { return createPlaceholderObject("Laser Beam"); }
+        function createGoldSparkle() { return createPlaceholderObject("Gold Sparkle"); }
+        function createSteamVent() { return createPlaceholderObject("Steam Vent"); }
+
+        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;
+                    case "Cyberpunk Wall Panel": newObjectToPlace = createCyberpunkWallPanel(); break;
+                    case "Modular Hab Block": newObjectToPlace = createModularHabBlock(); break;
+                    case "MegaCorp Skyscraper": newObjectToPlace = createMegaCorpSkyscraper(); break;
+                    case "Castle Wall Section": newObjectToPlace = createCastleWallSection(); break;
+                    case "Wooden Door": newObjectToPlace = createWoodenDoor(); break;
+                    case "House Roof Section": newObjectToPlace = createHouseRoofSection(); break;
+                    case "Concrete Bunker Wall": newObjectToPlace = createConcreteBunkerWall(); break;
+                    case "Damaged House Facade": newObjectToPlace = createDamagedHouseFacade(); break;
+                    case "Pine Tree": newObjectToPlace = createPineTree(); break;
+                    case "Boulder": newObjectToPlace = createBoulder(); break;
+                    case "Alien Plant": newObjectToPlace = createAlienPlant(); break;
+                    case "Floating Rock Platform": newObjectToPlace = createFloatingRockPlatform(); break;
+                    case "Rubble Pile": newObjectToPlace = createRubblePile(); break;
+                    case "Rooftop AC Unit": newObjectToPlace = createRooftopACUnit(); break;
+                    case "Holographic Window Display": newObjectხ4>0.5, 0.5)).toFixed(2);
+                    const newObjectToPlace = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({color: 0xff0000}));
+                    newObjectToPlace.position.copy(intersectPoint);
+                    newObjectToPlace.position.y += 0.01;
+                    if (window.CUSTOM_SCALE && window.CUSTOM_SCALE !== 1.0) {
+                        newObjectToPlace.scale.set(window.CUSTOM_SCALE, window.CUSTOM_SCALE, window.CUSTOM_SCALE);
+                    }
+                    if (window.CUSTOM_ROTATION_Y) {
+                        newObjectToPlace.rotation.y = window.CUSTOM_ROTATION_Y;
+                    }
+                    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 getSaveDataForNamedPlot() {
+            return getSaveDataAndPosition();
+        }
+
+        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>