const T = api.THREE; const ink = "#3a2230"; const camDir = new T.Vector3(); api.camera.getWorldDirection(camDir); camDir.y = 0; if (camDir.lengthSq() < 0.001) camDir.set(0, 0, 1); camDir.normalize(); const yaw = Math.atan2(camDir.x, camDir.z); const origin = new T.Vector3(api.player.x, 0, api.player.z); function at(x, y, z) { return new T.Vector3( origin.x + x * Math.cos(yaw) + z * Math.sin(yaw), y, origin.z - x * Math.sin(yaw) + z * Math.cos(yaw) ); } function install(group, id, describe, x = 0, y = 0, z = 0, solid = true) { group.position.copy(at(x, y, z)); group.rotation.y = yaw; api.add(group, { id, describe, solid }); return group; } function mat(c, glow = false) { return api.toon(c, { glow }); } const materials = {}; function M(c, glow = false) { const k = c + glow; return materials[k] || (materials[k] = mat(c, glow)); } function box(g, x, y, z, w, h, d, c, name) { const m = new T.Mesh(new T.BoxGeometry(w, h, d), M(c)); m.position.set(x, y, z); if (name) m.name = name; g.add(m); return m; } function ball(g, x, y, z, sx, sy, sz, c, glow = false) { const m = new T.Mesh(new T.SphereGeometry(1, 12, 8), M(c, glow)); m.position.set(x, y, z); m.scale.set(sx, sy, sz); g.add(m); return m; } function rod(g, a, b, radius, color, name) { const start = new T.Vector3(...a), end = new T.Vector3(...b); const v = end.clone().sub(start); const m = new T.Mesh(new T.CylinderGeometry(radius, radius, v.length(), 8), M(color)); m.position.copy(start.add(end).multiplyScalar(0.5)); m.quaternion.setFromUnitVectors(new T.Vector3(0, 1, 0), v.normalize()); if (name) m.name = name; g.add(m); return m; } api.world({ time: "night", sky: "#151b49", haze: "#393263", shadow: "#51406f" }); const earth = new T.Group(); const ground = new T.Mesh(new T.CircleGeometry(600, 96), M("#246b70")); ground.rotation.x = -Math.PI / 2; ground.position.y = 0.02; earth.add(ground); install(earth, "harbor-ground", "teal ground around the harbor", 0, 0, 0, false); const water = new T.Group(); box(water, 0, 0.09, 88, 210, 0.12, 145, "#236c98"); for (let i = 0; i < 130; i++) { const x = Math.sin(i * 91.73) * 96; const z = 19 + ((i * 37.19) % 134); if (Math.abs(x) < 48 && z > 44 && z < 65) continue; box(water, x, 0.18, z, 1.2 + (i % 4) * 0.8, 0.04, 0.12, i % 3 ? "#60bad0" : "#b9a3e8"); } install(water, "harbor-water", "blue harbor water with glimmering ripples", 0, 0, 0, false); const quay = new T.Group(); box(quay, 0, 0.35, 15, 112, 0.7, 6, "#d6b7a8", "promenade"); box(quay, 0, 0.65, 18, 112, 0.35, 0.55, "#f2d2b9", "seawall"); for (let x = -54; x <= 54; x += 6) { box(quay, x, 1.25, 17.85, 0.24, 1.15, 0.24, "#50405f"); } box(quay, 0, 1.7, 17.85, 112, 0.13, 0.16, "#50405f"); for (let x = -48; x <= 48; x += 16) { rod(quay, [x, 0.7, 12.5], [x, 4.2, 12.5], 0.13, "#51405f"); ball(quay, x, 4.35, 12.5, 0.45, 0.45, 0.45, "#ffd786", true); } install(quay, "harbor-promenade", "waterfront promenade with railings and glowing lamps"); const bridge = new T.Group(); box(bridge, 0, 14, 0, 132, 1.6, 10, "#586381", "bridge-deck"); box(bridge, 0, 14.9, 0, 132, 0.2, 8.5, "#a398b5"); for (const z of [-4.5, 4.5]) { rod(bridge, [-66, 15.5, z], [66, 15.5, z], 0.25, "#c2b3c5"); let prev = null; for (let i = 0; i <= 40; i++) { const x = -62 + i * 3.1; const y = 15 + 32 * Math.sqrt(Math.max(0, 1 - (x / 62) ** 2)); const p = [x, y, z]; if (prev) rod(bridge, prev, p, 0.48, "#697795", "steel-arch"); prev = p; if (i % 2 === 0 && i > 0 && i < 40) { rod(bridge, [x, 15, z], [x, y, z], 0.18, "#8991a8"); } if (i % 4 === 0) rod(bridge, [x, y, -4.5], [x, y, 4.5], 0.25, "#8991a8"); } } for (const x of [-64, 64]) { for (const z of [-5.4, 5.4]) { box(bridge, x, 11, z, 4.5, 22, 4.5, "#c2aab8", "bridge-pylon"); box(bridge, x, 22.4, z, 5.2, 1, 5.2, "#e1c5c6"); box(bridge, x, 23.4, z, 3.8, 1, 3.8, "#b297ad"); } } for (let x = -58; x <= 58; x += 8) { ball(bridge, x, 16, -5.1, 0.19, 0.19, 0.19, "#ffe4a3", true); } install(bridge, "arched-harbor-bridge", "huge arched steel harbor bridge with lit pylons", -8, 0, 88); const opera = new T.Group(); box(opera, 0, 1.4, 0, 32, 2.8, 21, "#d5b7ae", "opera-podium"); box(opera, 0, 3, 0, 30, 0.5, 19, "#f2d9c7", "opera-terrace"); for (let i = 0; i < 5; i++) { box(opera, 0, 0.18 + i * 0.27, -11 - i * 0.52, 19 + i * 1.6, 0.27, 1.2, "#e6cabe"); } box(opera, 0, 5.1, 0, 25, 4, 14, "#533e66", "glass-foyer"); for (let x = -11; x <= 11; x += 2.2) { box(opera, x, 5.2, -7.08, 1.3, 3, 0.12, "#ffcf85"); } function sail(x, z, width, height, depth) { const shape = new T.Shape(); shape.moveTo(0, 0); shape.quadraticCurveTo(width * 0.16, height * 0.8, width * 0.78, height); shape.quadraticCurveTo(width * 0.68, height * 0.45, width, 0); shape.quadraticCurveTo(width * 0.5, 1.2, 0, 0); const geom = new T.ExtrudeGeometry(shape, { depth, bevelEnabled: true, bevelThickness: 0.18, bevelSize: 0.18, bevelSegments: 2, curveSegments: 16 }); const shell = new T.Mesh(geom, M("#fff5e8")); shell.position.set(x, 7, z); shell.name = "white-sail"; opera.add(shell); const curve = new T.QuadraticBezierCurve3( new T.Vector3(x + 0.3, 7.25, z - 0.2), new T.Vector3(x + width * 0.16, 7 + height * 0.8, z - 0.2), new T.Vector3(x + width * 0.78, 7 + height, z - 0.2) ); opera.add(new T.Mesh(new T.TubeGeometry(curve, 24, 0.09, 6, false), M("#d8c8df"))); } sail(-12, -4, 9, 15, 3); sail(-4.5, -4.5, 10.5, 19, 3); sail(4, -4, 9, 15, 3); sail(-9, 2, 8, 11, 3); sail(0, 3, 8, 13, 3); sail(8, 2, 7, 10, 3); install(opera, "sail-opera-house", "white sail-shaped opera house on a waterfront podium", 43, 0, 48); const boats = []; const boatSpecs = [ [-40, 37, 0.3, 1.0], [-24, 50, -0.7, 0.8], [-4, 36, 0.55, 1.05], [17, 35, -0.4, 0.8], [30, 72, 0.25, 0.9], [-48, 67, -0.25, 1.1], [-20, 70, 0.9, 0.75], [5, 61, -0.65, 0.7], [52, 77, 0.7, 0.75], [65, 39, -0.4, 0.85], [-62, 41, 0.15, 0.8], [11, 106, 0.3, 0.85] ]; boatSpecs.forEach((s, i) => { const g = new T.Group(); const hull = ball(g, 0, 0.65, 0, 2.2, 0.7, 4.4, ["#f4e0d1", "#ef8a3c", "#d86d71", "#d9c7ed"][i % 4]); hull.name = "hull"; box(g, 0, 1.25, 0, 3.6, 0.35, 6.5, "#f7e7d8"); box(g, 0, 2.0, -0.6, 2.4, 1.5, 2.6, "#f5d6c3", "cabin"); box(g, 0, 2.15, 0.73, 1.8, 0.7, 0.08, "#58a7bb"); box(g, 0, 2.8, -0.6, 2.7, 0.25, 2.8, "#6e5d85"); rod(g, [0, 2.8, -1], [0, 5, -1], 0.07, "#70536f"); ball(g, 0, 5.1, -1, 0.12, 0.12, 0.12, "#ffe2a3", true); g.scale.setScalar(s[3]); g.position.copy(at(s[0], 0.12, s[1])); g.rotation.y = yaw + s[2]; api.add(g, { id: "harbor-boat-" + (i + 1), describe: "a little illuminated boat on the harbor", solid: false }); boats.push({ g, y: g.position.y, phase: i * 1.7 }); }); const crowdColors = ["#ef8a3c", "#8a5cc9", "#f08cc0", "#8fd14f", "#5cb5c4", "#d0453a"]; const crowd = []; for (let i = 0; i < 26; i++) { const x = -45 + i * 3.55; const z = 14 + ((i % 3) - 1) * 1.15; const skin = ["#f2c9a0", "#d99877", "#ac715d", "#f5d8b3"][i % 4]; const person = api.build({ parts: [ { name: "body", shape: "roundbox", size: [0.72, 0.85, 0.44], pos: [0, 1.05, 0], color: crowdColors[i % crowdColors.length] }, { name: "head", shape: "sphere", size: [0.65, 0.68, 0.58], pos: [0, 1.78, 0], color: skin }, { name: "eye", shape: "eye", size: [0.21, 0.24, 0.12], pos: [0.16, 1.82, 0.27], color: "#ffffff", mirror: true }, { name: "leg", shape: "capsule", size: [0.23, 0.67, 0.24], pos: [0.2, 0.38, 0], color: "#51405f", mirror: true }, { name: "shoe", shape: "roundbox", size: [0.3, 0.17, 0.42], pos: [0.2, 0.08, 0.06], color: "#54384a", mirror: true }, { name: "armL", shape: "capsule", size: [0.22, 0.8, 0.23], pos: [0.48, 1.48, 0], anchor: "top", rot: [0, 0, -135], color: crowdColors[i % crowdColors.length] }, { name: "armR", shape: "capsule", size: [0.22, 0.8, 0.23], pos: [-0.48, 1.48, 0], anchor: "top", rot: [0, 0, 135], color: crowdColors[i % crowdColors.length] }, { name: "handL", shape: "sphere", size: [0.24, 0.24, 0.24], pos: [0, -0.7, 0], parent: "armL", color: skin }, { name: "handR", shape: "sphere", size: [0.24, 0.24, 0.24], pos: [0, -0.7, 0], parent: "armR", color: skin } ] }); person.position.copy(at(x, 0.7, z)); person.rotation.y = yaw + (i % 4 === 0 ? Math.PI : 0); const sc = 0.82 + (i % 5) * 0.07; person.scale.setScalar(sc); api.add(person, { id: "celebrant-" + (i + 1), describe: "a cheering waterfront celebrant" }); crowd.push({ person, left: person.getObjectByName("armL"), right: person.getObjectByName("armR"), baseY: person.position.y, phase: i * 1.3 }); } const fireworks = new T.Group(); const bursts = []; const colors = ["#ffd363", "#ff78ba", "#81eddd", "#c59aff", "#ff9c65", "#fff4c7"]; for (let j = 0; j < 9; j++) { const center = new T.Vector3(-58 + j * 15 + Math.sin(j * 3) * 7, 49 + (j % 4) * 8, 77 + (j % 3) * 18); const b = new T.Group(); b.position.copy(center); fireworks.add(b); const sparks = []; const color = colors[j % colors.length]; for (let k = 0; k < 36; k++) { const a = k * 2.399963; const y = 1 - 2 * (k + 0.5) / 36; const r = Math.sqrt(1 - y * y); const dir = new T.Vector3(Math.cos(a) * r, y, Math.sin(a) * r); const spark = new T.Mesh(new T.SphereGeometry(0.36, 8, 6), M(k % 5 === 0 ? "#fff4d7" : color, true)); b.add(spark); sparks.push({ mesh: spark, dir, length: 6 + (k % 5) * 0.7 }); } const core = ball(b, 0, 0, 0, 0.8, 0.8, 0.8, "#fff6c7", true); const rocket = ball(fireworks, center.x, 0, center.z, 0.3, 0.3, 0.3, color, true); bursts.push({ b, sparks, core, rocket, center, phase: j * 0.64, period: 5.8 }); } install(fireworks, "new-years-fireworks", "colorful animated New Year's fireworks over the harbor", 0, 0, 0, false); const stars = new T.Group(); for (let i = 0; i < 70; i++) { const x = -150 + ((i * 73.1) % 300); const y = 70 + ((i * 31.7) % 65); const z = 180 + ((i * 17.3) % 60); const size = 0.18 + (i % 3) * 0.09; ball(stars, x, y, z, size, size, size, i % 4 ? "#e9dcff" : "#ffe7a8", true); } install(stars, "harbor-stars", "twinkling stars above the harbor", 0, 0, 0, false); api.onFrame((dt, t) => { boats.forEach(o => { o.g.position.y = o.y + Math.sin(t * 1.3 + o.phase) * 0.16; o.g.rotation.z = Math.sin(t * 0.9 + o.phase) * 0.035; }); crowd.forEach(o => { if (o.left) o.left.rotation.z = -2.35 + Math.sin(t * 4 + o.phase) * 0.3; if (o.right) o.right.rotation.z = 2.35 + Math.sin(t * 4 + o.phase + 1) * 0.3; o.person.position.y = o.baseY + Math.max(0, Math.sin(t * 3 + o.phase)) * 0.09; }); bursts.forEach(o => { const cycle = ((t + o.phase) % o.period) / o.period; const launch = cycle < 0.17; o.rocket.visible = launch; if (launch) o.rocket.position.y = 4 + (o.center.y - 4) * cycle / 0.17; const u = (cycle - 0.17) / 0.55; o.b.visible = u >= 0 && u < 1; if (o.b.visible) { o.core.scale.setScalar(Math.max(0.02, 1.3 * (1 - u * 3))); o.sparks.forEach(s => { const reach = s.length * (1 - Math.pow(1 - u, 2)); s.mesh.position.copy(s.dir).multiplyScalar(reach); s.mesh.position.y -= u * u * 2.5; s.mesh.scale.setScalar(Math.max(0.02, 1 - u)); }); } }); }); api.say = "I made a festive harbor with a grand steel bridge, a sail-shaped opera house, bobbing boats, cheering crowds, and fireworks overhead."; api.suggest = [ "Add a spectacular golden finale to the fireworks", "Put colorful lanterns along the promenade", "Add a ferry crossing beneath the bridge", "Make the moon rise over the harbor" ];