Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Infinite World</title> | |
| <style> | |
| body { margin:0; overflow:hidden; } | |
| canvas { display:block; } | |
| </style> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| // … your existing three.js init, camera, lights, renderer, controls … | |
| // ─── Primitive helpers ────────────────────────────────────────────────── | |
| function createBox({width, height, depth, materialProps, position}) { | |
| const geom = new THREE.BoxGeometry(width, height, depth); | |
| const mat = new THREE.MeshStandardMaterial(materialProps); | |
| const mesh = new THREE.Mesh(geom, mat); | |
| mesh.position.copy(position); | |
| return mesh; | |
| } | |
| // … any other helpers like createPlane(), createSplineTube(), createParticles() … | |
| // ─── Existing simple creators ─────────────────────────────────────────── | |
| // function createSimpleHouse(...) { … } | |
| // function createTree(...) { … } | |
| // function createRock(...) { … } | |
| // function createFencePost(...) { … } | |
| // ─── 1. Cyberpunk City Builder Kit ──────────────────────────────────────── | |
| function createCyberpunkWallPanel({ | |
| width=2, height=3, depth=0.2, | |
| baseMaterial={ color:0x555555, metalness:0.8, roughness:0.4 }, | |
| trimMaterial={ emissive:0x00ffff, emissiveIntensity:1.2 }, | |
| windowCutouts=true, doorCutouts=false, | |
| position=new THREE.Vector3() | |
| }) { | |
| const panel = createBox({ width, height, depth, materialProps: baseMaterial, position }); | |
| // trim | |
| const trim = createBox({ | |
| width: width * 0.1, height: height, depth: depth + 0.01, | |
| materialProps: trimMaterial, | |
| position: position.clone().add(new THREE.Vector3(width/2 + 0.05, 0, 0)) | |
| }); | |
| panel.add(trim); | |
| // TODO: boolean cutouts for windows/doors | |
| return panel; | |
| } | |
| function createRooftopACUnit({ | |
| width=1, height=0.5, depth=1, | |
| materialProps={ color:0x777777, roughness:0.7, metalness:0.3 }, | |
| position=new THREE.Vector3() | |
| }) { | |
| const unit = createBox({ width, height, depth, materialProps, position }); | |
| // grill detail, pipes, etc. | |
| return unit; | |
| } | |
| function createHolographicWindowDisplay({ | |
| width=1.5, height=1, position=new THREE.Vector3() | |
| }) { | |
| const planeMat = new THREE.MeshBasicMaterial({ | |
| color: 0xffffff, transparent:true, opacity:0.6 | |
| }); | |
| const geom = new THREE.PlaneGeometry(width, height); | |
| const display = new THREE.Mesh(geom, planeMat); | |
| display.position.copy(position); | |
| // animate emissive shader parameter here… | |
| return display; | |
| } | |
| function createGreebleSet({ | |
| count=10, scale=0.2, position=new THREE.Vector3() | |
| }) { | |
| const group = new THREE.Group(); | |
| for(let i=0; i<count; i++){ | |
| const x = (Math.random()-0.5)*2; | |
| const y = (Math.random()-0.5)*2; | |
| const z = (Math.random()-0.5)*0.2; | |
| const pebble = createBox({ | |
| width: scale, height: scale, depth: scale, | |
| materialProps:{ color:0x444444, roughness:0.6, metalness:0.4 }, | |
| position: position.clone().add(new THREE.Vector3(x,y,z)) | |
| }); | |
| group.add(pebble); | |
| } | |
| return group; | |
| } | |
| function createCyberpunkKit(position=new THREE.Vector3()) { | |
| const kit = new THREE.Group(); | |
| kit.add(createCyberpunkWallPanel({ position: position.clone() })); | |
| kit.add(createRooftopACUnit({ position: position.clone().add(new THREE.Vector3(3,0,0)) })); | |
| kit.add(createHolographicWindowDisplay({ position: position.clone().add(new THREE.Vector3(6,1,0)) })); | |
| kit.add(createGreebleSet({ position: position.clone().add(new THREE.Vector3(9,0,0)) })); | |
| scene.add(kit); | |
| } | |
| // ─── 2. POLYGON – Fantasy Kingdom Pack ─────────────────────────────────── | |
| function createKingFigure({ | |
| scale=1, materialProps={ color:0xffd700, metalness:0.9, roughness:0.2 }, | |
| position=new THREE.Vector3() | |
| }) { | |
| // placeholder low‐poly silhouette | |
| const geom = new THREE.CylinderGeometry(0.3*scale, 0.5*scale, 1.8*scale, 6); | |
| const mesh = new THREE.Mesh(geom, new THREE.MeshStandardMaterial(materialProps)); | |
| mesh.position.copy(position); | |
| return mesh; | |
| } | |
| function createSoldierFigure({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createMageFigure({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createFantasyKingdomPack(position=new THREE.Vector3()) { | |
| const pack = new THREE.Group(); | |
| pack.add(createKingFigure({ position })); | |
| pack.add(createSoldierFigure({ position: position.clone().add(new THREE.Vector3(2,0,0)) })); | |
| pack.add(createMageFigure({ position: position.clone().add(new THREE.Vector3(4,0,0)) })); | |
| scene.add(pack); | |
| } | |
| // ─── 3. HEROIC FANTASY CREATURES FULL PACK VOL 1 ───────────────────────── | |
| function createDemonicCreatureBase({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createFantasyAnimalBase({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createFantasyLizardBase({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createLivingDeadBase({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createFantasyVillainBase({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createMythologicalCreatureBase({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createHeroicFantasyCreaturesPack(position=new THREE.Vector3()) { | |
| const grp = new THREE.Group(); | |
| grp.add(createDemonicCreatureBase({ position })); | |
| grp.add(createFantasyAnimalBase({ position: position.clone().add(new THREE.Vector3(3,0,0)) })); | |
| grp.add(createFantasyLizardBase({ position: position.clone().add(new THREE.Vector3(6,0,0)) })); | |
| grp.add(createLivingDeadBase({ position: position.clone().add(new THREE.Vector3(9,0,0)) })); | |
| grp.add(createFantasyVillainBase({ position: position.clone().add(new THREE.Vector3(12,0,0)) })); | |
| grp.add(createMythologicalCreatureBase({ position: position.clone().add(new THREE.Vector3(15,0,0)) })); | |
| scene.add(grp); | |
| } | |
| // ─── 4. POLYGON – Apocalypse Pack ───────────────────────────────────────── | |
| function createZombieFigure({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createSurvivorFigure({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createBackpack({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createMakeshiftArmor({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createBuggyFrame({ position=new THREE.Vector3() }) { /*…*/ } | |
| function createApocalypsePack(position=new THREE.Vector3()) { | |
| const pack = new THREE.Group(); | |
| pack.add(createZombieFigure({ position })); | |
| pack.add(createSurvivorFigure({ position: position.clone().add(new THREE.Vector3(3,0,0)) })); | |
| pack.add(createBackpack({ position: position.clone().add(new THREE.Vector3(6,0,0)) })); | |
| pack.add(createMakeshiftArmor({ position: position.clone().add(new THREE.Vector3(9,0,0)) })); | |
| pack.add(createBuggyFrame({ position: position.clone().add(new THREE.Vector3(12,0,0)) })); | |
| scene.add(pack); | |
| } | |
| // ─── Hook into your existing object‐placement switch ───────────────────── | |
| window.placeObject = function(type, position) { | |
| switch(type) { | |
| case 'Cyberpunk City Builder Kit': | |
| createCyberpunkKit(position); | |
| break; | |
| case 'POLYGON - Fantasy Kingdom Pack': | |
| createFantasyKingdomPack(position); | |
| break; | |
| case 'HEROIC FANTASY CREATURES FULL PACK VOL 1': | |
| createHeroicFantasyCreaturesPack(position); | |
| break; | |
| case 'POLYGON - Apocalypse Pack': | |
| createApocalypsePack(position); | |
| break; | |
| // … your existing cases for Simple House, Tree, etc. … | |
| } | |
| }; | |
| // ─── Initialize scene ─────────────────────────────────────────────────── | |
| init(); | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <!-- your existing teleportPlayer, getSaveDataAndPosition hooks, etc. --> | |
| </body> | |
| </html> | |