Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Three.js Infinite World</title> | |
| <style> | |
| body { margin: 0; overflow: hidden; } | |
| canvas { display: block; } | |
| </style> | |
| <!-- New: Polling function for game state --> | |
| <script> | |
| // 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> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/[email protected]/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| let scene, camera, renderer, playerMesh; | |
| let raycaster, mouse; | |
| const keysPressed = {}; | |
| const playerSpeed = 0.15; | |
| let newlyPlacedObjects = []; // Track objects added THIS session for saving | |
| const placeholderPlots = new Set(); | |
| const groundMeshes = {}; // Store ground mesh references | |
| // --- Session Storage Key --- | |
| 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"; | |
| const customScale = window.CUSTOM_SCALE || 1.0; | |
| const customRotationY = window.CUSTOM_ROTATION_Y || 0.0; | |
| const plotWidth = window.PLOT_WIDTH || 50.0; | |
| const plotDepth = window.PLOT_DEPTH || 50.0; | |
| const groundMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide | |
| }); | |
| const placeholderGroundMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide | |
| }); | |
| function init() { | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0xabcdef); | |
| const aspect = window.innerWidth / window.innerHeight; | |
| camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000); | |
| camera.position.set(0, 15, 20); | |
| camera.lookAt(0, 0, 0); | |
| scene.add(camera); | |
| setupLighting(); | |
| setupInitialGround(); | |
| setupPlayer(); | |
| raycaster = new THREE.Raycaster(); | |
| mouse = new THREE.Vector2(); | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.shadowMap.enabled = true; | |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; | |
| document.body.appendChild(renderer.domElement); | |
| 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; | |
| window.resetNewlyPlacedObjects = resetNewlyPlacedObjects; | |
| console.log("Three.js Initialized. World ready."); | |
| animate(); | |
| } | |
| function setupLighting() { | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); | |
| directionalLight.position.set(50, 150, 100); | |
| directionalLight.castShadow = true; | |
| directionalLight.shadow.mapSize.width = 4096; | |
| directionalLight.shadow.mapSize.height = 4096; | |
| directionalLight.shadow.camera.near = 0.5; | |
| directionalLight.shadow.camera.far = 500; | |
| directionalLight.shadow.camera.left = -150; | |
| directionalLight.shadow.camera.right = 150; | |
| directionalLight.shadow.camera.top = 150; | |
| directionalLight.shadow.camera.bottom = -150; | |
| directionalLight.shadow.bias = -0.001; | |
| scene.add(directionalLight); | |
| } | |
| function setupInitialGround() { | |
| console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`); | |
| plotsMetadata.forEach(plot => { | |
| createGroundPlane(plot.grid_x, plot.grid_z, false); | |
| }); | |
| if (plotsMetadata.length === 0) { | |
| createGroundPlane(0, 0, false); | |
| } | |
| } | |
| function createGroundPlane(gridX, gridZ, isPlaceholder) { | |
| const gridKey = `${gridX}_${gridZ}`; | |
| if (groundMeshes[gridKey]) return; | |
| console.log(`Creating ${isPlaceholder ? 'placeholder' : 'initial'} ground at ${gridX}, ${gridZ}`); | |
| const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth); | |
| const material = isPlaceholder ? placeholderGroundMaterial : groundMaterial; | |
| const groundMesh = new THREE.Mesh(groundGeometry, material); | |
| groundMesh.rotation.x = -Math.PI / 2; | |
| groundMesh.position.y = -0.05; | |
| groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0; | |
| groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0; | |
| groundMesh.receiveShadow = true; | |
| groundMesh.userData.gridKey = gridKey; | |
| scene.add(groundMesh); | |
| groundMeshes[gridKey] = groundMesh; | |
| if (isPlaceholder) placeholderPlots.add(gridKey); | |
| } | |
| function setupPlayer() { | |
| const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8); | |
| const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 }); | |
| playerMesh = new THREE.Mesh(playerGeo, playerMat); | |
| playerMesh.position.set(plotWidth / 2, 0.4 + 0.8/2, plotDepth/2); | |
| playerMesh.castShadow = true; | |
| playerMesh.receiveShadow = true; | |
| scene.add(playerMesh); | |
| } | |
| function loadInitialObjects() { | |
| console.log(`Loading ${allInitialObjects.length} initial objects from Python.`); | |
| allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); }); | |
| console.log("Finished loading initial objects."); | |
| } | |
| function createAndPlaceObject(objData, isNewObject) { | |
| let loadedObject = null; | |
| switch (objData.type) { | |
| case "Simple House": loadedObject = createSimpleHouse(); break; | |
| case "Cyberpunk Wall Panel": loadedObject = createCyberpunkWallPanel(); break; | |
| case "Modular Hab Block": loadedObject = createModularHabBlock(); break; | |
| case "MegaCorp Skyscraper": loadedObject = createMegaCorpSkyscraper(); break; | |
| case "Castle Wall Section": loadedObject = createCastleWallSection(); break; | |
| case "Wooden Door": loadedObject = createWoodenDoor(); break; | |
| case "House Roof Section": loadedObject = createHouseRoofSection(); break; | |
| case "Concrete Bunker Wall": loadedObject = createConcreteBunkerWall(); break; | |
| case "Damaged House Facade": loadedObject = createDamagedHouseFacade(); break; | |
| case "Tree": loadedObject = createTree(); break; | |
| case "Rock": loadedObject = createRock(); break; | |
| 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; | |
| case "Fence Post": loadedObject = createFencePost(); break; | |
| case "Rooftop AC Unit": loadedObject = createRooftopACUnit(); break; | |
| case "Holographic Window Display": loadedObject = createHolographicWindowDisplay(); break; | |
| case "Jersey Barrier": loadedObject = createJerseyBarrier(); break; | |
| case "Oil Drum": loadedObject = createOilDrum(); break; | |
| case "Canned Food": loadedObject = createCannedFood(); break; | |
| case "Treasure Chest": loadedObject = createTreasureChest(); break; | |
| case "Wall Torch": loadedObject = createWallTorch(); break; | |
| case "Bone Pile": loadedObject = createBonePile(); break; | |
| case "King Figure": loadedObject = createKingFigure(); break; | |
| case "Soldier Figure": loadedObject = createSoldierFigure(); break; | |
| case "Mage Figure": loadedObject = createMageFigure(); break; | |
| case "Zombie Figure": loadedObject = createZombieFigure(); break; | |
| case "Survivor Figure": loadedObject = createSurvivorFigure(); break; | |
| case "Dwarf Miner Figure": loadedObject = createDwarfMinerFigure(); break; | |
| case "Undead Knight Figure": loadedObject = createUndeadKnightFigure(); break; | |
| case "Hero Figure": loadedObject = createHeroFigure(); break; | |
| case "Wooden Cart": loadedObject = createWoodenCart(); break; | |
| case "Ballista": loadedObject = createBallista(); break; | |
| case "Siege Tower": loadedObject = createSiegeTower(); break; | |
| case "Buggy Frame": loadedObject = createBuggyFrame(); break; | |
| case "Motorbike": loadedObject = createMotorbike(); break; | |
| case "Hover Bike": loadedObject = createHoverBike(); break; | |
| case "APC": loadedObject = createAPC(); break; | |
| case "Sand Boat": loadedObject = createSandBoat(); break; | |
| case "Makeshift Machete": loadedObject = createMakeshiftMachete(); break; | |
| case "Pistol Body": loadedObject = createPistolBody(); break; | |
| case "Scope Attachment": loadedObject = createScopeAttachment(); break; | |
| case "Laser Pistol": loadedObject = createLaserPistol(); break; | |
| case "Energy Sword": loadedObject = createEnergySword(); break; | |
| case "Dwarven Axe": loadedObject = createDwarvenAxe(); break; | |
| case "Magic Staff": loadedObject = createMagicStaff(); break; | |
| case "Candle Flame": loadedObject = createCandleFlame(); break; | |
| case "Dust Cloud": loadedObject = createDustCloud(); break; | |
| case "Blood Splat Decal": loadedObject = createBloodSplatDecal(); break; | |
| case "Burning Barrel Fire": loadedObject = createBurningBarrelFire(); break; | |
| case "Warp Tunnel Effect": loadedObject = createWarpTunnelEffect(); break; | |
| case "Laser Beam": loadedObject = createLaserBeam(); break; | |
| case "Gold Sparkle": loadedObject = createGoldSparkle(); break; | |
| case "Steam Vent": loadedObject = createSteamVent(); break; | |
| default: console.warn("Unknown object type in data:", objData.type); break; | |
| } | |
| if (loadedObject) { | |
| if (objData.position && objData.position.x !== undefined) { | |
| loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z); | |
| } else if (objData.pos_x !== undefined) { | |
| loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z); | |
| } | |
| if (objData.rotation) { | |
| loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ'); | |
| } else if (objData.rot_x !== undefined) { | |
| loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ'); | |
| } | |
| loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id; | |
| scene.add(loadedObject); | |
| if (isNewObject) newlyPlacedObjects.push(loadedObject); | |
| return loadedObject; | |
| } | |
| return null; | |
| } | |
| function saveUnsavedState() { | |
| try { | |
| const stateToSave = newlyPlacedObjects.map(obj => ({ | |
| obj_id: obj.userData.obj_id, | |
| type: obj.userData.type, | |
| position: { x: obj.position.x, y: obj.position.y, z: obj.position.z }, | |
| rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order } | |
| })); | |
| sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave)); | |
| console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`); | |
| } catch (e) { | |
| console.error("Error saving state to sessionStorage:", e); | |
| } | |
| } | |
| function restoreUnsavedState() { | |
| try { | |
| const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY); | |
| if (savedState) { | |
| console.log("Found unsaved state in sessionStorage. Restoring..."); | |
| const objectsToRestore = JSON.parse(savedState); | |
| if (Array.isArray(objectsToRestore)) { | |
| newlyPlacedObjects = []; | |
| let count = 0; | |
| objectsToRestore.forEach(objData => { | |
| if(createAndPlaceObject(objData, true)) { count++; } | |
| }); | |
| console.log(`Restored ${count} objects.`); | |
| } | |
| } else { | |
| console.log("No unsaved state found in sessionStorage."); | |
| } | |
| } catch (e) { | |
| console.error("Error restoring state from sessionStorage:", e); | |
| sessionStorage.removeItem(SESSION_STORAGE_KEY); | |
| } | |
| } | |
| function clearUnsavedState() { | |
| sessionStorage.removeItem(SESSION_STORAGE_KEY); | |
| newlyPlacedObjects = []; | |
| console.log("Cleared unsaved state from memory and sessionStorage."); | |
| } | |
| function createObjectBase(type) { | |
| return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } }; | |
| } | |
| // --- Existing Object Creation Functions --- | |
| 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; | |
| } | |
| // --- New Object Creation Functions --- | |
| // Buildings | |
| function createCyberpunkWallPanel() { | |
| const base = createObjectBase("Cyberpunk Wall Panel"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00b7eb, roughness:0.5, metalness:0.8}); | |
| const panel = new THREE.Mesh(new THREE.BoxGeometry(2,3,0.2), mat); | |
| Object.assign(panel, base); | |
| panel.position.y = 1.5; | |
| panel.castShadow = true; | |
| panel.receiveShadow = true; | |
| return panel; | |
| } | |
| function createModularHabBlock() { | |
| const base = createObjectBase("Modular Hab Block"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat = new THREE.MeshStandardMaterial({color:0x666666, roughness:0.7}); | |
| const block = new THREE.Mesh(new THREE.BoxGeometry(3,2,3), mat); | |
| block.position.y = 1; | |
| block.castShadow = true; | |
| block.receiveShadow = true; | |
| group.add(block); | |
| return group; | |
| } | |
| function createMegaCorpSkyscraper() { | |
| const base = createObjectBase("MegaCorp Skyscraper"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat = new THREE.MeshStandardMaterial({color:0x333399, roughness:0.4, metalness:0.9}); | |
| const tower = new THREE.Mesh(new THREE.BoxGeometry(4,10,4), mat); | |
| tower.position.y = 5; | |
| tower.castShadow = true; | |
| tower.receiveShadow = true; | |
| group.add(tower); | |
| return group; | |
| } | |
| function createCastleWallSection() { | |
| const base = createObjectBase("Castle Wall Section"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x808080, roughness:0.8}); | |
| const wall = new THREE.Mesh(new THREE.BoxGeometry(5,3,1), mat); | |
| Object.assign(wall, base); | |
| wall.position.y = 1.5; | |
| wall.castShadow = true; | |
| wall.receiveShadow = true; | |
| return wall; | |
| } | |
| function createWoodenDoor() { | |
| const base = createObjectBase("Wooden Door"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x8b4513, roughness:0.9}); | |
| const door = new THREE.Mesh(new THREE.BoxGeometry(1,2,0.2), mat); | |
| Object.assign(door, base); | |
| door.position.y = 1; | |
| door.castShadow = true; | |
| door.receiveShadow = true; | |
| return door; | |
| } | |
| function createHouseRoofSection() { | |
| const base = createObjectBase("House Roof Section"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x800000, roughness:0.7}); | |
| const roof = new THREE.Mesh(new THREE.ConeGeometry(2,1,4), mat); | |
| Object.assign(roof, base); | |
| roof.position.y = 1; | |
| roof.rotation.y = Math.PI/4; | |
| roof.castShadow = true; | |
| roof.receiveShadow = true; | |
| return roof; | |
| } | |
| function createConcreteBunkerWall() { | |
| const base = createObjectBase("Concrete Bunker Wall"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.9}); | |
| const wall = new THREE.Mesh(new THREE.BoxGeometry(4,2,1), mat); | |
| Object.assign(wall, base); | |
| wall.position.y = 1; | |
| wall.castShadow = true; | |
| wall.receiveShadow = true; | |
| return wall; | |
| } | |
| function createDamagedHouseFacade() { | |
| const base = createObjectBase("Damaged House Facade"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa, roughness:0.9}); | |
| const facade = new THREE.Mesh(new THREE.BoxGeometry(3,2,0.3), mat); | |
| Object.assign(facade, base); | |
| facade.position.y = 1; | |
| facade.castShadow = true; | |
| facade.receiveShadow = true; | |
| return facade; | |
| } | |
| // Nature | |
| function createPineTree() { | |
| const base = createObjectBase("Pine 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:0x006400, roughness:0.8}); | |
| const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.3,1.5,8), mat1); | |
| trunk.position.y = 0.75; | |
| trunk.castShadow = true; | |
| trunk.receiveShadow = true; | |
| group.add(trunk); | |
| const foliage = new THREE.Mesh(new THREE.ConeGeometry(1,2,8), mat2); | |
| foliage.position.y = 2; | |
| foliage.castShadow = true; | |
| foliage.receiveShadow = true; | |
| group.add(foliage); | |
| return group; | |
| } | |
| function createBoulder() { | |
| const base = createObjectBase("Boulder"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x666666, roughness:0.8}); | |
| const boulder = new THREE.Mesh(new THREE.IcosahedronGeometry(1,0), mat); | |
| Object.assign(boulder, base); | |
| boulder.position.y = 0.5; | |
| boulder.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0); | |
| boulder.castShadow = true; | |
| boulder.receiveShadow = true; | |
| return boulder; | |
| } | |
| function createAlienPlant() { | |
| const base = createObjectBase("Alien Plant"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00ff00, roughness:0.7}); | |
| const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,1,8), mat); | |
| stem.position.y = 0.5; | |
| stem.castShadow = true; | |
| stem.receiveShadow = true; | |
| group.add(stem); | |
| const head = new THREE.Mesh(new THREE.SphereGeometry(0.3,8,8), mat); | |
| head.position.y = 1; | |
| head.castShadow = true; | |
| head.receiveShadow = true; | |
| group.add(head); | |
| return group; | |
| } | |
| function createFloatingRockPlatform() { | |
| const base = createObjectBase("Floating Rock Platform"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.8}); | |
| const platform = new THREE.Mesh(new THREE.BoxGeometry(3,0.5,3), mat); | |
| Object.assign(platform, base); | |
| platform.position.y = 2; | |
| platform.castShadow = true; | |
| platform.receiveShadow = true; | |
| return platform; | |
| } | |
| function createRubblePile() { | |
| const base = createObjectBase("Rubble Pile"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat = new THREE.MeshStandardMaterial({color:0x777777, roughness:0.9}); | |
| for (let i = 0; i < 5; i++) { | |
| const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.3,0), mat); | |
| rock.position.set(Math.random()*0.5-0.25, Math.random()*0.3, Math.random()*0.5-0.25); | |
| rock.castShadow = true; | |
| rock.receiveShadow = true; | |
| group.add(rock); | |
| } | |
| return group; | |
| } | |
| // Props | |
| function createRooftopACUnit() { | |
| const base = createObjectBase("Rooftop AC Unit"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x666666, roughness:0.7, metalness:0.5}); | |
| const unit = new THREE.Mesh(new THREE.BoxGeometry(1,0.8,1), mat); | |
| Object.assign(unit, base); | |
| unit.position.y = 0.4; | |
| unit.castShadow = true; | |
| unit.receiveShadow = true; | |
| return unit; | |
| } | |
| function createHolographicWindowDisplay() { | |
| const base = createObjectBase("Holographic Window Display"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00b7eb, roughness:0.5, transparent: true, opacity: 0.7}); | |
| const display = new THREE.Mesh(new THREE.PlaneGeometry(1,1), mat); | |
| Object.assign(display, base); | |
| display.position.y = 1; | |
| display.castShadow = false; | |
| display.receiveShadow = false; | |
| return display; | |
| } | |
| function createJerseyBarrier() { | |
| const base = createObjectBase("Jersey Barrier"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x888888, roughness:0.9}); | |
| const barrier = new THREE.Mesh(new THREE.BoxGeometry(2,0.8,0.5), mat); | |
| Object.assign(barrier, base); | |
| barrier.position.y = 0.4; | |
| barrier.castShadow = true; | |
| barrier.receiveShadow = true; | |
| return barrier; | |
| } | |
| function createOilDrum() { | |
| const base = createObjectBase("Oil Drum"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.7, metalness:0.3}); | |
| const drum = new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4,1,12), mat); | |
| Object.assign(drum, base); | |
| drum.position.y = 0.5; | |
| drum.castShadow = true; | |
| drum.receiveShadow = true; | |
| return drum; | |
| } | |
| function createCannedFood() { | |
| const base = createObjectBase("Canned Food"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa, roughness:0.7, metalness:0.5}); | |
| const can = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,0.2,12), mat); | |
| Object.assign(can, base); | |
| can.position.y = 0.1; | |
| can.castShadow = true; | |
| can.receiveShadow = true; | |
| return can; | |
| } | |
| function createTreasureChest() { | |
| const base = createObjectBase("Treasure Chest"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x8b4513, roughness:0.8}); | |
| const chest = new THREE.Mesh(new THREE.BoxGeometry(1,0.6,0.8), mat); | |
| Object.assign(chest, base); | |
| chest.position.y = 0.3; | |
| chest.castShadow = true; | |
| chest.receiveShadow = true; | |
| return chest; | |
| } | |
| function createWallTorch() { | |
| const base = createObjectBase("Wall Torch"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat1 = new THREE.MeshStandardMaterial({color:0xdeb887, roughness:0.9}); | |
| const mat2 = new THREE.MeshStandardMaterial({color:0xff4500, roughness:0.5}); | |
| const holder = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.5,0.1), mat1); | |
| holder.position.y = 0.25; | |
| holder.castShadow = true; | |
| holder.receiveShadow = true; | |
| group.add(holder); | |
| const flame = new THREE.Mesh(new THREE.SphereGeometry(0.1,8,8), mat2); | |
| flame.position.y = 0.5; | |
| flame.castShadow = true; | |
| flame.receiveShadow = false; | |
| group.add(flame); | |
| return group; | |
| } | |
| function createBonePile() { | |
| const base = createObjectBase("Bone Pile"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat = new THREE.MeshStandardMaterial({color:0xdddddd, roughness:0.9}); | |
| for (let i = 0; i < 3; i++) { | |
| const bone = new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,0.3,8), mat); | |
| bone.position.set(Math.random()*0.2-0.1, Math.random()*0.1, Math.random()*0.2-0.1); | |
| bone.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, Math.random()*Math.PI); | |
| bone.castShadow = true; | |
| bone.receiveShadow = true; | |
| group.add(bone); | |
| } | |
| return group; | |
| } | |
| // Characters | |
| function createKingFigure() { | |
| const base = createObjectBase("King Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xffd700, roughness:0.6}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createSoldierFigure() { | |
| const base = createObjectBase("Soldier Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x228b22, roughness:0.7}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createMageFigure() { | |
| const base = createObjectBase("Mage Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x800080, roughness:0.7}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createZombieFigure() { | |
| const base = createObjectBase("Zombie Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x90ee90, roughness:0.8}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createSurvivorFigure() { | |
| const base = createObjectBase("Survivor Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x4682b4, roughness:0.7}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createDwarfMinerFigure() { | |
| const base = createObjectBase("Dwarf Miner Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x8b4513, roughness:0.7}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.5,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.35; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createUndeadKnightFigure() { | |
| const base = createObjectBase("Undead Knight Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.8}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| function createHeroFigure() { | |
| const base = createObjectBase("Hero Figure"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xff0000, roughness:0.6}); | |
| const figure = new THREE.Mesh(new THREE.CapsuleGeometry(0.2,0.6,4,8), mat); | |
| Object.assign(figure, base); | |
| figure.position.y = 0.4; | |
| figure.castShadow = true; | |
| figure.receiveShadow = true; | |
| return figure; | |
| } | |
| // Vehicles | |
| function createWoodenCart() { | |
| const base = createObjectBase("Wooden Cart"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x8b4513, roughness:0.8}); | |
| const cart = new THREE.Mesh(new THREE.BoxGeometry(2,0.8,1), mat); | |
| Object.assign(cart, base); | |
| cart.position.y = 0.4; | |
| cart.castShadow = true; | |
| cart.receiveShadow = true; | |
| return cart; | |
| } | |
| function createBallista() { | |
| const base = createObjectBase("Ballista"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xdeb887, roughness:0.8}); | |
| const ballista = new THREE.Mesh(new THREE.BoxGeometry(1.5,0.8,0.5), mat); | |
| Object.assign(ballista, base); | |
| ballista.position.y = 0.4; | |
| ballista.castShadow = true; | |
| ballista.receiveShadow = true; | |
| return ballista; | |
| } | |
| function createSiegeTower() { | |
| const base = createObjectBase("Siege Tower"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x8b4513, roughness:0.8}); | |
| const tower = new THREE.Mesh(new THREE.BoxGeometry(2,4,2), mat); | |
| Object.assign(tower, base); | |
| tower.position.y = 2; | |
| tower.castShadow = true; | |
| tower.receiveShadow = true; | |
| return tower; | |
| } | |
| function createBuggyFrame() { | |
| const base = createObjectBase("Buggy Frame"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x666666, roughness:0.7, metalness:0.5}); | |
| const frame = new THREE.Mesh(new THREE.BoxGeometry(2,0.5,1), mat); | |
| Object.assign(frame, base); | |
| frame.position.y = 0.25; | |
| frame.castShadow = true; | |
| frame.receiveShadow = true; | |
| return frame; | |
| } | |
| function createMotorbike() { | |
| const base = createObjectBase("Motorbike"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x333333, roughness:0.7, metalness:0.5}); | |
| const bike = new THREE.Mesh(new THREE.BoxGeometry(1.5,0.6,0.4), mat); | |
| Object.assign(bike, base); | |
| bike.position.y = 0.3; | |
| bike.castShadow = true; | |
| bike.receiveShadow = true; | |
| return bike; | |
| } | |
| function createHoverBike() { | |
| const base = createObjectBase("Hover Bike"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00b7eb, roughness:0.5, metalness:0.8}); | |
| const bike = new THREE.Mesh(new THREE.BoxGeometry(1.5,0.4,0.4), mat); | |
| Object.assign(bike, base); | |
| bike.position.y = 0.5; | |
| bike.castShadow = true; | |
| bike.receiveShadow = true; | |
| return bike; | |
| } | |
| function createAPC() { | |
| const base = createObjectBase("APC"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x2f4f4f, roughness:0.7, metalness:0.5}); | |
| const apc = new THREE.Mesh(new THREE.BoxGeometry(3,1.5,1.5), mat); | |
| Object.assign(apc, base); | |
| apc.position.y = 0.75; | |
| apc.castShadow = true; | |
| apc.receiveShadow = true; | |
| return apc; | |
| } | |
| function createSandBoat() { | |
| const base = createObjectBase("Sand Boat"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xdeb887, roughness:0.8}); | |
| const boat = new THREE.Mesh(new THREE.BoxGeometry(2,0.5,1), mat); | |
| Object.assign(boat, base); | |
| boat.position.y = 0.25; | |
| boat.castShadow = true; | |
| boat.receiveShadow = true; | |
| return boat; | |
| } | |
| // Weapons | |
| function createMakeshiftMachete() { | |
| const base = createObjectBase("Makeshift Machete"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x777777, roughness:0.7, metalness:0.5}); | |
| const machete = new THREE.Mesh(new THREE.BoxGeometry(0.8,0.05,0.2), mat); | |
| Object.assign(machete, base); | |
| machete.position.y = 0.1; | |
| machete.castShadow = true; | |
| machete.receiveShadow = true; | |
| return machete; | |
| } | |
| function createPistolBody() { | |
| const base = createObjectBase("Pistol Body"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x333333, roughness:0.7, metalness:0.5}); | |
| const pistol = new THREE.Mesh(new THREE.BoxGeometry(0.5,0.2,0.3), mat); | |
| Object.assign(pistol, base); | |
| pistol.position.y = 0.1; | |
| pistol.castShadow = true; | |
| pistol.receiveShadow = true; | |
| return pistol; | |
| } | |
| function createScopeAttachment() { | |
| const base = createObjectBase("Scope Attachment"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.7, metalness:0.5}); | |
| const scope = new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,0.3,8), mat); | |
| Object.assign(scope, base); | |
| scope.position.y = 0.15; | |
| scope.rotation.z = Math.PI/2; | |
| scope.castShadow = true; | |
| scope.receiveShadow = true; | |
| return scope; | |
| } | |
| function createLaserPistol() { | |
| const base = createObjectBase("Laser Pistol"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00b7eb, roughness:0.5, metalness:0.8}); | |
| const pistol = new THREE.Mesh(new THREE.BoxGeometry(0.5,0.2,0.3), mat); | |
| Object.assign(pistol, base); | |
| pistol.position.y = 0.1; | |
| pistol.castShadow = true; | |
| pistol.receiveShadow = true; | |
| return pistol; | |
| } | |
| function createEnergySword() { | |
| const base = createObjectBase("Energy Sword"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00ff00, roughness:0.5, transparent: true, opacity: 0.8}); | |
| const sword = new THREE.Mesh(new THREE.BoxGeometry(0.8,0.05,0.2), mat); | |
| Object.assign(sword, base); | |
| sword.position.y = 0.1; | |
| sword.castShadow = true; | |
| sword.receiveShadow = true; | |
| return sword; | |
| } | |
| function createDwarvenAxe() { | |
| const base = createObjectBase("Dwarven Axe"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.7, metalness:0.5}); | |
| const axe = new THREE.Mesh(new THREE.BoxGeometry(0.5,0.3,0.1), mat); | |
| Object.assign(axe, base); | |
| axe.position.y = 0.15; | |
| axe.castShadow = true; | |
| axe.receiveShadow = true; | |
| return axe; | |
| } | |
| function createMagicStaff() { | |
| const base = createObjectBase("Magic Staff"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat1 = new THREE.MeshStandardMaterial({color:0x8b4513, roughness:0.8}); | |
| const mat2 = new THREE.MeshStandardMaterial({color:0xff00ff, roughness:0.5}); | |
| const shaft = new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,1.5,8), mat1); | |
| shaft.position.y = 0.75; | |
| shaft.castShadow = true; | |
| shaft.receiveShadow = true; | |
| group.add(shaft); | |
| const gem = new THREE.Mesh(new THREE.SphereGeometry(0.1,8,8), mat2); | |
| gem.position.y = 1.5; | |
| gem.castShadow = true; | |
| gem.receiveShadow = true; | |
| group.add(gem); | |
| return group; | |
| } | |
| // Effects | |
| function createCandleFlame() { | |
| const base = createObjectBase("Candle Flame"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xff4500, roughness:0.5, transparent: true, opacity: 0.8}); | |
| const flame = new THREE.Mesh(new THREE.SphereGeometry(0.1,8,8), mat); | |
| Object.assign(flame, base); | |
| flame.position.y = 0.1; | |
| flame.castShadow = true; | |
| flame.receiveShadow = false; | |
| return flame; | |
| } | |
| function createDustCloud() { | |
| const base = createObjectBase("Dust Cloud"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa, roughness:0.9, transparent: true, opacity: 0.5}); | |
| const cloud = new THREE.Mesh(new THREE.SphereGeometry(0.5,8,8), mat); | |
| Object.assign(cloud, base); | |
| cloud.position.y = 0.25; | |
| cloud.castShadow = false; | |
| cloud.receiveShadow = false; | |
| return cloud; | |
| } | |
| function createBloodSplatDecal() { | |
| const base = createObjectBase("Blood Splat Decal"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x8b0000, roughness:0.9, transparent: true, opacity: 0.8}); | |
| const splat = new THREE.Mesh(new THREE.PlaneGeometry(0.5,0.5), mat); | |
| Object.assign(splat, base); | |
| splat.position.y = 0.01; | |
| splat.rotation.x = -Math.PI/2; | |
| splat.castShadow = false; | |
| splat.receiveShadow = true; | |
| return splat; | |
| } | |
| function createBurningBarrelFire() { | |
| const base = createObjectBase("Burning Barrel Fire"); | |
| const group = new THREE.Group(); | |
| Object.assign(group, base); | |
| const mat1 = new THREE.MeshStandardMaterial({color:0x555555, roughness:0.7, metalness:0.5}); | |
| const mat2 = new THREE.MeshStandardMaterial({color:0xff4500, roughness:0.5, transparent: true, opacity: 0.8}); | |
| const barrel = new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4,1,12), mat1); | |
| barrel.position.y = 0.5; | |
| barrel.castShadow = true; | |
| barrel.receiveShadow = true; | |
| group.add(barrel); | |
| const fire = new THREE.Mesh(new THREE.SphereGeometry(0.3,8,8), mat2); | |
| fire.position.y = 1; | |
| fire.castShadow = true; | |
| fire.receiveShadow = false; | |
| group.add(fire); | |
| return group; | |
| } | |
| function createWarpTunnelEffect() { | |
| const base = createObjectBase("Warp Tunnel Effect"); | |
| const mat = new THREE.MeshStandardMaterial({color:0x00b7eb, roughness:0.5, transparent: true, opacity: 0.7}); | |
| const tunnel = new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.5,2,12), mat); | |
| Object.assign(tunnel, base); | |
| tunnel.position.y = 1; | |
| tunnel.castShadow = false; | |
| tunnel.receiveShadow = false; | |
| return tunnel; | |
| } | |
| function createLaserBeam() { | |
| const base = createObjectBase("Laser Beam"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xff0000, roughness:0.5, transparent: true, opacity: 0.8}); | |
| const beam = new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,1,8), mat); | |
| Object.assign(beam, base); | |
| beam.position.y = 0.5; | |
| beam.rotation.z = Math.PI/2; | |
| beam.castShadow = false; | |
| beam.receiveShadow = false; | |
| return beam; | |
| } | |
| function createGoldSparkle() { | |
| const base = createObjectBase("Gold Sparkle"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xffd700, roughness:0.5, transparent: true, opacity: 0.8}); | |
| const sparkle = new THREE.Mesh(new THREE.SphereGeometry(0.1,8,8), mat); | |
| Object.assign(sparkle, base); | |
| sparkle.position.y = 0.1; | |
| sparkle.castShadow = false; | |
| sparkle.receiveShadow = false; | |
| return sparkle; | |
| } | |
| function createSteamVent() { | |
| const base = createObjectBase("Steam Vent"); | |
| const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa, roughness:0.9, transparent: true, opacity: 0.5}); | |
| const vent = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,0.5,8), mat); | |
| Object.assign(vent, base); | |
| vent.position.y = 0.25; | |
| vent.castShadow = false; | |
| vent.receiveShadow = false; | |
| return 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 "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 "Tree": newObjectToPlace = createTree(); break; | |
| case "Rock": newObjectToPlace = createRock(); 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 "Fence Post": newObjectToPlace = createFencePost(); break; | |
| case "Rooftop AC Unit": newObjectToPlace = createRooftopACUnit(); break; | |
| case "Holographic Window Display": newObjectToPlace = createHolographicWindowDisplay(); break; | |
| case "Jersey Barrier": newObjectToPlace = createJerseyBarrier(); break; | |
| case "Oil Drum": newObjectToPlace = createOilDrum(); break; | |
| case "Canned Food": newObjectToPlace = createCannedFood(); break; | |
| case "Treasure Chest": newObjectToPlace = createTreasureChest(); break; | |
| case "Wall Torch": newObjectToPlace = createWallTorch(); break; | |
| case "Bone Pile": newObjectToPlace = createBonePile(); break; | |
| case "King Figure": newObjectToPlace = createKingFigure(); break; | |
| case "Soldier Figure": newObjectToPlace = createSoldierFigure(); break; | |
| case "Mage Figure": newObjectToPlace = createMageFigure(); break; | |
| case "Zombie Figure": newObjectToPlace = createZombieFigure(); break; | |
| case "Survivor Figure": newObjectToPlace = createSurvivorFigure(); break; | |
| case "Dwarf Miner Figure": newObjectToPlace = createDwarfMinerFigure(); break; | |
| case "Undead Knight Figure": newObjectToPlace = createUndeadKnightFigure(); break; | |
| case "Hero Figure": newObjectToPlace = createHeroFigure(); break; | |
| case "Wooden Cart": newObjectToPlace = createWoodenCart(); break; | |
| case "Ballista": newObjectToPlace = createBallista(); break; | |
| case "Siege Tower": newObjectToPlace = createSiegeTower(); break; | |
| case "Buggy Frame": newObjectToPlace = createBuggyFrame(); break; | |
| case "Motorbike": newObjectToPlace = createMotorbike(); break; | |
| case "Hover Bike": newObjectToPlace = createHoverBike(); break; | |
| case "APC": newObjectToPlace = createAPC(); break; | |
| case "Sand Boat": newObjectToPlace = createSandBoat(); break; | |
| case "Makeshift Machete": newObjectToPlace = createMakeshiftMachete(); break; | |
| case "Pistol Body": newObjectToPlace = createPistolBody(); break; | |
| case "Scope Attachment": newObjectToPlace = createScopeAttachment(); break; | |
| case "Laser Pistol": newObjectToPlace = createLaserPistol(); break; | |
| case "Energy Sword": newObjectToPlace = createEnergySword(); break; | |
| case "Dwarven Axe": newObjectToPlace = createDwarvenAxe(); break; | |
| case "Magic Staff": newObjectToPlace = createMagicStaff(); break; | |
| case "Candle Flame": newObjectToPlace = createCandleFlame(); break; | |
| case "Dust Cloud": newObjectToPlace = createDustCloud(); break; | |
| case "Blood Splat Decal": newObjectToPlace = createBloodSplatDecal(); break; | |
| case "Burning Barrel Fire": newObjectToPlace = createBurningBarrelFire(); break; | |
| case "Warp Tunnel Effect": newObjectToPlace = createWarpTunnelEffect(); break; | |
| case "Laser Beam": newObjectToPlace = createLaserBeam(); break; | |
| case "Gold Sparkle": newObjectToPlace = createGoldSparkle(); break; | |
| case "Steam Vent": newObjectToPlace = createSteamVent(); break; | |
| default: return; | |
| } | |
| if (newObjectToPlace) { | |
| newObjectToPlace.position.copy(intersectPoint); | |
| newObjectToPlace.position.y += 0.01; | |
| newObjectToPlace.scale.setScalar(customScale); | |
| newObjectToPlace.rotation.y = customRotationY; | |
| 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() { | |
| console.log(`JS getSaveDataForNamedPlot 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 named plot:", payload); | |
| return JSON.stringify(payload); | |
| } | |
| function resetNewlyPlacedObjects() { | |
| console.log(`JS resetNewlyPlacedObjects called.`); | |
| clearUnsavedState(); | |
| } | |
| function updatePlayerMovement() { | |
| if (!playerMesh) return; | |
| const moveDirection = new THREE.Vector3(0, 0, 0); | |
| if (keysPressed['KeyW'] || keysPressed['ArrowUp']) moveDirection.z -= 1; | |
| if (keysPressed['KeyS'] || keysPressed['ArrowDown']) moveDirection.z += 1; | |
| if (keysPressed['KeyA'] || keysPressed['ArrowLeft']) moveDirection.x -= 1; | |
| if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1; | |
| if (moveDirection.lengthSq() > 0) { | |
| moveDirection.normalize().multiplyScalar(playerSpeed); | |
| const forward = new THREE.Vector3(); | |
| camera.getWorldDirection(forward); | |
| forward.y = 0; | |
| forward.normalize(); | |
| const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize(); | |
| const worldMove = new THREE.Vector3(); | |
| worldMove.add(forward.multiplyScalar(-moveDirection.z)); | |
| worldMove.add(right.multiplyScalar(-moveDirection.x)); | |
| worldMove.normalize().multiplyScalar(playerSpeed); | |
| playerMesh.position.add(worldMove); | |
| playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2); | |
| checkAndExpandGround(); | |
| } | |
| } | |
| function checkAndExpandGround() { | |
| if (!playerMesh) return; | |
| const currentGridX = Math.floor(playerMesh.position.x / plotWidth); | |
| const currentGridZ = Math.floor(playerMesh.position.z / plotDepth); | |
| for (let dx = -1; dx <= 1; dx++) { | |
| for (let dz = -1; dz <= 1; dz++) { | |
| if (dx === 0 && dz === 0) continue; | |
| const checkX = currentGridX + dx; | |
| const checkZ = currentGridZ + dz; | |
| const gridKey = `${checkX}_${checkZ}`; | |
| if (!groundMeshes[gridKey]) { | |
| const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ); | |
| if (!isSavedPlot) { | |
| createGroundPlane(checkX, checkZ, true); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| function updateCamera() { | |
| if (!playerMesh) return; | |
| const offset = new THREE.Vector3(0, 15, 20); | |
| const targetPosition = playerMesh.position.clone().add(offset); | |
| camera.position.lerp(targetPosition, 0.08); | |
| camera.lookAt(playerMesh.position); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| updatePlayerMovement(); | |
| updateCamera(); | |
| renderer.render(scene, camera); | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> |