const T = api.THREE; const p = api.player; const dir = new T.Vector3(); api.camera.getWorldDirection(dir); dir.y = 0; if (dir.lengthSq() < 0.001) dir.set(0, 0, 1); dir.normalize(); const yaw = Math.atan2(dir.x, dir.z); const right = new T.Vector3(Math.cos(yaw), 0, -Math.sin(yaw)); function world(x, z) { return [p.x + right.x * x + dir.x * z, p.z + right.z * x + dir.z * z]; } function addLocal(group, id, describe, x, z, solid = true) { const q = world(x, z); group.position.set(q[0], api.groundHeight(q[0], q[1]), q[1]); group.rotation.y = yaw; api.add(group, { id, describe, solid }); return group; } const mats = {}; function mat(c) { return mats[c] || (mats[c] = api.toon(c)); } const boxGeo = new T.BoxGeometry(1, 1, 1); const cylGeo = new T.CylinderGeometry(1, 1, 1, 12); function box(g, x, y, z, w, h, d, color, name) { const m = new T.Mesh(boxGeo, mat(color)); m.position.set(x, y, z); m.scale.set(w, h, d); if (name) m.name = name; g.add(m); return m; } function cyl(g, x, y, z, r, h, color, name) { const m = new T.Mesh(cylGeo, mat(color)); m.position.set(x, y, z); m.scale.set(r, h, r); if (name) m.name = name; g.add(m); return m; } function studs(g, x, y, z, w, d, color, spacing = 1.1) { const nx = Math.max(1, Math.floor(w / spacing)); const nz = Math.max(1, Math.floor(d / spacing)); for (let i = 0; i < nx; i++) for (let j = 0; j < nz; j++) { cyl(g, x + (i - (nx - 1) / 2) * spacing, y + 0.09, z + (j - (nz - 1) / 2) * spacing, 0.24, 0.18, color); } } api.world({ sky: "#a9d8ea", haze: "#c5edf0", shadow: "#7352a3" }); api.hide("ground"); const land = new T.Mesh(new T.CircleGeometry(600, 96), mat("#8fd1b0")); land.rotation.x = -Math.PI / 2; land.position.y = 0.02; api.add(land, { id: "toy-land", describe: "a mint green toy city baseplate", solid: false }); const roads = new T.Group(); box(roads, 0, 0.055, 2, 10, 0.07, 84, "#a48aca"); box(roads, 0, 0.055, 0, 68, 0.07, 9, "#a48aca"); for (let z = -36; z <= 38; z += 5) box(roads, 0, 0.1, z, 0.28, 0.035, 2.5, "#fff1a4"); for (let x = -32; x <= 32; x += 5) if (Math.abs(x) > 6) box(roads, x, 0.1, 0, 2.5, 0.035, 0.28, "#fff1a4"); for (const x of [-6, 6]) box(roads, x, 0.07, 2, 1.5, 0.1, 80, "#f5c5d6"); for (const z of [-5.3, 5.3]) box(roads, 0, 0.07, z, 66, 0.1, 1.4, "#f5c5d6"); addLocal(roads, "toy-streets", "lavender toy streets with pink sidewalks", 0, 0, false); const colors = ["#ef8a3c", "#f08cc0", "#2ea4ad", "#f2cb52", "#9b6ae0", "#e45d60", "#6cb6e6", "#8fd14f"]; let b = 0; for (const x of [-24, -13, 13, 24]) for (const z of [-24, -11, 13, 28]) { const g = new T.Group(); const main = colors[b % colors.length], trim = colors[(b + 3) % colors.length]; const h = 6 + (b % 4) * 1.25; const w = 7.2, d = 7; box(g, 0, h / 2, 0, w, h, d, main, "building"); box(g, 0, 0.23, 0, w + 0.5, 0.46, d + 0.5, trim); box(g, 0, h + 0.25, 0, w + 0.35, 0.5, d + 0.35, trim, "roof"); studs(g, 0, h + 0.5, 0, w, d, trim, 1.5); const front = x < 0 ? 1 : -1; const faceX = front * (w / 2 + 0.06); box(g, faceX, 1.2, 0, 0.15, 2.4, 1.45, "#76549e", "door"); cyl(g, faceX + front * 0.12, 1.15, 0.42, 0.09, 0.12, "#f8da68"); const floors = Math.floor((h - 1) / 2); for (let floor = 1; floor <= floors; floor++) { for (const zz of [-2.25, 0, 2.25]) { if (floor === 1 && zz === 0) continue; box(g, faceX, floor * 1.8 + 0.3, zz, 0.14, 1.15, 1.35, "#a9e3ed"); box(g, faceX + front * 0.08, floor * 1.8 + 0.3, zz, 0.08, 0.12, 1.35, "#f8e7bd"); } } for (const zz of [-2.2, 0, 2.2]) { box(g, zz, h * 0.62, -d / 2 - 0.05, 1.25, 1.25, 0.12, "#a9e3ed"); } box(g, 2.1, h + 1.05, -1.6, 0.8, 1.6, 0.8, main, "chimney"); studs(g, 2.1, h + 1.85, -1.6, 0.8, 0.8, main); addLocal(g, "toy-building-" + b, "a colorful studded toy-block building", x, z); b++; } const castle = new T.Group(); const stone = "#b9a3e8", accent = "#f08cc0", gold = "#f2cb52"; box(castle, 0, 0.25, 0, 12, 0.5, 11, "#8a5cc9", "foundation"); box(castle, 0, 3, -4.7, 10, 6, 0.8, stone, "back-wall"); box(castle, -4.7, 3, 0, 0.8, 6, 9, stone, "left-wall"); box(castle, 4.7, 3, 0, 0.8, 6, 9, stone, "right-wall"); box(castle, -3.35, 3, 4.7, 3.1, 6, 0.8, stone, "gate-left"); box(castle, 3.35, 3, 4.7, 3.1, 6, 0.8, stone, "gate-right"); box(castle, 0, 5.15, 4.7, 3.7, 1.7, 0.8, stone, "gate-top"); for (const x of [-4.6, 4.6]) for (const z of [-4.4, 4.4]) { box(castle, x, 4, z, 2.3, 8, 2.3, accent, "tower"); box(castle, x, 8.2, z, 2.6, 0.4, 2.6, gold); for (const dx of [-0.8, 0.8]) for (const dz of [-0.8, 0.8]) box(castle, x + dx, 8.65, z + dz, 0.65, 0.55, 0.65, gold); studs(castle, x, 8.4, z, 1, 1, gold); } for (let x = -4; x <= 4; x += 1.6) { box(castle, x, 6.3, -4.7, 0.8, 0.6, 0.8, gold); if (Math.abs(x) > 2.2) box(castle, x, 6.3, 4.7, 0.8, 0.6, 0.8, gold); } box(castle, 0, 1.1, -1, 4.5, 2.2, 3.5, "#f2cb52", "keep"); box(castle, 0, 2.35, -1, 4.8, 0.3, 3.8, "#ef8a3c"); studs(castle, 0, 2.5, -1, 4.5, 3.5, "#ef8a3c"); box(castle, -4.6, 10.1, -4.4, 0.15, 3, 0.15, "#f2cb52", "flagpole"); box(castle, -3.7, 11, -4.4, 1.7, 0.9, 0.16, "#2ea4ad", "flag"); addLocal(castle, "block-castle", "a pink and lavender toy-block castle with an open gate", 0, 59); const track = new T.Group(); const rx = 18, rz = 14, cz = 59, segments = 80; for (let i = 0; i < segments; i++) { const a = i * 2 * Math.PI / segments, next = (i + 1) * 2 * Math.PI / segments; for (const off of [-0.75, 0.75]) { const X = (rx + off) * Math.cos(a), Z = cz + (rz + off) * Math.sin(a); const X2 = (rx + off) * Math.cos(next), Z2 = cz + (rz + off) * Math.sin(next); const m = box(track, (X + X2) / 2, 0.17, (Z + Z2) / 2, 0.18, 0.22, Math.hypot(X2-X, Z2-Z), "#76549e"); m.rotation.y = Math.atan2(X2-X, Z2-Z); } if (i % 2 === 0) { const s = box(track, rx * Math.cos(a), 0.08, cz + rz * Math.sin(a), 2.4, 0.16, 0.42, "#ef8a3c"); s.rotation.y = Math.atan2(-rx * Math.sin(a), rz * Math.cos(a)); } } addLocal(track, "castle-track", "a loop of toy train track around the castle", 0, 0, false); const trainRoot = new T.Group(); const cars = []; for (let i = 0; i < 3; i++) { const g = new T.Group(); const c = ["#e95954", "#2ea4ad", "#f2cb52"][i]; box(g, 0, 0.72, 0, 1.9, 0.45, 3.2, "#76549e"); box(g, 0, 1.35, 0, 1.7, 1.1, 2.8, c); if (i === 0) { box(g, 0, 2.05, -0.7, 1.65, 1.05, 1.15, c, "cab"); box(g, 0, 2.1, -1.3, 1.3, 0.6, 0.08, "#a9e3ed"); cyl(g, 0, 2.2, 0.8, 0.28, 0.9, "#76549e", "chimney"); cyl(g, 0, 1.35, 1.49, 0.35, 0.18, "#f8dc74").rotation.x = Math.PI / 2; } else { box(g, 0, 1.98, 0, 1.9, 0.2, 2.9, i === 1 ? "#8fd14f" : "#f08cc0"); studs(g, 0, 2.08, 0, 1.8, 2.8, i === 1 ? "#8fd14f" : "#f08cc0", 0.9); } for (const x of [-1, 1]) for (const z of [-0.95, 0.95]) { const wheel = cyl(g, x, 0.48, z, 0.42, 0.22, "#55385e"); wheel.rotation.z = Math.PI / 2; } trainRoot.add(g); cars.push(g); } addLocal(trainRoot, "block-train", "a colorful toy locomotive pulling two block wagons", 0, 0, false); api.onFrame((dt, t) => { for (let i = 0; i < cars.length; i++) { const a = t * 0.12 - i * 0.21; cars[i].position.set(rx * Math.cos(a), 0.05, cz + rz * Math.sin(a)); cars[i].rotation.y = Math.atan2(-rx * Math.sin(a), rz * Math.cos(a)); } }); for (let i = 0; i < 4; i++) { const g = new T.Group(), color = colors[(i * 2) % colors.length]; box(g, 0, 0.55, 0, 2.2, 0.5, 3.8, "#76549e", "chassis"); box(g, 0, 1, 0, 2.2, 0.7, 3.5, color, "body"); box(g, 0, 1.65, -0.25, 1.8, 0.75, 1.8, color, "cabin"); box(g, 0, 1.67, 0.67, 1.55, 0.52, 0.06, "#a9e3ed", "windshield"); box(g, 0, 2.1, -0.25, 1.9, 0.18, 1.9, "#f2cb52"); studs(g, 0, 2.19, -0.25, 1.7, 1.7, "#f2cb52", 0.8); for (const x of [-1.12, 1.12]) for (const z of [-1.15, 1.15]) { const w = cyl(g, x, 0.45, z, 0.42, 0.22, "#55385e"); w.rotation.z = Math.PI / 2; } for (const x of [-0.7, 0.7]) box(g, x, 1.05, 1.77, 0.4, 0.3, 0.1, "#fff1a4"); const root = new T.Group(); root.add(g); addLocal(root, "block-car-" + i, "a colorful moving block car", 0, 0, false); api.onFrame((dt, t) => { const forward = i % 2 === 0; root.children[0].position.set(forward ? -2.6 : 2.6, 0.05, ((t * (3 + i * 0.25) + i * 17) % 76) * (forward ? 1 : -1) + (forward ? -38 : 38)); root.children[0].rotation.y = forward ? 0 : Math.PI; }); } for (let i = 0; i < 12; i++) { const g = new T.Group(); box(g, 0, 1.3, 0, 0.8, 2.6, 0.8, "#a85d40", "trunk"); const green = i % 2 ? "#8fd14f" : "#39b486"; box(g, 0, 3, 0, 2.5, 1.2, 2.5, green, "leaves"); box(g, 0, 4, 0, 1.8, 0.9, 1.8, green); studs(g, 0, 4.45, 0, 1.8, 1.8, green, 0.85); const x = i % 2 ? 8.7 : -8.7; const z = -32 + Math.floor(i / 2) * 12; addLocal(g, "block-tree-" + i, "a chunky green toy-block tree", x, z); } const outfits = ["#ef8a3c", "#2ea4ad", "#9b6ae0", "#f08cc0", "#8fd14f", "#e95954"]; for (let i = 0; i < 10; i++) { const person = api.build({ parts: [ {name:"body", shape:"roundbox", size:[0.7,0.8,0.38], pos:[0,1.05,0], color:outfits[i % outfits.length]}, {name:"head", shape:"roundbox", size:[0.58,0.55,0.5], pos:[0,1.75,0], color:"#f2c9a0"}, {name:"eyeL", shape:"eye", size:[0.2,0.22,0.1], pos:[0.15,1.79,0.26], color:"#ffffff"}, {name:"eyeR", shape:"eye", size:[0.18,0.2,0.1], pos:[-0.15,1.79,0.26], color:"#ffffff"}, {name:"hair", shape:"box", size:[0.6,0.16,0.51], pos:[0,2.06,0], color:i % 2 ? "#6c4465":"#ef8a3c"}, {name:"armL", shape:"box", size:[0.21,0.68,0.22], pos:[0.46,1.35,0], anchor:"top", color:outfits[i % outfits.length], mirror:true}, {name:"legL", shape:"box", size:[0.25,0.68,0.28], pos:[0.2,0.67,0], anchor:"top", color:"#76549e", mirror:true}, {name:"handL", shape:"roundbox", size:[0.23,0.2,0.23], pos:[0.46,0.68,0], color:"#f2c9a0", mirror:true} ], anim:[ {part:"legL",prop:"rx",amp:30,speed:1.5,walk:true}, {part:"armL",prop:"rx",amp:25,speed:1.5,phase:0.5,walk:true} ], motion:{type:"wander",speed:0.65,radius:2.5} }); const x = i % 2 ? 7.2 : -7.2, z = -28 + Math.floor(i / 2) * 13; addLocal(person, "block-person-" + i, "a little blocky person strolling by the toy streets", x, z); } api.say = "I built a colorful block city with a castle, a circling train, moving cars, trees, and little strolling people!"; api.suggest = [ "Add a toy train station by the castle", "Give the city a blocky park and playground", "Add a giant friendly toy robot", "Make the city glow at sunset" ];