const T = api.THREE; const station = new T.Group(); const mats = {}; function mat(color) { return mats[color] || (mats[color] = api.toon(color)); } function mesh(geo, color, x, y, z, parent = station) { const m = new T.Mesh(geo, mat(color)); m.position.set(x, y, z); parent.add(m); return m; } function box(x, y, z, w, h, d, color, parent = station) { return mesh(new T.BoxGeometry(w, h, d), color, x, y, z, parent); } function sphere(x, y, z, sx, sy, sz, color, parent = station) { const m = mesh(new T.SphereGeometry(1, 16, 10), color, x, y, z, parent); m.scale.set(sx, sy, sz); return m; } function cyl(x, y, z, r1, r2, h, color, parent = station) { return mesh(new T.CylinderGeometry(r1, r2, h, 16), color, x, y, z, parent); } function tube(points, radius, color, parent = station) { const curve = new T.CatmullRomCurve3(points.map(p => new T.Vector3(...p))); return mesh(new T.TubeGeometry(curve, 32, radius, 8, false), color, 0, 0, 0, parent); } function rodBetween(a, b, radius, color, parent = station) { const av = new T.Vector3(...a), bv = new T.Vector3(...b); const m = cyl(0, 0, 0, radius, radius, av.distanceTo(bv), color, parent); m.position.copy(av.clone().add(bv).multiplyScalar(0.5)); m.quaternion.setFromUnitVectors(new T.Vector3(0, 1, 0), bv.sub(av).normalize()); return m; } // Raised stone concourse and two long platforms. box(0, 0.12, 0, 30, 0.24, 40, "#d9c3a7"); box(0, 0.13, 24, 30, 0.26, 8, "#d9c3a7"); for (let x = -14; x <= 14; x += 2) { for (let z = -19; z <= 27; z += 2) { box(x, 0.252, z, 1.96, 0.025, 1.96, ((x + z) % 4 === 0) ? "#e9d7bc" : "#d6bfa8"); } } box(4, 0.35, 0, 19.5, 0.42, 39, "#efd7b4"); box(-13.5, 0.35, 0, 2.5, 0.42, 39, "#efd7b4"); box(-5.8, 0.58, 0, 0.17, 0.06, 39, "#efb653"); box(-12.2, 0.58, 0, 0.17, 0.06, 39, "#efb653"); for (let z = -19; z <= 19; z += 1.25) { box(-9, 0.31, z, 5, 0.18, 0.28, "#815341"); } for (const x of [-10.25, -7.75]) { box(x, 0.46, 0, 0.18, 0.18, 39, "#785d76"); } // Low masonry, columns, and the great iron barrel vault. for (const side of [-1, 1]) { box(side * 14.8, 0.95, 0, 0.55, 1.5, 40, "#c68865"); for (let z = -19; z <= 19; z += 4.75) { box(side * 14.75, 4.1, z, 0.55, 7.6, 0.6, "#536c70"); box(side * 14.75, 0.95, z, 0.9, 1.4, 0.95, "#bd8365"); box(side * 14.75, 7.8, z, 0.9, 0.45, 0.95, "#caa15f"); } box(side * 14.75, 7.55, 0, 0.45, 0.45, 40, "#536c70"); } function archPoint(theta, z) { return [14.75 * Math.cos(theta), 7.6 + 7.4 * Math.sin(theta), z]; } for (let z = -19; z <= 19.01; z += 4.75) { const pts = []; for (let i = 0; i <= 16; i++) pts.push(archPoint(Math.PI * i / 16, z)); tube(pts, 0.16, "#536c70"); } for (let i = 0; i <= 16; i++) { const p = archPoint(Math.PI * i / 16, 0); box(p[0], p[1], 0, 0.12, 0.12, 38, "#657e7c"); } const glass = api.toon("#a9d8d4"); glass.transparent = true; glass.opacity = 0.48; glass.depthWrite = false; for (let i = 0; i < 16; i++) { const a = archPoint(Math.PI * i / 16, 0); const b = archPoint(Math.PI * (i + 1) / 16, 0); const dx = b[0] - a[0], dy = b[1] - a[1]; const panel = new T.Mesh(new T.BoxGeometry(Math.hypot(dx, dy) - 0.07, 0.08, 37.8), glass); panel.position.set((a[0] + b[0]) / 2, (a[1] + b[1]) / 2, 0); panel.rotation.z = Math.atan2(dy, dx); station.add(panel); } // Glazed side windows between the columns. for (const side of [-1, 1]) { for (let z = -16.625; z < 19; z += 4.75) { const p = new T.Mesh(new T.BoxGeometry(0.08, 5.2, 4.15), glass); p.position.set(side * 14.78, 4.55, z); station.add(p); box(side * 14.7, 4.6, z, 0.14, 0.13, 4.15, "#8a9a85"); box(side * 14.7, 4.6, z, 0.14, 5.2, 0.13, "#8a9a85"); } } // End piers and ornamental entrance arch, with generous openings. for (const z of [-19.8, 19.8]) { for (const x of [-13.9, 13.9]) { box(x, 3.95, z, 1.8, 7.5, 0.8, "#c68865"); box(x, 7.75, z, 2.1, 0.45, 1, "#dcb570"); box(x, 0.7, z, 2.1, 1.1, 1, "#a97460"); } const pts = []; for (let i = 0; i <= 16; i++) pts.push(archPoint(Math.PI * i / 16, z)); tube(pts, 0.24, "#b88652"); } // Big clock suspended over the front concourse. const clockBase = cyl(0, 10.2, 19.94, 2.1, 2.1, 0.35, "#a97647"); clockBase.rotation.x = Math.PI / 2; const clockFace = cyl(0, 10.2, 20.17, 1.84, 1.84, 0.1, "#f7e5b9"); clockFace.rotation.x = Math.PI / 2; for (let i = 0; i < 12; i++) { const a = i * Math.PI / 6; const tick = box(Math.sin(a) * 1.48, 10.2 + Math.cos(a) * 1.48, 20.245, 0.14, 0.3, 0.07, "#3a2230"); tick.rotation.z = -a; } rodBetween([0, 10.2, 20.3], [-0.73, 10.8, 20.3], 0.075, "#3a2230"); rodBetween([0, 10.2, 20.31], [0.95, 10.5, 20.31], 0.055, "#3a2230"); sphere(0, 10.2, 20.34, 0.13, 0.13, 0.09, "#b87943"); const secondHand = new T.Group(); secondHand.position.set(0, 10.2, 20.35); station.add(secondHand); box(0, 0.65, 0, 0.035, 1.3, 0.035, "#d0453a", secondHand); // Platform lamps with warm globes. for (const z of [-15, -7, 2, 11, 18]) { const x = 2.0; cyl(x, 0.72, z, 0.38, 0.5, 0.28, "#526d6c"); cyl(x, 2.55, z, 0.13, 0.18, 3.5, "#526d6c"); sphere(x, 4.4, z, 0.46, 0.5, 0.46, "#ffe1a0"); cyl(x, 4.95, z, 0.12, 0.42, 0.3, "#b48755"); } // Steam locomotive on the left-hand track, facing the entrance. const tx = -9; box(tx, 1.05, 3, 3.8, 0.5, 11, "#503a46"); const boiler = cyl(tx, 2.55, 5, 1.52, 1.52, 7.7, "#396a62"); boiler.rotation.x = Math.PI / 2; for (const z of [2.0, 4.4, 6.8]) { const band = cyl(tx, 2.55, z, 1.56, 1.56, 0.19, "#c49a55"); band.rotation.x = Math.PI / 2; } const front = cyl(tx, 2.55, 8.92, 1.4, 1.4, 0.25, "#563f49"); front.rotation.x = Math.PI / 2; const frontDisc = cyl(tx, 2.55, 9.08, 1.15, 1.15, 0.09, "#77585a"); frontDisc.rotation.x = Math.PI / 2; sphere(tx, 2.55, 9.15, 0.16, 0.16, 0.12, "#e0aa5e"); box(tx, 1.15, 9.45, 4.0, 0.45, 0.45, "#b44439"); box(tx, 0.7, 9.65, 3.6, 0.35, 0.7, "#674953"); for (const x of [tx - 1.2, tx + 1.2]) { cyl(x, 1.35, 9.55, 0.25, 0.25, 0.48, "#b88652").rotation.x = Math.PI / 2; } const chimney = cyl(tx, 4.35, 7.05, 0.45, 0.35, 1.5, "#553e48"); chimney.name = "chimney"; cyl(tx, 5.08, 7.05, 0.62, 0.46, 0.3, "#b48450"); cyl(tx, 4.15, 4.15, 0.62, 0.65, 0.6, "#bc9451"); sphere(tx, 4.48, 4.15, 0.6, 0.32, 0.6, "#d4ae60"); cyl(tx, 4.18, 2.15, 0.32, 0.4, 0.55, "#be9450"); box(tx, 2.65, -0.65, 3.8, 3.5, 2.9, "#3e766b"); box(tx, 4.48, -0.65, 4.15, 0.35, 3.35, "#503d47"); for (const side of [-1, 1]) { box(tx + side * 1.93, 3.15, -0.7, 0.08, 1.25, 1.55, "#abd4c9"); box(tx + side * 1.98, 3.15, -0.7, 0.1, 1.3, 0.1, "#d1a65d"); for (const z of [-0.8, 2, 5, 7.7]) { const wheel = cyl(tx + side * 1.94, 1.12, z, 0.91, 0.91, 0.34, "#493947"); wheel.rotation.z = Math.PI / 2; const hub = cyl(tx + side * 2.13, 1.12, z, 0.25, 0.25, 0.1, "#d1a65d"); hub.rotation.z = Math.PI / 2; } rodBetween([tx + side * 2.18, 1.18, -0.8], [tx + side * 2.18, 1.18, 7.7], 0.095, "#d2aa6b"); } sphere(tx, 3.75, 9.15, 0.42, 0.42, 0.26, "#ffe29a"); box(tx, 1.55, -5.1, 3.7, 1.7, 5.2, "#396a62"); box(tx, 2.45, -5.1, 3.9, 0.3, 5.4, "#ba9053"); for (let z = -6.8; z <= -3.4; z += 0.65) { sphere(tx, 2.62, z, 1.45, 0.35, 0.55, "#51404d"); } for (const side of [-1, 1]) { for (const z of [-6.7, -3.7]) { const w = cyl(tx + side * 1.85, 0.95, z, 0.65, 0.65, 0.3, "#493947"); w.rotation.z = Math.PI / 2; } } // A busy little newspaper kiosk with striped canopy and stacked papers. const sx = 9.1, sz = 1; box(sx, 1.05, sz, 4.2, 1.0, 2.5, "#bd8257"); box(sx, 1.6, sz, 4.45, 0.2, 2.8, "#e6b56d"); box(sx, 2.25, sz - 1.0, 4.1, 1.3, 0.25, "#bd8257"); for (const x of [sx - 1.9, sx + 1.9]) { for (const z of [sz - 1.05, sz + 1.05]) { box(x, 2.4, z, 0.15, 3.8, 0.15, "#72524b"); } } for (let i = 0; i < 8; i++) { box(sx - 1.75 + i * 0.5, 4.22, sz, 0.5, 0.15, 3.0, i % 2 ? "#f5ddae" : "#c95848"); sphere(sx - 1.75 + i * 0.5, 4.13, sz + 1.5, 0.25, 0.16, 0.12, i % 2 ? "#f5ddae" : "#c95848"); } for (let i = 0; i < 5; i++) { box(sx - 1.55 + i * 0.77, 1.77, sz + 0.25, 0.65, 0.16, 0.9, "#f5e6c9"); for (let j = 0; j < 3; j++) { box(sx - 1.55 + i * 0.77, 1.87, sz + 0.5 - j * 0.14, 0.48, 0.015, 0.025, "#967a79"); } } for (let i = 0; i < 4; i++) { box(sx - 1.35 + i * 0.9, 2.3, sz - 0.8, 0.7, 0.85, 0.08, ["#d96f53", "#68a69c", "#e5bf67", "#9b82aa"][i]); } // Travelers waiting with luggage, each with a 1920s silhouette. const travelers = []; function traveler(x, z, coat, hat, skin, style) { const parts = [ {name:"body", shape:"roundbox", size:[0.75,1.05,0.42], pos:[0,1.05,0], color:coat}, {name:"head", shape:"sphere", size:[0.57,0.65,0.53], pos:[0,1.9,0.02], color:skin}, {name:"eyeL", shape:"eye", size:[0.19,0.21,0.12], pos:[0.14,1.98,0.27], color:"#ffffff"}, {name:"eyeR", shape:"eye", size:[0.17,0.19,0.12], pos:[-0.13,1.98,0.27], color:"#ffffff"}, {name:"armL", shape:"capsule", size:[0.2,0.85,0.22], pos:[0.48,1.12,0], rot:[0,0,8], color:coat}, {name:"armR", shape:"capsule", size:[0.2,0.85,0.22], pos:[-0.48,1.12,0], rot:[0,0,-8], color:coat}, {name:"legL", shape:"capsule", size:[0.23,0.7,0.25], pos:[0.2,0.37,0], color:"#594556"}, {name:"legR", shape:"capsule", size:[0.23,0.7,0.25], pos:[-0.2,0.37,0], color:"#594556"}, {name:"shoeL", shape:"roundbox", size:[0.29,0.18,0.43], pos:[0.2,0.1,0.09], color:"#493745"}, {name:"shoeR", shape:"roundbox", size:[0.29,0.18,0.43], pos:[-0.2,0.1,0.09], color:"#493745"}, {name:"hatBrim", shape:"cylinder", size:[0.83,0.09,0.7], pos:[0,2.24,0], color:hat}, {name:"hatCrown", shape:"cylinder", size:[0.55,style ? 0.4 : 0.26,0.52], pos:[0,2.42,0], color:hat}, {name:"hatBand", shape:"cylinder", size:[0.57,0.08,0.54], pos:[0,2.29,0], color:"#d0a066"}, {name:"collar", shape:"box", size:[0.27,0.18,0.08], pos:[0,1.48,0.25], color:"#f3dfc5"} ]; const p = api.build({parts}); p.position.set(x, 0.56, z); p.rotation.y = style ? -0.35 : 0.28; station.add(p); travelers.push(p); // A trunk and a round hat box beside each traveler. box(x + 0.9, 0.88, z + 0.1, 0.78, 0.65, 0.55, "#a66748"); box(x + 0.9, 0.89, z + 0.385, 0.08, 0.64, 0.035, "#e2b66d"); box(x + 0.9, 1.24, z + 0.1, 0.3, 0.07, 0.08, "#d8ac6e"); const hb = cyl(x + 1.12, 0.8, z - 0.7, 0.36, 0.36, 0.45, "#c691a3"); cyl(x + 1.12, 1.04, z - 0.7, 0.38, 0.38, 0.07, "#e5bd91"); } traveler(5.1, 12.0, "#80566c", "#74516c", "#f2c9a0", 0); traveler(7.2, -9.0, "#59827b", "#4d5666", "#ba805d", 1); traveler(11.3, -13.5, "#c27757", "#79505b", "#e8b58c", 0); traveler(4.7, -2.5, "#766d9b", "#5c4d62", "#d29b76", 1); // A few suitcases waiting by the station entrance. box(11.5, 0.91, 16.8, 1.1, 0.7, 0.7, "#af7654"); box(11.5, 1.29, 16.8, 0.45, 0.09, 0.09, "#e1b875"); box(12.25, 0.82, 16.3, 0.75, 0.52, 0.55, "#7f5e69"); api.place(station, {where:"ahead", distance:34}, { id:"grand-train-station", describe:"a grand 1920s glass-roofed train station with a steam locomotive, travelers and a newspaper stand" }); api.particles({ type:"particles", kind:"smoke", attach:{object:"grand-train-station", part:"chimney", offset:[0,0.95,0]}, area:[0.4,0.4], rate:5, velocity:[0.2,2.2,-0.25], jitter:0.5, gravity:-0.25, life:4, size:0.65, colors:["#eee2d4","#d2c6d8","#f8eee0"], duration:0 }); api.onFrame((dt, t) => { secondHand.rotation.z = -t * Math.PI / 30; travelers.forEach((p, i) => { const head = p.getObjectByName("head"); if (head) head.rotation.z = 0.045 * Math.sin(t * 1.1 + i * 2); p.rotation.z = 0.012 * Math.sin(t * 1.3 + i); }); }); api.say = "I built a grand glass-roofed station, with a puffing locomotive, waiting travelers, a clock and a newspaper stand."; api.suggest = [ "Add passenger carriages to the train", "Create a bustling street outside the station", "Make the station glow at sunset", "Add a station cat wandering the platform" ];