const T = api.THREE; const mat = {}; function m(color, glow = false) { const key = color + glow; return mat[key] || (mat[key] = api.toon(color, { glow })); } function box(g, name, size, pos, color, rot) { const o = new T.Mesh(new T.BoxGeometry(...size), m(color)); o.name = name; o.position.set(...pos); if (rot) o.rotation.set(...rot); g.add(o); return o; } function cyl(g, name, top, bottom, height, pos, color, sides = 12) { const o = new T.Mesh(new T.CylinderGeometry(top, bottom, height, sides), m(color)); o.name = name; o.position.set(...pos); g.add(o); return o; } function ball(g, name, size, pos, color) { const o = new T.Mesh(new T.SphereGeometry(1, 12, 8), m(color)); o.name = name; o.scale.set(...size); o.position.set(...pos); g.add(o); return o; } const forward = new T.Vector3(); api.camera.getWorldDirection(forward); forward.y = 0; if (forward.lengthSq() < 0.001) forward.set(0, 0, -1); forward.normalize(); const angle = Math.atan2(forward.x, forward.z); const origin = new T.Vector3(api.player.x, 0, api.player.z); function worldPoint(x, y, z) { const p = new T.Vector3(x, y, z).applyAxisAngle(new T.Vector3(0, 1, 0), angle); p.add(origin); return p; } function setSceneTransform(g, x, y, z, turn = 0) { g.position.copy(worldPoint(x, y, z)); g.rotation.y = angle + turn; } api.world({ sky: "#a9d8ea", haze: "#c4e6df", shadow: "#8a70ad" }); const grass = new T.Mesh(new T.CircleGeometry(600, 96), m("#83c875")); grass.rotation.x = -Math.PI / 2; grass.position.set(api.player.x, 0.02, api.player.z); api.add(grass, { id: "green-meadow", describe: "a broad green meadow", solid: false }); const landscape = new T.Group(); box(landscape, "road", [6.4, 0.08, 46], [0, 0.08, 24], "#d5ae76"); for (let i = 0; i < 52; i++) { const x = Math.sin(i * 12.71) * 2.75; const z = 3 + i * 0.82; const pebble = box(landscape, "road-stone", [0.25 + (i % 3) * 0.08, 0.035, 0.16], [x, 0.135, z], i % 2 ? "#b99579" : "#e5c894"); pebble.rotation.y = i * 1.7; } setSceneTransform(landscape, 0, 0, 0); api.add(landscape, { id: "castle-road", describe: "a winding-looking cobbled road to the castle", solid: false }); const castleZ = 72; const water = new T.Group(); const ring = new T.Mesh(new T.RingGeometry(17.7, 24.5, 96), m("#44aeb9")); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.06; water.add(ring); for (let i = 0; i < 28; i++) { const a = i * Math.PI * 2 / 28; const r = 20.3 + Math.sin(i * 7.3) * 1.5; const ripple = box(water, "moat-ripple", [1.2, 0.025, 0.09], [Math.cos(a) * r, 0.095, Math.sin(a) * r], "#a9e5db"); ripple.rotation.y = -a; } setSceneTransform(water, 0, 0, castleZ); api.add(water, { id: "castle-moat", describe: "a turquoise moat circling the castle", solid: false }); const castle = new T.Group(); cyl(castle, "castle-hill", 16.2, 17.7, 1.5, [0, 0.75, 0], "#80b85f", 32); const stone = "#c4a9ac", lightStone = "#e0c5ba", darkStone = "#826b91"; box(castle, "back-wall", [22, 7.5, 1.4], [0, 5.25, 11], stone); box(castle, "left-wall", [1.4, 7.5, 22], [-11, 5.25, 0], stone); box(castle, "right-wall", [1.4, 7.5, 22], [11, 5.25, 0], stone); box(castle, "front-wall-left", [7.8, 7.5, 1.4], [-7.1, 5.25, -11], stone); box(castle, "front-wall-right", [7.8, 7.5, 1.4], [7.1, 5.25, -11], stone); box(castle, "gate-lintel", [6.5, 2.4, 1.7], [0, 7.8, -11], lightStone); for (let i = -4; i <= 4; i++) { if (Math.abs(i) > 1) box(castle, "front-battlement", [1.25, 1.05, 1.6], [i * 2.45, 9.5, -11], lightStone); box(castle, "back-battlement", [1.25, 1.05, 1.6], [i * 2.45, 9.5, 11], lightStone); for (const s of [-1, 1]) box(castle, "side-battlement", [1.6, 1.05, 1.25], [s * 11, 9.5, i * 2.45], lightStone); } const flags = []; for (const x of [-11, 11]) for (const z of [-11, 11]) { cyl(castle, "tower", 3.35, 3.65, 13.5, [x, 8.25, z], stone, 12); cyl(castle, "tower-rim", 3.75, 3.75, 0.6, [x, 14.9, z], lightStone, 12); for (let i = 0; i < 8; i++) { const a = i * Math.PI / 4; const b = box(castle, "tower-merlon", [1.1, 1, 0.9], [x + Math.cos(a) * 3.35, 15.6, z + Math.sin(a) * 3.35], lightStone); b.rotation.y = -a; } cyl(castle, "tower-roof", 0, 3.35, 4.4, [x, 17.45, z], "#a4516f", 12); cyl(castle, "banner-pole", 0.09, 0.09, 3.1, [x, 20.6, z], "#714958", 8); const flag = new T.Group(); flag.position.set(x, 21.55, z); box(flag, "banner", [2.5, 1.05, 0.09], [1.25, -0.3, 0], "#d94d53"); box(flag, "banner-stripe", [0.25, 0.95, 0.11], [0.52, -0.3, 0], "#f4ca6b"); castle.add(flag); flags.push(flag); for (const yy of [7, 11]) { box(castle, "tower-arrow-slit", [0.35, 1.25, 0.08], [x, yy, z - 3.38], "#61465f"); } } box(castle, "inner-keep", [9, 9, 8], [0, 6, 4], "#d9bcba"); box(castle, "keep-roof-left", [5.5, 0.45, 9], [-2.15, 11.5, 4], "#a4516f", [0, 0, -0.55]); box(castle, "keep-roof-right", [5.5, 0.45, 9], [2.15, 11.5, 4], "#a4516f", [0, 0, 0.55]); for (const x of [-2.6, 0, 2.6]) { box(castle, "keep-window", [0.8, 1.5, 0.1], [x, 7.5, -0.06], "#674a69"); box(castle, "window-sill", [1.1, 0.15, 0.3], [x, 6.7, -0.1], "#f0d5bf"); } for (let i = 0; i < 17; i++) { const z = -24.7 + i * 0.72; const top = 0.18 + i * 0.09; box(castle, "drawbridge-plank", [5.1, 0.2, 0.68], [0, top - 0.1, z], i % 2 ? "#b98253" : "#cb9764"); } for (const s of [-1, 1]) { for (let i = 0; i < 4; i++) { const z = -24 + i * 3.4; const top = 0.2 + (z + 24.7) / 0.72 * 0.09; box(castle, "bridge-post", [0.25, 1.2, 0.25], [s * 2.4, top + 0.55, z], "#855845"); } const rail = box(castle, "bridge-rail", [0.18, 0.18, 11.2], [s * 2.4, 1.8, -18.8], "#855845"); rail.rotation.x = -0.125; } setSceneTransform(castle, 0, 0, castleZ); api.add(castle, { id: "medieval-castle", describe: "a hilltop stone castle with four tall towers and a lowered drawbridge" }); function cottage(x, z, side, index) { const g = new T.Group(); box(g, "cottage-walls", [5.5, 3.3, 4.6], [0, 1.65, 0], index % 2 ? "#f1d9b4" : "#e6c7a4"); for (const xx of [-2.55, 0, 2.55]) box(g, "timber", [0.2, 3.35, 0.18], [xx, 1.67, 2.34], "#795449"); box(g, "timber-beam", [5.5, 0.22, 0.18], [0, 2.9, 2.34], "#795449"); box(g, "door", [1.2, 2.1, 0.16], [0, 1.05, 2.39], "#a46a49"); ball(g, "door-latch", [0.07, 0.07, 0.07], [0.38, 1.05, 2.5], "#e7bd5d"); for (const xx of [-1.75, 1.75]) { box(g, "window", [0.85, 0.85, 0.12], [xx, 1.9, 2.4], "#82c9ca"); box(g, "window-cross", [0.08, 0.85, 0.16], [xx, 1.9, 2.48], "#78534a"); box(g, "window-crossbar", [0.85, 0.08, 0.16], [xx, 1.9, 2.48], "#78534a"); box(g, "flower-box", [1.05, 0.25, 0.3], [xx, 1.38, 2.52], "#a66c50"); for (let k = -1; k <= 1; k++) ball(g, "flower", [0.12, 0.13, 0.12], [xx + k * 0.27, 1.58, 2.55], k === 0 ? "#f4cf68" : "#f08cc0"); } box(g, "thatch-left", [3.6, 0.48, 5.4], [-1.48, 4.05, 0], "#d9ad59", [0, 0, -0.56]); box(g, "thatch-right", [3.6, 0.48, 5.4], [1.48, 4.05, 0], "#e3bc6d", [0, 0, 0.56]); box(g, "roof-ridge", [0.35, 0.3, 5.5], [0, 5.02, 0], "#c49a54"); box(g, "chimney", [0.8, 1.8, 0.8], [-1.65, 4.55, -0.8], "#a27773"); box(g, "chimney-cap", [1.05, 0.18, 1.05], [-1.65, 5.48, -0.8], "#735466"); setSceneTransform(g, x, 0.05, z, side > 0 ? -Math.PI / 2 : Math.PI / 2); api.add(g, { id: "cottage-" + index, describe: "a timber-framed thatched village cottage" }); } cottage(-11, 13, -1, 1); cottage(11, 18, 1, 2); cottage(-12, 29, -1, 3); cottage(12, 34, 1, 4); cottage(-13, 42, -1, 5); const greenery = new T.Group(); for (let i = 0; i < 22; i++) { const side = i % 2 ? 1 : -1; const x = side * (19 + (i % 4) * 3.4); const z = 5 + (i * 11.7) % 58; const h = 2.1 + (i % 3) * 0.45; cyl(greenery, "tree-trunk", 0.23, 0.34, h, [x, h / 2, z], "#936448", 8); ball(greenery, "tree-crown", [1.6, 1.5, 1.5], [x, h + 0.7, z], i % 3 ? "#65ad66" : "#8bc46b"); ball(greenery, "tree-crown", [1.0, 1.05, 1.0], [x + 0.9, h + 0.5, z + 0.2], "#78bc6b"); } for (let i = 0; i < 80; i++) { const side = i % 2 ? 1 : -1; const x = side * (5 + ((i * 7.3) % 28)); const z = 3 + ((i * 13.9) % 53); ball(greenery, "wildflower", [0.09, 0.13, 0.09], [x, 0.2, z], i % 3 ? "#f3a6be" : "#f4d477"); } setSceneTransform(greenery, 0, 0, 0); api.add(greenery, { id: "village-greens", describe: "orchard trees and meadow flowers around the village", solid: false }); function knightRecipe(coat, horse) { return { parts: [ { name: "horse-body", shape: "sphere", size: [1.1, 1.1, 2.1], pos: [0, 1.25, 0], color: horse }, { name: "horse-neck", shape: "capsule", size: [0.65, 1.3, 0.7], pos: [0, 1.65, 0.84], rot: [-25, 0, 0], color: horse }, { name: "horse-head", shape: "sphere", size: [0.75, 0.8, 0.95], pos: [0, 2.1, 1.15], color: horse }, { name: "muzzle", shape: "roundbox", size: [0.65, 0.42, 0.55], pos: [0, 1.88, 1.59], color: "#e8c39d" }, { name: "ear", shape: "cone", size: [0.22, 0.42, 0.22], pos: [0.26, 2.62, 1.1], color: horse, mirror: true }, { name: "horse-eye", shape: "eye", size: [0.25, 0.27, 0.13], pos: [0.32, 2.25, 1.48], color: "#ffffff", mirror: true }, { name: "mane", shape: "box", size: [0.22, 0.7, 0.95], pos: [0, 2.12, 0.66], color: "#624658" }, { name: "tail", shape: "tube", points: [[0, 1.5, -0.9], [0, 1.45, -1.35], [0.15, 0.8, -1.6]], radius: 0.16, color: "#624658" }, { name: "front-leg", shape: "capsule", size: [0.28, 0.95, 0.3], pos: [0.36, 1.0, 0.68], anchor: "top", color: horse, mirror: true }, { name: "back-leg", shape: "capsule", size: [0.28, 0.95, 0.3], pos: [0.36, 1.0, -0.68], anchor: "top", color: horse, mirror: true }, { name: "saddle", shape: "roundbox", size: [1.15, 0.3, 0.9], pos: [0, 1.78, -0.1], color: "#704b51" }, { name: "rider-body", shape: "roundbox", size: [0.7, 0.85, 0.46], pos: [0, 2.35, -0.05], color: coat }, { name: "rider-belt", shape: "box", size: [0.72, 0.12, 0.48], pos: [0, 2.12, -0.05], color: "#c9a36c" }, { name: "rider-head", shape: "sphere", size: [0.55, 0.58, 0.53], pos: [0, 3.05, 0], color: "#f2c9a0" }, { name: "rider-eye", shape: "eye", size: [0.17, 0.19, 0.1], pos: [0.14, 3.1, 0.25], color: "#ffffff", mirror: true }, { name: "helmet", shape: "sphere", size: [0.65, 0.4, 0.62], pos: [0, 3.33, 0], color: "#b6abc9" }, { name: "helmet-plume", shape: "wing", size: [0.5, 0.45, 0.12], pos: [0, 3.48, -0.05], rot: [0, 0, 35], color: "#e45d66" }, { name: "arm", shape: "capsule", size: [0.2, 0.7, 0.22], pos: [0.43, 2.35, 0.13], rot: [-35, 0, 0], color: "#b6abc9", mirror: true }, { name: "rider-leg", shape: "capsule", size: [0.2, 0.72, 0.24], pos: [0.48, 1.85, -0.05], color: "#b6abc9", mirror: true }, { name: "shield", shape: "sphere", size: [0.18, 0.85, 0.65], pos: [0.53, 2.25, -0.1], color: "#d54f59" }, { name: "shield-mark", shape: "box", size: [0.2, 0.52, 0.1], pos: [0.64, 2.25, -0.1], color: "#f4d477" } ], anim: [ { part: "front-leg", prop: "rx", amp: 28, speed: 1.7 }, { part: "back-leg", prop: "rx", amp: 28, speed: 1.7, phase: 0.5 }, { part: "tail", prop: "ry", amp: 15, speed: 1.1 } ] }; } const riders = []; for (let i = 0; i < 3; i++) { const rider = api.build(knightRecipe(i === 1 ? "#8a67ae" : "#b95761", ["#b77b55", "#e0bd87", "#896170"][i])); const lane = i === 1 ? 1.25 : -1.25; setSceneTransform(rider, lane, 0.08, 8 + i * 10); api.add(rider, { id: "mounted-knight-" + (i + 1), describe: "a knight on horseback riding toward the castle", solid: false }); riders.push({ obj: rider, lane, phase: i * 10 }); } api.onFrame((dt, t) => { flags.forEach((flag, i) => { flag.rotation.y = 0.22 * Math.sin(t * 3.2 + i); flag.rotation.z = 0.07 * Math.sin(t * 4 + i); }); riders.forEach(r => { const z = 7 + ((t * 1.45 + r.phase) % 37); r.obj.position.copy(worldPoint(r.lane, 0.08 + 0.04 * Math.sin(t * 10 + r.phase), z)); r.obj.rotation.y = angle; }); }); api.say = "I built a hilltop castle with a moat and lowered drawbridge, plus a thatched village and knights riding up the road."; api.suggest = [ "add a royal feast inside the castle", "put villagers and market stalls along the road", "add a dragon circling the towers", "turn the sky into a golden sunset" ];