const T = api.THREE; const mats = {}; function mat(c) { return mats[c] || (mats[c] = api.toon(c)); } function box(g, name, w, h, d, x, y, z, c, rz = 0) { const m = new T.Mesh(new T.BoxGeometry(w, h, d), mat(c)); m.position.set(x, y, z); m.rotation.z = rz; m.name = name; g.add(m); return m; } function sphere(g, name, sx, sy, sz, x, y, z, c) { const m = new T.Mesh(new T.SphereGeometry(1, 12, 8), mat(c)); m.scale.set(sx, sy, sz); m.position.set(x, y, z); m.name = name; g.add(m); return m; } function cyl(g, name, rt, rb, h, x, y, z, c, sides = 10) { const m = new T.Mesh(new T.CylinderGeometry(rt, rb, h, sides), mat(c)); m.position.set(x, y, z); m.name = name; g.add(m); return m; } function rod(g, name, a, b, r, color) { const p = new T.Vector3(...a), q = new T.Vector3(...b); const m = new T.Mesh(new T.CylinderGeometry(r, r, p.distanceTo(q), 8), mat(color)); m.position.copy(p).add(q).multiplyScalar(0.5); m.quaternion.setFromUnitVectors(new T.Vector3(0, 1, 0), q.sub(p).normalize()); m.name = name; g.add(m); return m; } function add(g, id, describe, solid = true) { api.add(g, {id, describe, solid}); } api.world({sky:"#a9d8ea", haze:"#c9e9e4", shadow:"#8666a9"}); const ground = new T.Mesh(new T.CircleGeometry(600, 96), mat("#83c965")); ground.rotation.x = -Math.PI / 2; ground.position.y = 0.02; add(ground, "spring-ground", "green spring meadow covering the canvas", false); const sky = new T.Group(); sphere(sky, "sun", 19, 19, 3, -150, 125, -230, "#ffe989"); for (let i = 0; i < 6; i++) { const x = -180 + i * 67, y = 90 + (i % 3) * 14, z = -210 - (i % 2) * 40; sphere(sky, "cloud", 22, 7, 5, x, y, z, "#fff6e6"); sphere(sky, "cloud-puff", 12, 10, 5, x - 9, y + 4, z, "#fff6e6"); sphere(sky, "cloud-puff", 14, 9, 5, x + 10, y + 3, z, "#fff6e6"); } add(sky, "spring-sky", "sun and fluffy spring clouds", false); // Canal water and softly patterned stone quays. const canal = new T.Group(); box(canal, "water", 10, 0.035, 156, 12, 0.07, 8, "#57bdc6"); for (let i = 0; i < 75; i++) { const x = 7.6 + ((i * 37) % 87) / 10; const z = -68 + ((i * 23) % 150); box(canal, "water-ripple", 0.8 + (i % 3) * 0.3, 0.025, 0.055, x, 0.1, z, "#b5e7db"); } for (const x of [6.7, 17.3]) { box(canal, "quay-edge", 0.5, 0.18, 153, x, 0.12, 8, "#ba8a78"); box(canal, "quay-path", 3.8, 0.08, 100, x + (x < 12 ? -2.1 : 2.1), 0.065, 3, "#e1b48b"); } add(canal, "canal-and-quays", "a long blue canal with stone quays", false); // Distinct narrow canal houses, each with a stepped Dutch gable. const facadeColors = ["#d35c4d", "#ef9b64", "#e7bd80", "#84b5b2", "#b77c9b", "#e6a59a", "#d8c88e", "#ae6d60"]; const zs = [-36,-30,-24,-18,-12,-6,6,12,18,24,30,36]; for (let side = 0; side < 2; side++) { for (let i = 0; i < zs.length; i++) { const g = new T.Group(); const h = 6.8 + ((i * 7 + side * 3) % 4) * 0.7; const col = facadeColors[(i + side * 3) % facadeColors.length]; box(g, "house-walls", 4.55, h, 5.2, 0, h / 2, 0, col); box(g, "gable-base", 4.5, 0.5, 0.45, 0, h + 0.25, 2.43, col); box(g, "gable-step", 3.55, 0.48, 0.45, 0, h + 0.73, 2.43, col); box(g, "gable-step", 2.5, 0.48, 0.45, 0, h + 1.21, 2.43, col); box(g, "gable-crown", 1.35, 0.42, 0.46, 0, h + 1.66, 2.43, col); box(g, "gable-trim", 4.6, 0.12, 0.16, 0, h + 0.02, 2.71, "#f8dbb0"); box(g, "roof", 4.65, 0.3, 5.3, 0, h + 0.15, -0.1, "#81576d"); cyl(g, "chimney", 0.22, 0.22, 1.2, -1.25, h + 0.75, -1.5, "#b9685f", 6); box(g, "door-frame", 1.12, 2.25, 0.14, 0, 1.13, 2.66, "#f5d9b4"); box(g, "door", 0.88, 2.02, 0.12, 0, 1.05, 2.75, i % 2 ? "#547f84" : "#744d71"); sphere(g, "door-knob", 0.065, 0.065, 0.045, 0.29, 1.02, 2.84, "#f6cd69"); for (let floor = 0; floor < 2; floor++) { const y = 3.0 + floor * 2.05; for (const x of [-1.05, 1.05]) { box(g, "window-frame", 1.16, 1.48, 0.14, x, y, 2.68, "#f8e0ba"); box(g, "window-glass", 0.94, 1.25, 0.07, x, y, 2.78, "#8dcbd1"); box(g, "window-mullion", 0.06, 1.25, 0.04, x, y, 2.83, "#fff0cd"); box(g, "window-mullion", 0.94, 0.06, 0.04, x, y, 2.83, "#fff0cd"); box(g, "window-sill", 1.25, 0.1, 0.25, x, y - 0.77, 2.72, "#f5d6a4"); } } box(g, "attic-window-frame", 0.8, 0.8, 0.1, 0, h + 0.7, 2.7, "#f8e0ba"); box(g, "attic-window", 0.62, 0.62, 0.06, 0, h + 0.7, 2.77, "#8dcbd1"); if (i % 3 === 0) { box(g, "flower-box", 1.18, 0.24, 0.3, -1.05, 2.14, 2.83, "#a35d53"); for (let j = 0; j < 4; j++) sphere(g, "window-flower", 0.12, 0.13, 0.12, -1.5 + j * 0.3, 2.34, 2.86, j % 2 ? "#f18ca8" : "#ffdc60"); } g.position.set(side === 0 ? -1.5 : 25.5, 0.08, zs[i]); g.rotation.y = side === 0 ? Math.PI / 2 : -Math.PI / 2; add(g, "canal-house-" + side + "-" + i, "a tall narrow stepped-gable canal house"); } } // Bridges with low, walkable decks and bicycles resting against their railings. function wheel(g, x, y, z) { const m = new T.Mesh(new T.TorusGeometry(0.42, 0.055, 7, 16), mat("#583b50")); m.position.set(x, y, z); m.name = "bicycle-wheel"; g.add(m); const hub = sphere(g, "wheel-hub", 0.07, 0.07, 0.05, x, y, z, "#e8bd70"); for (let k = 0; k < 4; k++) { const a = k * Math.PI / 4; rod(g, "spoke", [x - Math.cos(a)*0.38, y - Math.sin(a)*0.38, z], [x + Math.cos(a)*0.38, y + Math.sin(a)*0.38, z], 0.015, "#f0d9b5"); } } function bike(g, x, z, color) { const y = 0.52; wheel(g, x - 0.65, y + 0.43, z); wheel(g, x + 0.65, y + 0.43, z); rod(g, "bicycle-frame", [x-0.65,y+0.43,z], [x-0.15,y+1.0,z], 0.045, color); rod(g, "bicycle-frame", [x-0.15,y+1.0,z], [x+0.12,y+0.43,z], 0.045, color); rod(g, "bicycle-frame", [x+0.12,y+0.43,z], [x-0.65,y+0.43,z], 0.045, color); rod(g, "bicycle-frame", [x-0.15,y+1.0,z], [x+0.48,y+0.98,z], 0.045, color); rod(g, "bicycle-frame", [x+0.48,y+0.98,z], [x+0.12,y+0.43,z], 0.045, color); rod(g, "bicycle-fork", [x+0.48,y+1.12,z], [x+0.65,y+0.43,z], 0.045, color); box(g, "saddle", 0.35, 0.09, 0.2, x-0.15, y+1.12, z, "#68475a"); rod(g, "handlebar", [x+0.48,y+1.1,z], [x+0.65,y+1.25,z], 0.035, "#e6d5bc"); rod(g, "handlebar-grip", [x+0.65,y+1.25,z-0.15], [x+0.65,y+1.25,z+0.15], 0.035, "#68475a"); } for (let b = 0; b < 3; b++) { const g = new T.Group(); box(g, "bridge-deck", 12.4, 0.42, 4.4, 12, 0.3, 0, "#c99a76"); for (let j = 0; j < 24; j++) box(g, "bridge-plank", 0.035, 0.025, 4.2, 6.1+j*0.5, 0.525, 0, "#9b6d68"); for (const z of [-2.05, 2.05]) { for (let j = 0; j <= 6; j++) { box(g, "railing-post", 0.18, 1.15, 0.18, 6+j*2, 1.07, z, "#f0d9ae"); sphere(g, "post-cap", 0.13, 0.13, 0.13, 6+j*2, 1.68, z, "#f7dfad"); } box(g, "bridge-railing", 12.2, 0.14, 0.16, 12, 1.48, z, "#f0d9ae"); } bike(g, 9, -1.72, b === 1 ? "#e88768" : "#5e9d9a"); bike(g, 15, 1.72, b === 2 ? "#e5ba4e" : "#c56778"); g.position.z = [-18, 6, 30][b]; add(g, "canal-bridge-" + b, "a walkable canal bridge with parked bicycles"); } // A couple of small boats tucked against the banks. for (let i = 0; i < 2; i++) { const g = new T.Group(); sphere(g, "boat-hull", 0.8, 0.34, 2.2, 0, 0.22, 0, i ? "#c56e64" : "#728fa2"); box(g, "boat-interior", 1.13, 0.12, 2.7, 0, 0.42, 0, "#efc68f"); box(g, "boat-seat", 1.12, 0.16, 0.38, 0, 0.57, -0.4, "#9d665c"); box(g, "boat-seat", 1.12, 0.16, 0.38, 0, 0.57, 0.7, "#9d665c"); g.position.set(i ? 15.8 : 8.2, 0.1, i ? 20 : -29); add(g, "canal-boat-" + i, "a little moored canal boat", false); } // Windmill: tapered tower, cap, and four slowly rotating lattice sails. const mill = new T.Group(); cyl(mill, "mill-tower", 2.15, 3.7, 11, 0, 5.5, 0, "#f2d8a7", 8); cyl(mill, "tower-base", 3.75, 3.85, 0.55, 0, 0.3, 0, "#ae7773", 8); const cap = new T.Mesh(new T.ConeGeometry(2.95, 2.8, 8), mat("#765574")); cap.position.set(0, 12.3, 0); cap.name = "mill-cap"; mill.add(cap); box(mill, "mill-door-frame", 1.5, 2.55, 0.2, 0, 1.3, -3.48, "#f8e5be"); box(mill, "mill-door", 1.2, 2.25, 0.16, 0, 1.2, -3.61, "#6f8281"); for (const y of [4.3, 7.0]) { box(mill, "mill-window-frame", 1.05, 1.2, 0.16, 0, y, -3.1 + (y-4.3)*0.12, "#f8e5be"); box(mill, "mill-window", 0.8, 0.95, 0.12, 0, y, -3.2 + (y-4.3)*0.12, "#8ac8d0"); } const sails = new T.Group(); sails.name = "turning-sails"; sails.position.set(0, 10.8, -2.8); for (let i = 0; i < 4; i++) { const blade = new T.Group(); blade.rotation.z = i * Math.PI / 2; box(blade, "sail-spar", 0.24, 7.8, 0.24, 0, 3.9, 0, "#765568"); box(blade, "sail-cloth", 1.3, 5.5, 0.08, 0.57, 4.8, 0.04, "#f7e8c7"); for (let k = 0; k < 6; k++) box(blade, "sail-lattice", 1.32, 0.09, 0.12, 0.57, 2.35+k*0.95, -0.03, "#9a6c72"); box(blade, "sail-outer-edge", 0.1, 5.5, 0.12, 1.2, 4.8, -0.03, "#9a6c72"); sails.add(blade); } sphere(sails, "sail-hub", 0.4, 0.4, 0.3, 0, 0, -0.1, "#d79a70"); mill.add(sails); mill.position.set(39, 0, 44); add(mill, "spring-windmill", "a Dutch windmill with four turning sails"); api.onFrame((dt) => { sails.rotation.z += dt * 0.13; }); // Bright striped tulip fields beyond the town. const fields = new T.Group(); const colors = ["#ef5967", "#f6d753", "#f28db2", "#f68d42", "#b97bdd", "#ef5e77", "#f7d85c", "#f4a7c7"]; for (let s = 0; s < colors.length; s++) { const cx = -45 + s * 13; box(fields, "flower-field-bed", 12.5, 0.06, 58, cx, 0.08, 91, s % 2 ? "#80b65a" : "#8fc15e"); const count = 180; const stems = new T.InstancedMesh(new T.CylinderGeometry(0.045, 0.055, 0.55, 5), mat("#4e9d59"), count); const blooms = new T.InstancedMesh(new T.SphereGeometry(1, 8, 6), mat(colors[s]), count); const dummy = new T.Object3D(); for (let j = 0; j < count; j++) { const col = j % 10, row = Math.floor(j / 10); const x = cx - 5.6 + col * 1.24 + Math.sin(j * 7.1 + s) * 0.16; const z = 64 + row * 3.05 + Math.cos(j * 3.7) * 0.22; const h = 0.55 + (j % 3) * 0.07; dummy.position.set(x, 0.15 + h/2, z); dummy.scale.set(1, h/0.55, 1); dummy.rotation.set(0,0,0); dummy.updateMatrix(); stems.setMatrixAt(j, dummy.matrix); dummy.position.set(x, 0.18+h, z); dummy.scale.set(0.18, 0.25, 0.18); dummy.updateMatrix(); blooms.setMatrixAt(j, dummy.matrix); } stems.name = "tulip-stems"; blooms.name = "tulip-blooms"; fields.add(stems, blooms); } add(fields, "striped-tulip-fields", "bright striped fields of spring tulips", false); // A few spring trees and benches beside the quays. const details = new T.Group(); for (const x of [3.5, 20.5]) { for (const z of [-41, -22, -2, 19, 39]) { cyl(details, "tree-trunk", 0.18, 0.24, 2.7, x, 1.35, z, "#a76f62", 7); sphere(details, "spring-foliage", 1.15, 1.15, 1.05, x, 3.15, z, "#95ce75"); sphere(details, "spring-blossom", 0.48, 0.42, 0.45, x+0.7, 3.3, z, "#f3b6c4"); } } for (const z of [-9, 24]) { box(details, "bench-seat", 1.8, 0.15, 0.55, 4.1, 0.56, z, "#b67a61"); box(details, "bench-back", 1.8, 0.65, 0.12, 4.1, 0.95, z-0.23, "#b67a61"); for (const dx of [-0.65, 0.65]) box(details, "bench-leg", 0.12, 0.55, 0.12, 4.1+dx, 0.28, z, "#785465"); } add(details, "quay-spring-details", "blossoming quay trees and wooden benches", false); api.say = "I built a spring canal town with gabled houses, bicycle-lined bridges, striped tulip fields and a slowly turning windmill."; api.suggest = ["add boats drifting along the canal", "plant more blossom trees by the houses", "make it a golden sunset", "add ducks swimming in the canal"];