[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108,"_109":110},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","znwpd","name","Si","path","client/render/scene.ts","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/znwpd/Si/code/client/render/scene.ts","extension","id","11a8b3fa-988b-4eee-9b18-14b7d8398732","scene.ts","fileId","522f72d6-a957-11f1-b28e-1607ee4eb77e","parentId","caaf7bab-56bb-4997-a2c8-c6d571bdd60b","branchId","006c7f17-adcf-4827-9d82-9a8f7ed68e68","branchVersion",13,"latest",true,"createdAt",["D",1788632806710],"version",1,"fileType","script","content","/**\n * 3D シーン（Three.js）。\n * 本家の「横から少し見下ろす」視点を標準にしつつ、俯瞰/自由回転の視点も切り替え可能。\n * Sim の状態を毎フレーム反映するだけで、ゲームロジックは持たない。\n */\nimport * as THREE from \"three\";\nimport { CASTLE_X, COLS, FORT_RADIUS, FORT_SPECS, ROWS, type Side, tileCenter } from \"../game/field.ts\";\nimport type { Effect, Projectile, Sim, Unit } from \"../game/sim.ts\";\nimport { animateRig, buildCharacter, type Rig, SIDE_COLOR, toon } from \"./characters.ts\";\n\nexport type ViewMode = \"standard\" | \"top\" | \"free\";\nexport const VIEW_LABEL: Record = { standard: \"標準\", top: \"俯瞰\", free: \"自由\" };\n\nconst CX = COLS / 2, CZ = ROWS / 2;\n\nexport class Scene3D {\n renderer: THREE.WebGLRenderer;\n scene = new THREE.Scene();\n camera: THREE.PerspectiveCamera;\n view: ViewMode = \"standard\";\n private rigs = new Map();\n private tiles: THREE.Mesh[] = [];\n private tileMat = { off: new THREE.MeshBasicMaterial({ color: 0x3b8ff0, transparent: true, opacity: 0, depthWrite: false }), on: new THREE.MeshBasicMaterial({ color: 0x3b8ff0, transparent: true, opacity: 0.28, depthWrite: false }), hot: new THREE.MeshBasicMaterial({ color: 0xffe27a, transparent: true, opacity: 0.55, depthWrite: false }) };\n private forts: { group: THREE.Group; flag: THREE.Mesh; flagMat: THREE.MeshToonMaterial; hp: THREE.Mesh; hpBack: THREE.Mesh; stones: THREE.Mesh[] }[] = [];\n private castles: Record;\n private projGroup = new THREE.Group();\n private fxGroup = new THREE.Group();\n private projMeshes = new Map();\n private fxMeshes = new Map();\n private ground!: THREE.Mesh;\n private raycaster = new THREE.Raycaster();\n private plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);\n private orbit = { yaw: 0, pitch: 0.9, dist: 18 };\n private shake = 0;\n private time = 0;\n private cursorRing: THREE.Mesh;\n private cannonRing: THREE.Mesh;\n\n constructor(canvas: HTMLCanvasElement) {\n this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false, powerPreference: \"high-performance\" });\n this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n this.renderer.shadowMap.enabled = true;\n this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n this.renderer.outputColorSpace = THREE.SRGBColorSpace;\n this.renderer.toneMapping = THREE.ACESFilmicToneMapping;\n this.renderer.toneMappingExposure = 1.05;\n\n this.scene.background = new THREE.Color(0x8ccbe8);\n this.scene.fog = new THREE.Fog(0x9fd3ea, 26, 60);\n this.camera = new THREE.PerspectiveCamera(38, 1, 0.1, 200);\n\n this.buildLights();\n this.buildTerrain();\n this.buildTiles();\n this.castles = { ally: this.buildCastle(\"ally\"), enemy: this.buildCastle(\"enemy\") };\n FORT_SPECS.forEach((f) => this.forts.push(this.buildFort(f.col, f.row)));\n this.scene.add(this.projGroup, this.fxGroup);\n\n this.cursorRing = new THREE.Mesh(new THREE.RingGeometry(0.42, 0.5, 32), new THREE.MeshBasicMaterial({ color: 0xffe27a, transparent: true, opacity: 0.9, side: THREE.DoubleSide, depthWrite: false }));\n this.cursorRing.rotation.x = -Math.PI / 2; this.cursorRing.position.y = 0.02; this.cursorRing.visible = false;\n this.cannonRing = new THREE.Mesh(new THREE.RingGeometry(1.2, 1.35, 40), new THREE.MeshBasicMaterial({ color: 0xff8a3a, transparent: true, opacity: 0.85, side: THREE.DoubleSide, depthWrite: false }));\n this.cannonRing.rotation.x = -Math.PI / 2; this.cannonRing.position.y = 0.02; this.cannonRing.visible = false;\n this.scene.add(this.cursorRing, this.cannonRing);\n\n this.resize();\n }\n\n /* ---------------- world building ---------------- */\n private buildLights() {\n const hemi = new THREE.HemisphereLight(0xdff2ff, 0x5a7a3a, 0.9);\n this.scene.add(hemi);\n const sun = new THREE.DirectionalLight(0xfff2dc, 1.6);\n sun.position.set(-8, 16, 10);\n sun.castShadow = true;\n sun.shadow.mapSize.set(2048, 2048);\n sun.shadow.camera.left = -16; sun.shadow.camera.right = 16;\n sun.shadow.camera.top = 10; sun.shadow.camera.bottom = -10;\n sun.shadow.camera.near = 2; sun.shadow.camera.far = 50;\n sun.shadow.bias = -0.0008;\n sun.target.position.set(CX, 0, CZ);\n this.scene.add(sun, sun.target);\n }\n\n private buildTerrain() {\n // 草地（フィールド） + 外周の丘 + 石畳の道\n const grass = toon(0x79b55a);\n this.ground = new THREE.Mesh(new THREE.BoxGeometry(COLS + 8, 0.6, ROWS + 6), grass);\n this.ground.position.set(CX, -0.3, CZ);\n this.ground.receiveShadow = true;\n this.scene.add(this.ground);\n\n const field = new THREE.Mesh(new THREE.BoxGeometry(COLS, 0.06, ROWS), toon(0x86c264));\n field.position.set(CX, 0.0, CZ);\n field.receiveShadow = true;\n this.scene.add(field);\n\n // 中央の道\n const road = new THREE.Mesh(new THREE.BoxGeometry(COLS, 0.07, 1.4), toon(0xb8a888));\n road.position.set(CX, 0.005, CZ);\n road.receiveShadow = true;\n this.scene.add(road);\n\n // グリッド線\n const lines = new THREE.Group();\n const lineMat = new THREE.LineBasicMaterial({ color: 0x4f7a3a, transparent: true, opacity: 0.35 });\n for (let c = 0; c <= COLS; c++) {\n const g = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(c, 0.04, 0), new THREE.Vector3(c, 0.04, ROWS)]);\n lines.add(new THREE.Line(g, lineMat));\n }\n for (let r = 0; r <= ROWS; r++) {\n const g = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0.04, r), new THREE.Vector3(COLS, 0.04, r)]);\n lines.add(new THREE.Line(g, lineMat));\n }\n this.scene.add(lines);\n\n // 遠景の山と木\n const mountainMat = toon(0x6f8fa8);\n for (let i = 0; i < 9; i++) {\n const m = new THREE.Mesh(new THREE.ConeGeometry(3 + Math.random() * 3, 4 + Math.random() * 4, 6), mountainMat);\n m.position.set(-6 + i * 4.2 + Math.random() * 2, -0.2, -9 - Math.random() * 6);\n this.scene.add(m);\n }\n const trunk = toon(0x6b4a2b), leaf = toon(0x4f8f3a), leaf2 = toon(0x5fa347);\n const rand = mulberry(7);\n for (let i = 0; i < 26; i++) {\n const t = new THREE.Group();\n const side = rand() < 0.5 ? -1 : 1;\n const x = -3 + rand() * (COLS + 6);\n const z = side < 0 ? -1.2 - rand() * 2.4 : ROWS + 1.2 + rand() * 2.2;\n const h = 0.5 + rand() * 0.6;\n const tr = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.12, h, 6), trunk); tr.position.y = h / 2; tr.castShadow = true;\n const lf = new THREE.Mesh(new THREE.ConeGeometry(0.5 + rand() * 0.3, 1.0 + rand() * 0.6, 7), rand() < 0.5 ? leaf : leaf2); lf.position.y = h + 0.5; lf.castShadow = true;\n t.add(tr, lf); t.position.set(x, 0, z);\n this.scene.add(t);\n }\n }\n\n private buildTiles() {\n const geo = new THREE.PlaneGeometry(0.92, 0.92);\n for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {\n const m = new THREE.Mesh(geo, this.tileMat.off);\n const p = tileCenter(c, r);\n m.position.set(p.x, 0.05, p.z);\n m.rotation.x = -Math.PI / 2;\n m.userData = { col: c, row: r };\n this.tiles.push(m);\n this.scene.add(m);\n }\n }\n\n private buildCastle(side: Side) {\n const g = new THREE.Group();\n const team = SIDE_COLOR[side];\n const stone = toon(0xcfc6b4), stoneD = toon(0xa89e8c), roof = toon(team), wood = toon(0x6b4a2b);\n const dir = side === \"ally\" ? 1 : -1;\n const mk = (geo: THREE.BufferGeometry, mat: THREE.Material, x: number, y: number, z: number) => { const m = new THREE.Mesh(geo, mat); m.position.set(x, y, z); m.castShadow = true; m.receiveShadow = true; g.add(m); return m; };\n // 城壁\n mk(new THREE.BoxGeometry(1.6, 2.2, ROWS + 1.2), stone, 0, 1.1, CZ);\n for (let i = 0; i < 8; i++) mk(new THREE.BoxGeometry(1.6, 0.35, 0.45), stoneD, 0, 2.35, CZ - ROWS / 2 - 0.4 + i * 1.05);\n // 門\n mk(new THREE.BoxGeometry(0.3, 1.5, 1.3), wood, dir * 0.75, 0.75, CZ);\n // 塔\n // [フィールド側からの奥行き, z]\n const towers: [number, number][] = [[0.2, CZ - 2.8], [0.2, CZ + 2.8], [1.7, CZ - 1.3], [1.7, CZ + 1.3]];\n for (const [depth, tz] of towers) {\n const tx = -dir * depth;\n mk(new THREE.CylinderGeometry(0.62, 0.7, 3.6, 10), stone, tx, 1.8, tz);\n mk(new THREE.ConeGeometry(0.85, 1.2, 10), roof, tx, 4.2, tz);\n }\n // 本丸\n mk(new THREE.BoxGeometry(2.2, 3.6, 2.6), stone, -dir * 1.4, 1.8, CZ);\n mk(new THREE.BoxGeometry(2.6, 0.3, 3.0), stoneD, -dir * 1.4, 3.7, CZ);\n mk(new THREE.ConeGeometry(1.9, 1.6, 4), roof, -dir * 1.4, 4.65, CZ).rotation.y = Math.PI / 4;\n // 旗\n const pole = mk(new THREE.CylinderGeometry(0.03, 0.03, 1.4, 6), wood, -dir * 1.4, 6.0, CZ);\n const flag = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.4, 0.04), toon(team));\n flag.position.set(-dir * 1.4 + dir * 0.36, 6.5, CZ); g.add(flag);\n void pole;\n\n // 城のドラゴン（屋根の上に眠っている）\n const dragon = new THREE.Group();\n const mats: THREE.MeshToonMaterial[] = [];\n const dm = (c: number) => { const m = toon(c); mats.push(m); return m; };\n const dcol = side === \"ally\" ? 0x3f6fc0 : 0xc23a2e, belly = side === \"ally\" ? 0x9fd0ff : 0xffc27a;\n const body = new THREE.Mesh(new THREE.CapsuleGeometry(0.45, 0.9, 4, 10), dm(dcol)); body.rotation.z = Math.PI / 2; body.castShadow = true;\n dragon.add(body);\n const neck = new THREE.Group(); neck.position.set(dir * 0.7, 0.25, 0);\n const neckM = new THREE.Mesh(new THREE.CapsuleGeometry(0.2, 0.7, 4, 8), dm(dcol)); neckM.rotation.z = -dir * 0.9; neckM.position.set(dir * 0.3, 0.3, 0); neckM.castShadow = true;\n const head = new THREE.Group(); head.position.set(dir * 0.65, 0.65, 0);\n head.add(new THREE.Mesh(new THREE.SphereGeometry(0.3, 12, 10), dm(dcol)));\n const snout = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.24, 0.32), dm(dcol)); snout.position.set(dir * 0.35, -0.05, 0); head.add(snout);\n const jaw = new THREE.Mesh(new THREE.BoxGeometry(0.44, 0.1, 0.3), dm(belly)); jaw.position.set(dir * 0.33, -0.2, 0); head.add(jaw);\n for (const s of [-1, 1]) { const horn = new THREE.Mesh(new THREE.ConeGeometry(0.07, 0.35, 6), dm(0xf0e6c0)); horn.position.set(-dir * 0.1, 0.3, s * 0.15); horn.rotation.x = s * 0.3; horn.rotation.z = dir * 0.5; head.add(horn); }\n for (const s of [-1, 1]) { const eye = new THREE.Mesh(new THREE.SphereGeometry(0.05, 6, 6), new THREE.MeshBasicMaterial({ color: 0xffe27a })); eye.position.set(dir * 0.18, 0.08, s * 0.16); head.add(eye); }\n neck.add(neckM, head);\n dragon.add(neck);\n const wings: THREE.Object3D[] = [];\n for (const s of [-1, 1]) {\n const w = new THREE.Group(); w.position.set(0, 0.3, s * 0.3);\n const wm = new THREE.Mesh(new THREE.BoxGeometry(1.0, 0.04, 1.6), dm(belly)); wm.position.set(0, 0.1, s * 0.8); wm.rotation.x = s * 0.25; wm.castShadow = true;\n w.add(wm); dragon.add(w); wings.push(w);\n }\n const tail = new THREE.Mesh(new THREE.ConeGeometry(0.18, 1.6, 7), dm(dcol)); tail.rotation.z = dir * 1.5; tail.position.set(-dir * 1.4, 0.1, 0); dragon.add(tail);\n dragon.position.set(-dir * 1.4, 5.4, CZ);\n dragon.scale.setScalar(0.85);\n g.add(dragon);\n\n g.position.set(CASTLE_X[side], 0, 0);\n this.scene.add(g);\n return { group: g, dragon, neck, wings, mats };\n }\n\n private buildFort(col: number, row: number) {\n const g = new THREE.Group();\n const p = tileCenter(col, row);\n g.position.set(p.x, 0, p.z);\n const stone = toon(0xd2c9b6), stoneD = toon(0xa89e8c);\n const stones: THREE.Mesh[] = [];\n const base = new THREE.Mesh(new THREE.CylinderGeometry(FORT_RADIUS + 0.15, FORT_RADIUS + 0.25, 0.25, 12), stoneD); base.position.y = 0.12; base.receiveShadow = true; g.add(base);\n const tower = new THREE.Mesh(new THREE.CylinderGeometry(FORT_RADIUS - 0.05, FORT_RADIUS, 1.1, 12), stone); tower.position.y = 0.75; tower.castShadow = true; g.add(tower); stones.push(tower);\n for (let i = 0; i < 6; i++) { const m = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.22, 0.22), stoneD); const a = (i / 6) * Math.PI * 2; m.position.set(Math.cos(a) * (FORT_RADIUS - 0.08), 1.4, Math.sin(a) * (FORT_RADIUS - 0.08)); g.add(m); stones.push(m); }\n const door = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.4, 0.1), toon(0x4a2f1c)); door.position.set(0, 0.45, FORT_RADIUS - 0.02); g.add(door);\n const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 1.3, 6), toon(0x6b4a2b)); pole.position.y = 1.9; g.add(pole);\n const flagMat = toon(0x9a958c);\n const flag = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.32, 0.03), flagMat); flag.position.set(0.27, 2.35, 0); g.add(flag);\n // HP バー\n const hpBack = new THREE.Mesh(new THREE.PlaneGeometry(1.1, 0.1), new THREE.MeshBasicMaterial({ color: 0x140c08, transparent: true, opacity: 0.85, depthTest: false }));\n const hp = new THREE.Mesh(new THREE.PlaneGeometry(1.1, 0.08), new THREE.MeshBasicMaterial({ color: 0xffffff, depthTest: false }));\n hp.position.z = 0.001; hpBack.position.y = 1.75; hp.position.y = 1.75; hpBack.renderOrder = 10; hp.renderOrder = 11;\n g.add(hpBack, hp);\n this.scene.add(g);\n return { group: g, flag, flagMat, hp, hpBack, stones };\n }\n\n /* ---------------- camera ---------------- */\n resize() {\n const w = this.renderer.domElement.clientWidth || window.innerWidth;\n const h = this.renderer.domElement.clientHeight || window.innerHeight;\n this.renderer.setSize(w, h, false);\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n }\n\n setView(v: ViewMode) { this.view = v; }\n cycleView(): ViewMode { const order: ViewMode[] = [\"standard\", \"top\", \"free\"]; this.view = order[(order.indexOf(this.view) + 1) % 3]; return this.view; }\n orbitBy(dx: number, dy: number) {\n if (this.view !== \"free\") return;\n this.orbit.yaw -= dx * 0.005; this.orbit.pitch = Math.max(0.25, Math.min(1.45, this.orbit.pitch + dy * 0.005));\n }\n zoomBy(f: number) { if (this.view === \"free\") this.orbit.dist = Math.max(8, Math.min(34, this.orbit.dist * f)); }\n\n private updateCamera(dt: number) {\n const cam = this.camera;\n const aspect = cam.aspect;\n // フィールド全幅を収める距離\n const fov = THREE.MathUtils.degToRad(cam.fov);\n const need = (COLS + 5) / 2 / Math.tan(fov / 2) / aspect;\n const target = new THREE.Vector3(CX, 0.4, CZ - 0.4);\n let pos: THREE.Vector3;\n if (this.view === \"standard\") {\n const d = Math.max(need * 1.02, 13);\n pos = new THREE.Vector3(CX, d * 0.62 + 1.5, CZ + d * 0.86);\n } else if (this.view === \"top\") {\n const d = Math.max(need * 0.95, 12);\n pos = new THREE.Vector3(CX, d * 1.05, CZ + d * 0.28);\n } else {\n const o = this.orbit;\n pos = new THREE.Vector3(CX + Math.sin(o.yaw) * Math.cos(o.pitch) * o.dist, Math.sin(o.pitch) * o.dist + 0.5, CZ + Math.cos(o.yaw) * Math.cos(o.pitch) * o.dist);\n }\n // 画面が縦長のときは少し引く\n if (aspect < 1) pos.sub(target).multiplyScalar(1.15).add(target);\n cam.position.lerp(pos, Math.min(1, dt * 4));\n if (this.shake > 0) {\n cam.position.x += (Math.random() - 0.5) * this.shake * 0.3;\n cam.position.y += (Math.random() - 0.5) * this.shake * 0.3;\n this.shake = Math.max(0, this.shake - dt * 2.5);\n }\n cam.lookAt(target);\n }\n\n addShake(a: number) { this.shake = Math.min(1.2, this.shake + a); }\n\n /* ---------------- picking ---------------- */\n /** 画面座標 → フィールド座標 (y=0 平面) */\n pickGround(clientX: number, clientY: number): { x: number; z: number } | null {\n const rect = this.renderer.domElement.getBoundingClientRect();\n const ndc = new THREE.Vector2(((clientX - rect.left) / rect.width) * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);\n this.raycaster.setFromCamera(ndc, this.camera);\n const hit = new THREE.Vector3();\n if (!this.raycaster.ray.intersectPlane(this.plane, hit)) return null;\n return { x: hit.x, z: hit.z };\n }\n\n /** 召喚可能マスのハイライト。hover は現在指しているマス */\n highlightTiles(sim: Sim | null, side: Side, active: boolean, hover: { col: number; row: number } | null) {\n for (const t of this.tiles) {\n const { col, row } = t.userData as { col: number; row: number };\n if (!active || !sim) { t.material = this.tileMat.off; continue; }\n const ok = sim.canSummon(side, col, row);\n t.material = ok ? (hover && hover.col === col && hover.row === row ? this.tileMat.hot : this.tileMat.on) : this.tileMat.off;\n }\n }\n showCursor(p: { x: number; z: number } | null, cannon: boolean) {\n this.cursorRing.visible = !!p && !cannon;\n this.cannonRing.visible = !!p && cannon;\n if (p) { this.cursorRing.position.set(p.x, 0.02, p.z); this.cannonRing.position.set(p.x, 0.02, p.z); }\n }\n\n /* ---------------- sync with sim ---------------- */\n sync(sim: Sim, dt: number) {\n this.time += dt;\n this.updateCamera(dt);\n const camQ = this.camera.quaternion;\n\n // units\n const seen = new Set();\n for (const u of sim.units) {\n seen.add(u.id);\n let rig = this.rigs.get(u.id);\n if (!rig) { rig = buildCharacter(u.def, u.side); this.rigs.set(u.id, rig); this.scene.add(rig.group); rig.group.rotation.y = u.facing > 0 ? Math.PI / 2 : -Math.PI / 2; }\n animateRig(rig, u as Unit, this.time, camQ);\n }\n for (const [id, rig] of this.rigs) if (!seen.has(id)) { this.scene.remove(rig.group); this.rigs.delete(id); }\n\n // forts\n sim.forts.forEach((f, i) => {\n const v = this.forts[i];\n const c = f.owner ? SIDE_COLOR[f.owner] : 0x9a958c;\n v.flagMat.color.lerp(new THREE.Color(c), 0.2);\n const raise = f.flagT;\n v.flag.position.y = 1.55 + raise * 0.8;\n v.flag.rotation.y = Math.sin(this.time * 3 + i) * 0.15;\n v.flag.scale.set(0.4 + raise * 0.6, 1, 1);\n const ratio = f.hp / f.maxHp;\n v.hp.scale.x = Math.max(0.001, ratio);\n v.hp.position.x = -(1 - ratio) * 1.1 / 2;\n (v.hp.material as THREE.MeshBasicMaterial).color.setHex(f.owner ? SIDE_COLOR[f.owner] : 0xffffff);\n v.hp.quaternion.copy(camQ); v.hpBack.quaternion.copy(camQ);\n v.hp.visible = v.hpBack.visible = ratio < 0.999 || f.owner === null;\n const jitter = f.hitFlash * 0.04;\n v.group.position.x = tileCenter(FORT_SPECS[i].col, FORT_SPECS[i].row).x + (Math.random() - 0.5) * jitter;\n });\n\n // castles\n for (const side of [\"ally\", \"enemy\"] as Side[]) {\n const c = sim.castles[side];\n const v = this.castles[side];\n const dir = side === \"ally\" ? 1 : -1;\n const flash = c.hitFlash;\n v.group.position.x = CASTLE_X[side] + (Math.random() - 0.5) * flash * 0.06;\n // dragon: 眠っている → 目覚めると首を上げ翼を広げる\n const awake = c.dragonAwake ? 1 : 0;\n const breath = c.dragonAnim > 0 ? Math.min(1, c.dragonAnim / 1.2) : 0;\n v.neck.rotation.z += ((awake ? -dir * 0.55 - dir * breath * 0.5 : dir * 0.5) - v.neck.rotation.z) * 0.08;\n v.wings.forEach((w, i) => { const s = i === 0 ? -1 : 1; const tgt = awake ? s * (0.15 + Math.sin(this.time * 4) * 0.25 + breath * 0.5) : s * 1.35; w.rotation.x += (tgt - w.rotation.x) * 0.1; });\n v.dragon.position.y = 5.4 + (awake ? Math.sin(this.time * 2) * 0.1 : 0);\n for (const m of v.mats) m.emissive.setRGB(breath * 0.8, breath * 0.3, 0);\n }\n\n this.syncProjectiles(sim.projectiles);\n this.syncEffects(sim.effects);\n }\n\n private syncProjectiles(list: Projectile[]) {\n const seen = new Set();\n for (const p of list) {\n seen.add(p.id);\n let m = this.projMeshes.get(p.id);\n if (!m) { m = this.makeProjectile(p); this.projMeshes.set(p.id, m); this.projGroup.add(m); }\n const k = Math.min(1, p.t / p.dur);\n const x = p.sx + (p.tx - p.sx) * k, z = p.sz + (p.tz - p.sz) * k;\n const y = p.sy + (p.ty - p.sy) * k + Math.sin(k * Math.PI) * p.arc;\n const prev = m.position.clone();\n m.position.set(x, y, z);\n if (p.kind === \"arrow\" || p.kind === \"cannon\") { const d = m.position.clone().sub(prev); if (d.lengthSq() > 1e-6) m.lookAt(m.position.clone().add(d)); }\n else m.rotation.y += 0.3;\n }\n for (const [id, m] of this.projMeshes) if (!seen.has(id)) { this.projGroup.remove(m); this.projMeshes.delete(id); }\n }\n\n private makeProjectile(p: Projectile): THREE.Object3D {\n switch (p.kind) {\n case \"arrow\": {\n const g = new THREE.Group();\n const shaft = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.6, 5), toon(0x8a6a3a)); shaft.rotation.x = Math.PI / 2; g.add(shaft);\n const tip = new THREE.Mesh(new THREE.ConeGeometry(0.05, 0.14, 5), toon(0xd8dde3)); tip.rotation.x = Math.PI / 2; tip.position.z = 0.35; g.add(tip);\n return g;\n }\n case \"cannon\": {\n const m = new THREE.Mesh(new THREE.SphereGeometry(0.22, 10, 10), toon(0x22262a)); m.castShadow = true; return m;\n }\n case \"fire\": {\n const m = new THREE.Mesh(new THREE.SphereGeometry(0.28, 10, 10), new THREE.MeshBasicMaterial({ color: 0xff7a2a })); const core = new THREE.Mesh(new THREE.SphereGeometry(0.16, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffe27a })); m.add(core); return m;\n }\n default: {\n const c = p.side === \"ally\" ? 0x8fd0ff : 0xffb0a6;\n const m = new THREE.Mesh(new THREE.OctahedronGeometry(0.17), new THREE.MeshBasicMaterial({ color: c }));\n const glow = new THREE.Mesh(new THREE.SphereGeometry(0.3, 8, 8), new THREE.MeshBasicMaterial({ color: c, transparent: true, opacity: 0.35 })); m.add(glow);\n return m;\n }\n }\n }\n\n private syncEffects(list: Effect[]) {\n const seen = new Set();\n for (const e of list) {\n seen.add(e.id);\n let rec = this.fxMeshes.get(e.id);\n if (!rec) { rec = { obj: this.makeEffect(e), e }; this.fxMeshes.set(e.id, rec); this.fxGroup.add(rec.obj); if (e.kind === \"boom\" && (e.radius ?? 0) > 1) this.addShake(0.5); if (e.kind === \"quake\") this.addShake(0.7); }\n this.animateEffect(rec.obj, e);\n }\n for (const [id, rec] of this.fxMeshes) if (!seen.has(id)) { this.fxGroup.remove(rec.obj); this.fxMeshes.delete(id); }\n }\n\n private makeEffect(e: Effect): THREE.Object3D {\n const team = e.side ? SIDE_COLOR[e.side] : 0xffffff;\n const basic = (color: number, opacity = 1) => new THREE.MeshBasicMaterial({ color, transparent: true, opacity, depthWrite: false, side: THREE.DoubleSide });\n switch (e.kind) {\n case \"hit\": { const m = new THREE.Mesh(new THREE.OctahedronGeometry(0.16), basic(0xfff3c0)); m.position.set(e.x, e.y, e.z); return m; }\n case \"spark\": { const m = new THREE.Mesh(new THREE.OctahedronGeometry(0.2), basic(0xffe27a)); m.position.set(e.x, e.y, e.z); return m; }\n case \"boom\": {\n const g = new THREE.Group();\n const ring = new THREE.Mesh(new THREE.RingGeometry(0.2, 0.32, 28), basic(e.color ?? 0xffa040)); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.05;\n const ball = new THREE.Mesh(new THREE.SphereGeometry(0.3, 10, 10), basic(0xffe6a0, 0.9)); ball.position.y = e.y;\n g.add(ring, ball); g.position.set(e.x, 0, e.z); return g;\n }\n case \"summon\": {\n const g = new THREE.Group();\n const ring = new THREE.Mesh(new THREE.RingGeometry(0.35, 0.5, 32), basic(team, 0.9)); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.04;\n const pillar = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.45, 2.2, 14, 1, true), basic(team, 0.35)); pillar.position.y = 1.1;\n g.add(ring, pillar); g.position.set(e.x, 0, e.z); return g;\n }\n case \"capture\": {\n const g = new THREE.Group();\n const ring = new THREE.Mesh(new THREE.RingGeometry(0.4, 0.6, 32), basic(team, 0.9)); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.05;\n const pillar = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.7, 4, 16, 1, true), basic(team, 0.4)); pillar.position.y = 2;\n g.add(ring, pillar); g.position.set(e.x, 0, e.z); return g;\n }\n case \"skill\": {\n const g = new THREE.Group();\n const ring = new THREE.Mesh(new THREE.RingGeometry(0.3, 0.42, 28), basic(0xffe27a, 0.95)); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.05;\n const glow = new THREE.Mesh(new THREE.SphereGeometry(0.5, 12, 12), basic(team, 0.35)); glow.position.y = 0.6;\n g.add(ring, glow); g.position.set(e.x, e.y, e.z); return g;\n }\n case \"quake\": {\n const g = new THREE.Group();\n for (let i = 0; i < 3; i++) { const r = new THREE.Mesh(new THREE.RingGeometry(0.3, 0.42, 28), basic(0xc8b48a, 0.8)); r.rotation.x = -Math.PI / 2; r.position.y = 0.05 + i * 0.01; g.add(r); }\n g.position.set(e.x, 0, e.z); return g;\n }\n case \"flame\": {\n const g = new THREE.Group();\n const dir = e.dirX ?? 1;\n for (let i = 0; i < 7; i++) {\n const s = new THREE.Mesh(new THREE.SphereGeometry(0.3 + i * 0.09, 8, 8), basic(i % 2 ? 0xff7a2a : 0xffd27a, 0.85));\n s.position.set(dir * (0.4 + i * 0.6), 0, (Math.random() - 0.5) * 0.2); g.add(s);\n }\n g.position.set(e.x, e.y, e.z); return g;\n }\n case \"howl\": { const r = new THREE.Mesh(new THREE.RingGeometry(0.5, 0.62, 40), basic(0xffc94a, 0.8)); r.rotation.x = -Math.PI / 2; r.position.set(e.x, 0.05, e.z); return r; }\n case \"dust\": {\n const g = new THREE.Group();\n for (let i = 0; i < 6; i++) { const s = new THREE.Mesh(new THREE.SphereGeometry(0.12, 6, 6), basic(0xd9cdb0, 0.8)); const a = (i / 6) * Math.PI * 2; s.position.set(Math.cos(a) * 0.2, 0.1, Math.sin(a) * 0.2); s.userData.a = a; g.add(s); }\n g.position.set(e.x, 0, e.z); return g;\n }\n default: { const m = new THREE.Mesh(new THREE.SphereGeometry(0.1), basic(0xffffff)); m.position.set(e.x, e.y, e.z); return m; }\n }\n }\n\n private animateEffect(obj: THREE.Object3D, e: Effect) {\n const k = Math.min(1, e.t / e.dur);\n const fade = 1 - k;\n const setOpacity = (o: THREE.Object3D, op: number) => o.traverse((c) => { const m = (c as THREE.Mesh).material as THREE.MeshBasicMaterial | undefined; if (m && \"opacity\" in m) m.opacity = op; });\n switch (e.kind) {\n case \"hit\": obj.scale.setScalar(0.6 + k * 1.4); obj.rotation.y += 0.4; setOpacity(obj, fade); obj.position.y = e.y + k * 0.3; break;\n case \"spark\": obj.scale.setScalar(0.5 + k * 1.2); obj.rotation.z += 0.5; setOpacity(obj, fade); break;\n case \"boom\": {\n const r = (e.radius ?? 1) / 0.3;\n obj.children[0].scale.setScalar(0.3 + k * r);\n obj.children[1].scale.setScalar(1 + k * 2.2);\n setOpacity(obj, fade * 0.95);\n break;\n }\n case \"summon\": obj.children[0].scale.setScalar(0.4 + k * 1.6); obj.children[1].scale.y = 1 - k; obj.children[1].position.y = 1.1 * (1 - k); setOpacity(obj, fade); break;\n case \"capture\": obj.children[0].scale.setScalar(0.5 + k * 3); obj.children[1].scale.set(1 + k * 0.5, 1, 1 + k * 0.5); setOpacity(obj, fade * 0.9); break;\n case \"skill\": obj.children[0].scale.setScalar(0.5 + k * (e.radius ?? 1) * 1.5); obj.children[1].scale.setScalar(0.8 + k * 1.5); setOpacity(obj, fade); break;\n case \"quake\": obj.children.forEach((c, i) => { const kk = Math.max(0, Math.min(1, k * 1.5 - i * 0.2)); c.scale.setScalar(0.5 + kk * (e.radius ?? 2) * 2.4); ((c as THREE.Mesh).material as THREE.MeshBasicMaterial).opacity = (1 - kk) * 0.8; }); break;\n case \"flame\": obj.children.forEach((c, i) => { const kk = Math.max(0, Math.min(1, k * 2.2 - i * 0.12)); c.scale.setScalar(0.2 + kk * 1.4); c.position.y = kk * 0.5; ((c as THREE.Mesh).material as THREE.MeshBasicMaterial).opacity = Math.max(0, 1 - kk) * 0.9; }); break;\n case \"howl\": obj.scale.setScalar(0.3 + k * (e.radius ?? 2) * 1.6); setOpacity(obj, fade); break;\n case \"dust\": obj.children.forEach((c) => { const a = c.userData.a as number; const r = (e.radius ?? 1) * k; c.position.set(Math.cos(a) * r, 0.1 + Math.sin(k * Math.PI) * 0.35, Math.sin(a) * r); c.scale.setScalar(1 + k); }); setOpacity(obj, fade * 0.8); break;\n default: setOpacity(obj, fade);\n }\n }\n\n render() { this.renderer.render(this.scene, this.camera); }\n\n /** ローディング/タイトル用にキャラを回して眺めるカメラ */\n idleShowcase(dt: number) { this.time += dt; this.updateCamera(dt); }\n}\n\nfunction mulberry(seed: number) {\n let a = seed >>> 0;\n return () => { a = (a + 0x6D2B79F5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };\n}\n","deleted",false,"label",[47,48,24],"client","render","982b2a97-735b-4d6e-81a1-41c72b4c4126",["D",1788631518075],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","城ドラ風 3D リアルタイム対戦ストラテジー（Three.js / スマホ対応）","imageUrl","userId","a29c49e1-ebc3-4041-ae9a-d1ed031b2b06","pinnedFileId","5a5f33fe-a954-11f1-b1ed-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f7936-1b37-72ac-a531-5645d098a506","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_106":102},"org",{"_9":10,"_100":10,"_101":102,"_59":60,"_103":104,"_105":44},"branch",{"_37":90,"_11":91,"_22":30,"_92":49,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":12,"_99":10},"isOwned",21,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/305894247?v=4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_83":-5,"_140":141,"_142":143,"_144":145,"_146":44,"_147":44,"_148":44,"_149":34,"_150":-5,"_151":-7,"_152":-7,"_153":67,"_154":44,"_155":44,"_156":-5,"_157":44,"_158":44,"_159":44,"_160":-5},"ENV",{"_111":112,"_113":114,"_115":91,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]