const T = api.THREE; api.world({ sky: "#a9d8ea", haze: "#e8c9ab", shadow: "#8a6da4" }); const sand = new T.Mesh(new T.CircleGeometry(600, 96), api.toon("#e6bd78")); sand.rotation.x = -Math.PI / 2; sand.position.y = 0.02; api.add(sand, { id: "sandy-ground", describe: "warm sandy ground", solid: false }); 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 yaw = Math.atan2(forward.x, forward.z); const center = new T.Vector3(api.player.x + forward.x * 20, 0, api.player.z + forward.z * 20); function worldPos(x, y, z) { return new T.Vector3(x, y, z).applyAxisAngle(new T.Vector3(0, 1, 0), yaw).add(center); } function groupAtCenter() { const g = new T.Group(); g.position.copy(center); g.rotation.y = yaw; return g; } const solid = groupAtCenter(); const decor = groupAtCenter(); const mats = {}; function mat(c, glow) { const k = c + !!glow; return mats[k] || (mats[k] = api.toon(c, glow ? { glow: true } : {})); } function mesh(parent, geo, color, x, y, z, rx = 0, ry = 0, rz = 0, glow = false) { const m = new T.Mesh(geo, mat(color, glow)); m.position.set(x, y, z); m.rotation.set(rx, ry, rz); parent.add(m); return m; } function box(p, x, y, z, w, h, d, c, ry = 0, rz = 0) { return mesh(p, new T.BoxGeometry(w, h, d), c, x, y, z, 0, ry, rz); } function cyl(p, x, y, z, r1, r2, h, c, n = 12) { return mesh(p, new T.CylinderGeometry(r1, r2, h, n), c, x, y, z); } function ball(p, x, y, z, sx, sy, sz, c, glow = false) { const o = mesh(p, new T.SphereGeometry(1, 14, 10), c, x, y, z, 0, 0, 0, glow); o.scale.set(sx, sy, sz); return o; } // Plaza paving and fine geometric tilework. box(decor, 0, 0.035, 0, 37, 0.03, 37, "#edce9a"); for (let x = -18; x <= 18; x += 2) { box(decor, x, 0.058, 0, 0.035, 0.012, 37, "#c79570"); } for (let z = -18; z <= 18; z += 2) { box(decor, 0, 0.058, z, 37, 0.012, 0.035, "#c79570"); } for (let x = -16; x <= 16; x += 4) { for (let z = -16; z <= 16; z += 4) { box(decor, x, 0.075, z, 0.24, 0.018, 0.24, "#2ea4ad", Math.PI / 4); } } // Octagonal tiled fountain, with an open basin and a sculpted central jet. cyl(solid, 0, 0.16, 0, 3.25, 3.35, 0.32, "#e8c594", 8); for (let i = 0; i < 16; i++) { const a = i * Math.PI * 2 / 16; const x = Math.sin(a) * 2.92, z = Math.cos(a) * 2.92; box(solid, x, 0.55, z, 1.18, 0.76, 0.32, i % 2 ? "#178d9a" : "#f6e2b6", a); box(decor, x * 1.055, 0.52, z * 1.055, 0.34, 0.28, 0.035, i % 2 ? "#f8d481" : "#277aa0", a + Math.PI / 4); box(solid, x, 1.00, z, 1.22, 0.15, 0.43, "#f5ddad", a); } cyl(decor, 0, 0.78, 0, 2.73, 2.73, 0.06, "#48bed1", 32); cyl(solid, 0, 0.78, 0, 0.48, 0.72, 0.95, "#eac695"); cyl(solid, 0, 1.27, 0, 1.04, 0.48, 0.20, "#2a9ba6"); cyl(solid, 0, 1.43, 0, 0.90, 1.00, 0.12, "#f3d6a5"); cyl(solid, 0, 1.65, 0, 0.17, 0.24, 0.45, "#dda452"); ball(decor, 0, 2.04, 0, 0.16, 0.3, 0.16, "#a9eaf0", true); const drops = []; for (let i = 0; i < 8; i++) { const a = i * Math.PI / 4; const curve = new T.QuadraticBezierCurve3( new T.Vector3(0, 2.02, 0), new T.Vector3(Math.sin(a) * 0.9, 2.8, Math.cos(a) * 0.9), new T.Vector3(Math.sin(a) * 1.75, 0.85, Math.cos(a) * 1.75) ); mesh(decor, new T.TubeGeometry(curve, 16, 0.035, 6, false), "#a9eaf0", 0, 0, 0); const d = ball(decor, 0, 0, 0, 0.085, 0.11, 0.085, "#e8ffff", true); drops.push({ curve, d, phase: i / 8 }); } // Stalls: wooden counters, striped canvas, spice mounds and brass lamps. function lantern(g, x, y, z, scale = 1) { cyl(g, x, y + 0.34 * scale, z, 0.035 * scale, 0.035 * scale, 0.55 * scale, "#b47732", 8); cyl(g, x, y + 0.06 * scale, z, 0.24 * scale, 0.18 * scale, 0.12 * scale, "#c49039", 8); cyl(g, x, y - 0.16 * scale, z, 0.21 * scale, 0.15 * scale, 0.35 * scale, "#f6c04b", 8); ball(decor, x, y - 0.13 * scale, z, 0.13 * scale, 0.15 * scale, 0.13 * scale, "#ffe796", true); cyl(g, x, y - 0.38 * scale, z, 0.15 * scale, 0.06 * scale, 0.12 * scale, "#ad7733", 8); } const spiceColors = ["#d34a30", "#ef9a2f", "#e6c12f", "#a44178", "#8d5633", "#729447", "#e75d3a", "#c78536"]; function stall(cx, cz, angle, palette) { const g = new T.Group(); g.position.set(cx, 0, cz); g.rotation.y = angle; solid.add(g); for (const x of [-2.45, 2.45]) { for (const z of [-1.08, 1.08]) { box(g, x, 1.55, z, 0.17, 3.1, 0.17, "#93522e"); ball(g, x, 3.13, z, 0.15, 0.15, 0.15, "#e6b359"); } } box(g, 0, 0.62, 0, 4.8, 1.15, 1.9, "#bf7542"); box(g, 0, 1.23, 0, 5.0, 0.18, 2.1, "#edb66f"); for (let i = 0; i < 10; i++) { box(g, -2.48 + i * 0.55, 3.17, 0, 0.55, 0.12, 2.7, palette[i % 2]); box(g, -2.48 + i * 0.55, 3.02, -1.32, 0.55, 0.30, 0.09, palette[i % 2]); } for (let i = 0; i < 8; i++) { const x = -1.9 + (i % 4) * 1.25; const z = -0.48 + Math.floor(i / 4) * 0.92; cyl(g, x, 1.36, z, 0.36, 0.27, 0.18, "#d6a35c"); cyl(g, x, 1.57, z, 0.02, 0.30, 0.40, spiceColors[(i + (cx > 0 ? 2 : 0)) % spiceColors.length], 12); } // Lanterns are separate decorative pieces so their glow stays non-solid. for (const x of [-2.1, 2.1]) { const p = new T.Vector3(x, 0, -1.1).applyAxisAngle(new T.Vector3(0, 1, 0), angle); lantern(decor, cx + p.x, 2.45, cz + p.z, 0.72); } } stall(-8.5, -5.5, Math.PI / 2, ["#ef8a3c", "#fff0ce"]); stall(8.5, -5.5, -Math.PI / 2, ["#d64c45", "#fbe7bb"]); stall(-8.5, 6, Math.PI / 2, ["#2e9daa", "#fbe7bb"]); stall(8.5, 6, -Math.PI / 2, ["#bd4e72", "#fbe7bb"]); // Rug merchant's stacks, woven borders and rolled carpets. box(solid, 0, 0.30, 10.8, 4.5, 0.6, 2.3, "#bc7948"); const rugColors = ["#c64555", "#df8c40", "#3298a0", "#91558e", "#e2b448"]; for (let i = 0; i < 5; i++) { const y = 0.68 + i * 0.16; box(solid, -0.45 + i * 0.08, y, 10.7, 2.8 - i * 0.08, 0.15, 1.7, rugColors[i]); box(decor, -0.45 + i * 0.08, y + 0.08, 10.7, 2.3 - i * 0.08, 0.015, 0.06, "#f9dc9b"); box(decor, -0.45 + i * 0.08, y + 0.085, 10.7, 0.18, 0.02, 0.18, "#f9dc9b", Math.PI / 4); } for (let i = 0; i < 4; i++) { const roll = cyl(solid, 1.2 + i * 0.32, 0.85, 11.2, 0.15, 0.15, 1.6, rugColors[i], 12); roll.rotation.x = Math.PI / 2; } // Surrounding warm plaster buildings with recessed-looking doors and decorative windows. function house(x, z, w, h, color) { box(solid, x, h / 2, z, w, h, 5, color); box(solid, x, h + 0.13, z, w + 0.3, 0.26, 5.3, "#f4d2a0"); for (let j = 0; j < Math.floor(w / 1.2); j++) { box(solid, x - w / 2 + 0.6 + j * 1.2, h + 0.38, z - 2.5, 0.65, 0.5, 0.35, "#e8bb82"); } box(decor, x, 1.25, z - 2.53, 1.55, 2.5, 0.08, "#276f82"); ball(decor, x, 2.48, z - 2.55, 0.78, 0.52, 0.06, "#276f82"); for (const dx of [-w * 0.3, w * 0.3]) { box(decor, x + dx, h * 0.68, z - 2.56, 1.05, 1.4, 0.08, "#f8dbad"); box(decor, x + dx, h * 0.68, z - 2.62, 0.75, 1.08, 0.06, "#288594"); box(decor, x + dx, h * 0.68, z - 2.67, 0.08, 1.08, 0.03, "#e8bf84"); box(decor, x + dx, h * 0.68, z - 2.67, 0.75, 0.08, 0.03, "#e8bf84"); } } house(-13, 19, 8, 6.5, "#e9b180"); house(-4, 20, 8, 7.8, "#f2c495"); house(5, 20, 8, 6.8, "#e3a77d"); house(14, 20, 8, 8, "#f3c998"); // Distant minaret, patterned bands, gallery and small green dome. const mx = 14, mz = 48; box(solid, mx, 8, mz, 5.3, 16, 5.3, "#efc18f"); box(solid, mx, 0.5, mz, 6.5, 1, 6.5, "#ddaa77"); for (let y = 3; y <= 14; y += 2.8) { box(decor, mx, y, mz - 2.68, 4.6, 0.2, 0.06, "#2e9a9b"); for (let x = -1.7; x <= 1.7; x += 0.85) { box(decor, mx + x, y + 0.6, mz - 2.7, 0.5, 0.5, 0.08, "#e6a45c", Math.PI / 4); } } for (const x of [-1.35, 0, 1.35]) { box(decor, mx + x, 11.3, mz - 2.73, 0.7, 2.4, 0.08, "#317b83"); ball(decor, mx + x, 12.45, mz - 2.75, 0.35, 0.35, 0.05, "#317b83"); } box(solid, mx, 16.3, mz, 6.4, 0.6, 6.4, "#e8b078"); box(solid, mx, 17.1, mz, 4.1, 1.2, 4.1, "#f4d3a4"); cyl(solid, mx, 18, mz, 1.7, 2, 0.75, "#2b9c96", 12); ball(solid, mx, 18.5, mz, 1.6, 1.0, 1.6, "#2caaa1"); cyl(solid, mx, 19.7, mz, 0.07, 0.07, 1.6, "#c69135", 8); ball(solid, mx, 20.55, mz, 0.23, 0.23, 0.23, "#e7bc55"); // Pots and palms provide a little shade. function palm(x, z) { cyl(solid, x, 0.45, z, 0.65, 0.48, 0.9, "#ce784b"); cyl(solid, x, 3.25, z, 0.23, 0.37, 5.1, "#ae7541"); for (let i = 0; i < 7; i++) { const a = i * Math.PI * 2 / 7; const leaf = ball(decor, x + Math.sin(a) * 1.15, 5.7, z + Math.cos(a) * 1.15, 0.45, 0.18, 1.75, "#4a9f66"); leaf.rotation.y = a; leaf.rotation.x = 0.2; } ball(decor, x, 5.9, z, 0.48, 0.3, 0.48, "#66b36e"); } palm(-15, -12); palm(15, -12); palm(-14, 13); palm(14, 13); api.add(solid, { id: "market-square", describe: "a Moroccan market square with spice stalls, rugs, fountain and minaret" }); api.add(decor, { id: "market-details", describe: "tiles, lanterns, water and market decorations", solid: false }); const sun = new T.Mesh(new T.SphereGeometry(20, 24, 16), api.toon("#ffe19b", { glow: true })); sun.position.copy(worldPos(-95, 100, 260)); api.add(sun, { id: "market-sun", describe: "a warm sun over the market", solid: false }); // Animated visitors wandering through open parts of the square. const people = [ [-4.8, -11.5, "#e87849", "#f2c9a0"], [4.8, -12.0, "#2e9c9e", "#a96f50"], [-4.6, 2.0, "#a760a5", "#d79b70"], [4.7, 1.8, "#e9af45", "#8f5b43"], [-4.8, 11.8, "#438eb1", "#c6895f"], [5.2, 12.8, "#dc7081", "#edbd91"] ]; people.forEach((p, i) => { const recipe = { parts: [ { name: "robe", shape: "roundbox", size: [0.75, 1.05, 0.46], pos: [0, 0.91, 0], color: p[2] }, { name: "head", shape: "sphere", size: [0.58, 0.62, 0.55], pos: [0, 1.72, 0], color: p[3] }, { name: "eyeL", shape: "eye", size: [0.19, 0.21, 0.12], pos: [0.16, 1.77, 0.25], color: "#ffffff" }, { name: "eyeR", shape: "eye", size: [0.21, 0.22, 0.12], pos: [-0.15, 1.78, 0.25], color: "#ffffff" }, { name: "nose", shape: "sphere", size: [0.12, 0.12, 0.13], pos: [0, 1.65, 0.31], color: p[3] }, { name: "headwrap", shape: "sphere", size: [0.64, 0.25, 0.6], pos: [0, 2.02, 0], color: i % 2 ? "#f3dab0" : "#dca94f" }, { name: "armL", shape: "capsule", size: [0.19, 0.65, 0.19], pos: [0.45, 1.05, 0], color: p[2], anchor: "top", mirror: true }, { name: "handL", shape: "sphere", size: [0.2, 0.2, 0.2], pos: [0, -0.6, 0], color: p[3], parent: "armL" }, { name: "legL", shape: "capsule", size: [0.22, 0.5, 0.22], pos: [0.22, 0.52, 0], color: "#a97550", anchor: "top", mirror: true }, { name: "shoeL", shape: "roundbox", size: [0.24, 0.13, 0.34], pos: [0, -0.46, 0.07], color: "#7b4c40", parent: "legL" } ], motion: { type: "wander", speed: 0.5 + i * 0.04, radius: 1.4 }, anim: [ { part: "legL", prop: "rx", amp: 28, speed: 1.3, walk: true }, { part: "armL", prop: "rx", amp: 18, speed: 1.3, walk: true } ] }; const person = api.build(recipe); person.position.copy(worldPos(p[0], 0.05, p[1])); person.rotation.y = yaw + (i % 2 ? 0.4 : -0.4); api.add(person, { id: "market-visitor-" + (i + 1), describe: "a visitor wandering through the market" }); }); api.onFrame((dt, t) => { for (const item of drops) { item.d.position.copy(item.curve.getPoint((t * 0.55 + item.phase) % 1)); } }); api.say = "I built a lively Moroccan market square, with spice stalls, rugs, glowing lanterns, a tiled fountain and a distant minaret. Visitors are wandering among the stalls."; api.suggest = ["Add a tea stall beside the fountain","Make the market glow at sunset","Add a wandering cat","Hang colorful banners across the square","Make the visitors haggle over the rugs"];