const T = api.THREE; const mat = {}; function m(c) { return mat[c] || (mat[c] = api.toon(c)); } function box(parent, name, color, x, y, z, sx, sy, sz, rotZ = 0) { const o = new T.Mesh(new T.BoxGeometry(sx, sy, sz), m(color)); o.name = name; o.position.set(x, y, z); o.rotation.z = rotZ; parent.add(o); return o; } function ball(parent, name, color, x, y, z, sx, sy, sz) { const o = new T.Mesh(new T.SphereGeometry(1, 12, 8), m(color)); o.name = name; o.position.set(x, y, z); o.scale.set(sx, sy, sz); parent.add(o); return o; } function cylinder(parent, name, color, x, y, z, r1, r2, h, segments = 10) { const o = new T.Mesh(new T.CylinderGeometry(r1, r2, h, segments), m(color)); o.name = name; o.position.set(x, y, z); parent.add(o); return o; } function tube(parent, name, color, points, radius) { const curve = new T.CatmullRomCurve3(points.map(p => new T.Vector3(...p))); const o = new T.Mesh(new T.TubeGeometry(curve, 18, radius, 8, false), m(color)); o.name = name; parent.add(o); return o; } api.world({sky:"#81d5d4", haze:"#b5e5cf", shadow:"#735b9b"}); const ground = new T.Mesh(new T.CircleGeometry(600, 96), m("#7fcf8c")); ground.rotation.x = -Math.PI / 2; ground.position.set(api.player.x, 0.02, api.player.z); api.add(ground, {id:"tropical-ground", describe:"a broad grassy tropical landscape", solid:false}); const market = new T.Group(); market.name = "floating-market"; const waterDecor = new T.Group(); const boats = []; // Sandy towpaths and wooden walkways on both banks. for (const side of [-1, 1]) { box(waterDecor, "sandy-bank", "#e8c779", side * 9.2, 0.045, 0, 4.4, 0.08, 99); box(market, "boardwalk", "#bd814e", side * 7.95, 0.22, 0, 1.55, 0.28, 86); for (let z = -41; z <= 41; z += 2) { box(market, "walkway-plank", "#d99d64", side * 7.95, 0.38, z, 1.55, 0.045, 0.1); } } function house(side, z, index) { const g = new T.Group(); g.name = "stilt-house-" + index; g.position.set(side * 13.7, 0, z); g.rotation.y = side === 1 ? -Math.PI / 2 : Math.PI / 2; market.add(g); const wood = index % 2 ? "#df9672" : "#edc177"; for (const x of [-2.4, 2.4]) for (const zz of [-1.75, 1.75]) { box(g, "stilt", "#805334", x, 1.1, zz, 0.34, 2.2, 0.34); } box(g, "floor", "#a46c40", 0, 2.2, 0, 5.7, 0.3, 4.8); box(g, "house-walls", wood, 0, 3.65, 0, 5.15, 2.8, 4.15); // Open porch in front of the main wall. box(g, "porch", "#c9915c", 0, 2.2, 2.7, 5.7, 0.25, 1.6); for (const x of [-2.5, 2.5]) { box(g, "porch-post", "#805334", x, 3.5, 3.2, 0.22, 2.5, 0.22); } box(g, "door", "#80513e", 0, 3.25, 2.1, 1.05, 2.0, 0.09); ball(g, "door-knob", "#f5d46c", 0.36, 3.25, 2.18, 0.08, 0.08, 0.08); for (const x of [-1.75, 1.75]) { box(g, "window", "#67c5c6", x, 3.8, 2.12, 0.95, 0.85, 0.1); box(g, "shutter", "#8e5a76", x - 0.57, 3.8, 2.16, 0.2, 0.92, 0.12); box(g, "shutter", "#8e5a76", x + 0.57, 3.8, 2.16, 0.2, 0.92, 0.12); box(g, "window-crossbar", "#f7d391", x, 3.8, 2.2, 0.08, 0.85, 0.06); } // Two sloping roof panels, with a ridge. box(g, "roof-left", "#c45f52", -1.42, 5.32, 0, 3.3, 0.24, 5.2, 0.43); box(g, "roof-right", "#c45f52", 1.42, 5.32, 0, 3.3, 0.24, 5.2, -0.43); box(g, "roof-ridge", "#f0a45c", 0, 5.98, 0, 0.25, 0.25, 5.3); // Walkable staircase down towards the canal. for (let i = 0; i < 5; i++) { const h = 0.44 * (5 - i); box(g, "step", "#b37a4b", 0, h / 2, 3.65 + i * 0.43, 1.5, h, 0.48); } for (const x of [-2.1, 2.1]) { cylinder(g, "flower-pot", "#bd5d4c", x, 2.42, 2.8, 0.25, 0.18, 0.38); for (let k = 0; k < 3; k++) { const a = k * 2.1; tube(g, "flower-stem", "#489c5c", [[x,2.55,2.8],[x+Math.cos(a)*0.1,2.9,2.8+Math.sin(a)*0.1]], 0.035); ball(g, "porch-flower", k === 1 ? "#f4d36b" : "#f08cc0", x+Math.cos(a)*0.1, 2.94, 2.8+Math.sin(a)*0.1, 0.15, 0.13, 0.15); } } } for (let i = 0; i < 4; i++) { house(-1, -30 + i * 20, i * 2); house(1, -20 + i * 20, i * 2 + 1); } function palm(side, z, index) { const g = new T.Group(); g.name = "leaning-palm-" + index; g.position.set(side * (10.1 + (index % 2) * 0.7), 0, z); market.add(g); const lean = -side * 2.2; tube(g, "palm-trunk", "#b97848", [[0,0,0],[0.1,2,0],[lean*0.3,4.4,0],[lean*0.7,6.6,0],[lean,8,0]], 0.3); for (let j = 1; j < 5; j++) { const y = j * 1.45; const x = lean * Math.pow(y / 8, 1.5); const ring = cylinder(g, "trunk-band", "#d59b60", x, y, 0, 0.32, 0.32, 0.11); ring.rotation.z = side * 0.2; } for (let k = 0; k < 7; k++) { const a = k * Math.PI * 2 / 7 + 0.3; const dx = Math.cos(a), dz = Math.sin(a); const leaf = ball(g, "palm-frond", k % 2 ? "#35a96d" : "#58bd72", lean + dx * 1.55, 8.0, dz * 1.55, 1, 1, 1); leaf.scale.set(0.46, 0.16, 2.0); leaf.rotation.y = Math.atan2(dx, dz); leaf.rotation.z = -0.15 * dx; tube(g, "frond-spine", "#b9d16a", [[lean,8.1,0],[lean+dx*1.5,8.1,dz*1.5],[lean+dx*3,7.5,dz*3]], 0.045); } for (let k = 0; k < 3; k++) { ball(g, "coconut", "#966346", lean + Math.cos(k*2.1)*0.32, 7.75, Math.sin(k*2.1)*0.32, 0.27, 0.3, 0.27); } } for (let i = 0; i < 5; i++) { palm(-1, -38 + i * 20, i); palm(1, -34 + i * 20, i + 5); } function vendor(g, shirt, index) { const p = new T.Group(); p.name = "vendor-" + index; p.position.set(0, 0.65, 1.9); g.add(p); box(p, "body", shirt, 0, 0.58, 0, 0.72, 0.8, 0.48); box(p, "legs", "#72527a", 0, 0.18, 0, 0.65, 0.36, 0.44); ball(p, "head", "#f2c9a0", 0, 1.25, 0, 0.37, 0.43, 0.35); for (const x of [-0.16, 0.16]) { ball(p, "eye", "#ffffff", x, 1.3, 0.3, 0.125, 0.15, 0.09); ball(p, "pupil", "#231921", x, 1.3, 0.382, 0.045, 0.05, 0.025); } cylinder(p, "straw-hat-brim", "#e8c16a", 0, 1.66, 0, 0.63, 0.63, 0.08, 16); cylinder(p, "straw-hat-crown", "#f3d487", 0, 1.82, 0, 0.2, 0.4, 0.32, 12); cylinder(p, "hat-band", "#d87958", 0, 1.7, 0, 0.39, 0.39, 0.07, 12); const arm = new T.Group(); arm.name = "waving-arm"; arm.position.set(0.42, 0.85, 0); p.add(arm); box(arm, "sleeve", shirt, 0.12, -0.2, 0, 0.25, 0.48, 0.26, 0.4); ball(arm, "hand", "#f2c9a0", 0.22, -0.42, 0, 0.14, 0.14, 0.14); box(p, "other-arm", shirt, -0.45, 0.65, 0, 0.23, 0.55, 0.25, -0.3); ball(p, "other-hand", "#f2c9a0", -0.55, 0.38, 0, 0.13, 0.13, 0.13); return arm; } function makeBoat(x, z, index) { const b = new T.Group(); b.name = "fruit-boat-" + index; b.position.set(x, 0, z); b.rotation.y = index % 2 ? 0.1 : -0.1; market.add(b); // Rounded ends and a low raised rim suggest a carved wooden hull. const hull = ball(b, "wooden-hull", "#985c38", 0, 0.45, 0, 1.25, 0.53, 3.15); box(b, "boat-deck", "#d69a5c", 0, 0.78, 0, 1.85, 0.13, 4.9); for (const s of [-1, 1]) box(b, "gunwale", "#704435", s*1.04, 0.86, 0, 0.15, 0.2, 5.2); ball(b, "bow-tip", "#ad7043", 0, 0.7, -2.75, 0.52, 0.35, 0.7); ball(b, "stern-tip", "#ad7043", 0, 0.7, 2.75, 0.52, 0.35, 0.7); for (let basket = 0; basket < 3; basket++) { const bz = -1.65 + basket * 1.35; cylinder(b, "woven-basket", "#d2a368", 0, 0.98, bz, 0.8, 0.65, 0.45, 12); cylinder(b, "basket-rim", "#f2cb87", 0, 1.22, bz, 0.82, 0.82, 0.09, 12); const colors = basket === 0 ? ["#f5c84d","#ef8a3c","#f3b33f"] : basket === 1 ? ["#eb6b55","#f5a640","#e7cf4d"] : ["#f08cc0","#ffcae4","#f4d56f"]; for (let k = 0; k < 13; k++) { const angle = k * 2.399; const r = 0.6 * Math.sqrt(k / 13); const px = Math.cos(angle)*r, pz = bz + Math.sin(angle)*r; const py = 1.25 + (1-r)*0.28 + (k%3)*0.06; if (basket < 2) { ball(b, "tropical-fruit", colors[k%3], px, py, pz, 0.22, 0.2 + (k%2)*0.05, 0.22); if (k%4 === 0) ball(b, "fruit-leaf", "#58a956", px+0.08, py+0.19, pz, 0.12, 0.04, 0.07); } else { ball(b, "flower-center", "#f9d467", px, py, pz, 0.09, 0.09, 0.09); for (let j = 0; j < 5; j++) { const a = j * Math.PI * 2 / 5; ball(b, "flower-petal", colors[k%3], px+Math.cos(a)*0.12, py, pz+Math.sin(a)*0.12, 0.1, 0.07, 0.1); } } } } // A paddle rests over the side. const paddle = box(b, "paddle-shaft", "#e3b270", 1.25, 1.15, 0.8, 0.1, 0.1, 3.1); paddle.rotation.z = 0.2; box(b, "paddle-blade", "#d09255", 1.25, 1.15, -0.8, 0.38, 0.09, 0.65); const arm = vendor(b, ["#ed8b72","#69b7aa","#b78acf","#efb05e"][index%4], index); boats.push({boat:b, arm, phase:index*1.4}); } for (let i = 0; i < 6; i++) makeBoat(i%2 ? 3.1 : -3.1, -28 + i*10, i); api.place(market, {where:"ahead", distance:38}, { id:"floating-market", describe:"a canal market with fruit boats, vendors, stilt houses and palms" }); // Match the decorative water and banks to the market's final placed position. waterDecor.position.copy(market.position); waterDecor.rotation.copy(market.rotation); box(waterDecor, "canal-water", "#48b8bd", 0, 0.09, 0, 14, 0.08, 100); for (let i = 0; i < 65; i++) { const x = -6.2 + ((i * 37) % 124) / 10; const z = -47 + ((i * 71) % 940) / 10; box(waterDecor, "water-glint", i % 3 ? "#94e0d4" : "#d1eee0", x, 0.145, z, 0.55 + (i%4)*0.2, 0.025, 0.055); } api.add(waterDecor, {id:"market-canal", describe:"turquoise canal water and sandy banks", solid:false}); api.onFrame((dt, t) => { for (const item of boats) { item.boat.position.y = 0.07 + Math.sin(t*1.2 + item.phase)*0.08; item.boat.rotation.z = Math.sin(t*0.8 + item.phase)*0.025; item.arm.rotation.z = -0.75 + Math.sin(t*2 + item.phase)*0.35; } }); api.say = "I built a floating tropical market, with fruit-laden boats, waving vendors, stilt houses and palms along the canal."; api.suggest = [ "Add more colorful boats to the canal", "Make the sky glow with a tropical sunset", "Add a flock of parrots above the market", "Build a wooden bridge across the canal" ];