const T = api.THREE; api.world({sky:"#708f9d", haze:"#a6bdc2", shadow:"#66547f", saturation:0.9}); const mats = {}; function mat(c) { return mats[c] || (mats[c] = api.toon(c)); } function box(g, x,y,z, w,h,d, c, name) { const m = new T.Mesh(new T.BoxGeometry(w,h,d), mat(c)); m.position.set(x,y,z); if (name) m.name = name; g.add(m); return m; } function sphere(g,x,y,z,w,h,d,c) { const m = new T.Mesh(new T.SphereGeometry(1,16,12),mat(c)); m.scale.set(w/2,h/2,d/2); m.position.set(x,y,z); g.add(m); return m; } function cyl(g,x,y,z,r,h,c) { const m = new T.Mesh(new T.CylinderGeometry(r,r,h,16),mat(c)); m.position.set(x,y,z); g.add(m); return m; } function add(g,id,describe,solid=true) { api.add(g,{id,describe,solid}); } const ground = new T.Mesh(new T.CircleGeometry(600,96),mat("#718b82")); ground.rotation.x = -Math.PI/2; ground.position.y = 0.02; add(ground,"rainy-ground","the muted ground beneath the rainy city",false); const street = new T.Group(); box(street,0,0.035,0,16,0.03,230,"#48445c"); box(street,-10,0.12,0,4,0.2,230,"#a996a7"); box(street,10,0.12,0,4,0.2,230,"#a996a7"); box(street,-7.95,0.14,0,0.15,0.16,230,"#ddc5bb"); box(street,7.95,0.14,0,0.15,0.16,230,"#ddc5bb"); for(let z=-110;z<110;z+=8) box(street,0,0.055,z,0.16,0.025,3.3,"#e6cb9e"); for(let z=-108;z<110;z+=3.5) { box(street,-10,0.235,z,3.85,0.015,0.035,"#85788d"); box(street,10,0.235,z,3.85,0.015,0.035,"#85788d"); } for(let i=0;i<20;i++){ const x=(i%2 ? -1 : 1)*(1.1+(i*13%55)/10); const z=-88+i*9.2; const p = new T.Mesh(new T.CircleGeometry(0.7+(i%3)*0.25,16),mat("#799ba8")); p.rotation.x=-Math.PI/2; p.scale.set(1,0.4,1); p.position.set(x,0.06,z); street.add(p); } add(street,"wet-street","a rain-slick road with pavements and puddles",false); const facades=["#b9786c","#c5907e","#a9696b","#b98d91","#bc9b80"]; for (const side of [-1,1]) { for(let i=0;i<11;i++) { const z=-62+i*14; const g=new T.Group(); const h=8.5+(i%3)*1.3; box(g,0,h/2,0,6,h,12,facades[(i+(side>0?2:0))%facades.length],"walls"); box(g,0,h+0.18,0,6.5,0.36,12.5,"#806475","roof"); box(g,-side*3.04,0.4,0,0.14,0.8,12,"#7f6473"); const frontX=-side*3.06; for(let row=0;row<3;row++) for(let k=-1;k<=1;k++){ const wz=k*3.3; box(g,frontX,2.0+row*2.05,wz,0.12,1.28,1.35,"#ead2ba"); box(g,frontX-side*0.08,2.0+row*2.05,wz,0.09,1.04,1.1,"#719ca9"); box(g,frontX-side*0.14,2.0+row*2.05,wz,0.07,1.05,0.07,"#e8d3c4"); } box(g,frontX-side*0.16,1.1,4.7,0.18,2.2,1.35,i%2?"#694b64":"#426f70"); sphere(g,frontX-side*0.3,1.05,5.05,0.13,0.13,0.13,"#e4bb65"); box(g,frontX-side*0.15,2.45,4.7,0.2,0.15,1.7,"#e7c7a8"); g.position.set(side*15,0,z); add(g,"terrace-"+(side<0?"west-":"east-")+i,"a brick city terrace with tall windows"); } } const tower = new T.Group(); box(tower,0,16,0,9,32,9,"#d7b88d","tower"); for (const x of [-4.25,4.25]) for(const z of [-4.25,4.25]) box(tower,x,16,z,0.8,32,0.8,"#ba9478"); for(let y=4;y<30;y+=5) { box(tower,0,y,4.54,7.5,0.2,0.15,"#b48d79"); for(const x of [-2.4,0,2.4]) { box(tower,x,y+1.5,4.58,0.8,2.3,0.1,"#796b7b"); box(tower,x,y+2.68,4.6,0.95,0.14,0.12,"#f0d8ae"); } } box(tower,0,32.5,0,10,1,10,"#a77f78"); box(tower,0,36.7,0,9,8,9,"#cba982","clock-room"); box(tower,0,40.9,0,10,0.5,10,"#a77f78"); const roof = new T.Mesh(new T.ConeGeometry(6.5,7.5,4),mat("#5c6874")); roof.position.set(0,44.7,0); roof.rotation.y=Math.PI/4; tower.add(roof); cyl(tower,0,49,0,0.16,2.2,"#d7b35c"); sphere(tower,0,50.2,0,0.45,0.45,0.45,"#e9c86a"); for(let side=0;side<4;side++){ const face=new T.Group(); face.rotation.y=side*Math.PI/2; face.position.y=36.8; const disk=new T.Mesh(new T.CylinderGeometry(3.05,3.05,0.17,32),mat("#f4dfba")); disk.rotation.x=Math.PI/2; disk.position.z=4.58; face.add(disk); const rim=new T.Mesh(new T.TorusGeometry(3.08,0.13,8,40),mat("#795e69")); rim.position.z=4.7; face.add(rim); for(let j=0;j<12;j++){ const a=j*Math.PI/6; const tick=box(face,Math.sin(a)*2.58,Math.cos(a)*2.58,4.75,0.14,0.42,0.08,"#4b3b50"); tick.rotation.z=-a; } const hour=box(face,-0.48,0.38,4.81,0.15,1.35,0.1,"#49394b"); hour.rotation.z=0.9; const minute=box(face,0.45,0.85,4.83,0.1,2.05,0.1,"#49394b"); minute.rotation.z=-0.48; sphere(face,0,0,4.9,0.24,0.24,0.16,"#ad805f"); tower.add(face); } tower.position.set(0,0,-91); add(tower,"clock-tower","a grand four-faced clock tower rising above the street"); function bus(x,z,turn,id){ const g=new T.Group(); box(g,0,1.35,0,2.55,2.25,9,"#cf3038","lower-deck"); box(g,0,3.42,-0.05,2.55,1.95,8.9,"#e33d3d","upper-deck"); box(g,0,4.47,-0.05,2.7,0.22,9.05,"#f06456","roof"); box(g,0,2.35,0,2.64,0.2,9.05,"#f7c47f"); for(const s of [-1,1]){ for(let k=0;k<5;k++){ const zz=-3.55+k*1.65; box(g,s*1.29,1.65,zz,0.1,0.92,1.3,"#9bc6cb"); box(g,s*1.29,3.55,zz,0.1,1.05,1.3,"#9bc6cb"); box(g,s*1.35,3.55,zz,0.05,1.05,0.07,"#e9c6ae"); } for(const zz of [-2.8,2.8]){ const wheel=cyl(g,s*1.28,0.57,zz,0.59,0.27,"#3e3043"); wheel.rotation.z=Math.PI/2; const hub=cyl(g,s*1.43,0.57,zz,0.23,0.04,"#d5b9ac"); hub.rotation.z=Math.PI/2; } } box(g,0,1.67,4.54,2.1,0.95,0.08,"#a7cbd0"); box(g,0,3.54,4.51,2.1,1.08,0.08,"#a7cbd0"); box(g,0,0.52,4.56,2.5,0.18,0.18,"#e7c8a4"); for(const xx of [-0.92,0.92]) sphere(g,xx,0.91,4.6,0.36,0.36,0.16,"#ffe1a1"); g.position.set(x,0,z); g.rotation.y=turn; add(g,id,"a red double-decker bus"); } bus(-4,-22,0,"red-bus-one"); bus(4,29,Math.PI,"red-bus-two"); function cab(x,z,turn,id){ const g=new T.Group(); box(g,0,0.85,0,2.05,1.35,4.2,"#383043","body"); box(g,0,1.8,-0.3,1.95,1.2,2.5,"#45394e","cabin"); box(g,0,2.45,-0.3,2.05,0.16,2.7,"#5e5060"); for(const s of [-1,1]){ box(g,s*1.01,1.86,-0.35,0.08,0.8,2.1,"#8db0b8"); box(g,s*1.07,1.86,-0.35,0.05,0.8,0.1,"#4b3b50"); for(const zz of [-1.25,1.35]){ const w=cyl(g,s*1.02,0.45,zz,0.45,0.22,"#3a293b"); w.rotation.z=Math.PI/2; const h=cyl(g,s*1.14,0.45,zz,0.18,0.04,"#c6aeb0"); h.rotation.z=Math.PI/2; } } box(g,0,1.85,0.99,1.65,0.78,0.08,"#9cbfc3"); box(g,0,0.66,2.13,1.8,0.17,0.1,"#cbb3a7"); for(const xx of [-0.7,0.7]) sphere(g,xx,0.95,2.15,0.32,0.32,0.13,"#ffe2a5"); box(g,0,2.59,-0.3,0.7,0.18,0.35,"#eacb8e"); g.position.set(x,0,z); g.rotation.y=turn; add(g,id,"a dark London-style taxi cab"); } cab(4,-10,Math.PI,"black-cab-one"); cab(-4,45,0,"black-cab-two"); function phoneBox(x,z,id){ const g=new T.Group(); box(g,0,0.12,0,1.55,0.24,1.5,"#a72c38"); for(const xx of [-0.67,0.67]) for(const zz of [-0.65,0.65]) box(g,xx,1.4,zz,0.16,2.55,0.16,"#d2353d"); box(g,0,2.72,0,1.55,0.25,1.5,"#c32e39"); box(g,0,2.94,0,1.25,0.2,1.2,"#e54a45"); for(const s of [-1,1]){ box(g,s*0.68,1.55,0,0.09,1.75,1.12,"#add0cd"); for(let k=-1;k<=1;k++) box(g,s*0.74,1.55,k*0.32,0.06,1.75,0.06,"#d53c3f"); for(let y=0.85;y<2.3;y+=0.45) box(g,s*0.74,y,0,0.06,0.06,1.1,"#d53c3f"); } for(const zz of [-0.66,0.66]){ box(g,0,1.6,zz,1.12,1.65,0.08,"#add0cd"); for(let k=-1;k<=1;k++) box(g,k*0.3,1.6,zz*1.12,0.06,1.7,0.06,"#d53c3f"); for(let y=0.9;y<2.3;y+=0.45) box(g,0,y,zz*1.12,1.1,0.06,0.06,"#d53c3f"); } box(g,0,0.55,0.69,1.15,0.45,0.09,"#cf343c"); sphere(g,0.43,1.05,0.75,0.12,0.12,0.1,"#efd17b"); g.position.set(x,0.22,z); add(g,id,"a classic red telephone box"); } phoneBox(-10.4,5,"phone-box-one"); phoneBox(10.4,-42,"phone-box-two"); for(const side of [-1,1]) for(let z=-55;z<=55;z+=22){ const g=new T.Group(); cyl(g,0,1.7,0,0.09,3.4,"#58485d"); cyl(g,0,0.15,0,0.3,0.3,"#675565"); box(g,0,3.6,0,0.52,0.55,0.52,"#ffe2a7"); box(g,0,3.92,0,0.68,0.12,0.68,"#56465b"); g.position.set(side*11.5,0.22,z); add(g,"streetlamp-"+side+"-"+z,"a warm old-fashioned street lamp"); } const walkers=[]; const coats=["#ed9b47","#6a70a3","#df6c80","#569b91","#bd7559","#9173ac"]; const umbrellas=["#d6434b","#d6a149","#7a66a3","#4c8c92","#d7649e","#cf624e"]; for(let i=0;i<8;i++){ const g=new T.Group(); const skin="#f2c9a0"; box(g,0,1.0,0,0.58,0.85,0.37,coats[i%6],"coat"); sphere(g,0,1.62,0,0.48,0.55,0.45,skin); sphere(g,-0.13,1.68,0.21,0.2,0.22,0.11,"#fff9eb"); sphere(g,0.13,1.68,0.21,0.2,0.22,0.11,"#fff9eb"); sphere(g,-0.13,1.68,0.27,0.06,0.07,0.04,"#211c29"); sphere(g,0.13,1.68,0.27,0.06,0.07,0.04,"#211c29"); const legs=[]; for(const s of [-1,1]){ const pivot=new T.Group(); pivot.position.set(s*0.16,0.65,0); box(pivot,0,-0.28,0,0.19,0.57,0.22,"#51445e"); box(pivot,0,-0.56,0.07,0.22,0.13,0.36,"#3f3147"); g.add(pivot); legs.push(pivot); } const arm=box(g,0.36,1.1,0,0.16,0.65,0.18,coats[i%6]); arm.rotation.z=0.5; sphere(g,0.53,0.88,0,0.16,0.16,0.16,skin); cyl(g,0.53,1.75,0,0.035,1.7,"#6c5260"); const canopy=new T.Mesh(new T.SphereGeometry(0.85,20,10,0,Math.PI*2,0,Math.PI/2),mat(umbrellas[i%6])); canopy.scale.set(1,0.52,1); canopy.position.set(0.53,2.55,0); g.add(canopy); const rim=new T.Mesh(new T.TorusGeometry(0.85,0.035,6,24),mat("#533d53")); rim.rotation.x=Math.PI/2; rim.position.set(0.53,2.55,0); g.add(rim); sphere(g,0.53,3.01,0,0.1,0.12,0.1,"#e7bf80"); const side=i%2?1:-1; const direction=i%4<2?1:-1; const start=-50+i*14; g.position.set(side*(9.1+(i%3)*0.55),0.22,start); g.rotation.y=direction>0?0:Math.PI; add(g,"umbrella-walker-"+i,"a hurrying pedestrian under an umbrella",false); walkers.push({g,legs,start,direction,phase:i*1.3}); } api.onFrame((dt,t)=>{ for(const w of walkers){ const travel=(t*1.25+w.start+65)%130; w.g.position.z=w.direction>0 ? travel-65 : 65-travel; w.legs[0].rotation.x=Math.sin(t*8+w.phase)*0.7; w.legs[1].rotation.x=-Math.sin(t*8+w.phase)*0.7; w.g.position.y=0.22+Math.abs(Math.sin(t*8+w.phase))*0.035; } }); const clouds=new T.Group(); for(let i=0;i<13;i++){ const x=-110+i*18; const z=-50+(i%4)*35; sphere(clouds,x,48+(i%3)*3,z,28,7,15,i%2?"#91a6ad":"#819ca7"); sphere(clouds,x+8,50+(i%3)*3,z+2,15,8,12,"#94aab0"); } add(clouds,"rain-clouds","low clouds over the rainy street",false); api.particles({type:"particles",kind:"rain",place:{where:"here",height:25},area:[90,90],rate:350,velocity:[-1,-18,0],jitter:1,gravity:2,life:1.7,size:0.13,colors:["#b8d9df","#d9e9e4"],duration:0,splash:true}); api.say="I built a rainy London-style street with buses, cabs, phone boxes and a distant clock tower. Pedestrians hurry along under their umbrellas."; api.suggest=["Make the buses drive down the street","Add a cozy pub beside the pavement","Turn the street into a foggy evening","Add a flock of pigeons near the clock tower"];