const T = api.THREE; const mats = {}; function mat(c, glow = false) { const k = c + glow; return mats[k] || (mats[k] = api.toon(c, glow ? {glow:true} : {})); } function mesh(g, c, x, y, z, parent, glow = false) { const m = new T.Mesh(g, mat(c, glow)); m.position.set(x, y, z); parent.add(m); return m; } function box(p, c, x, y, z, w, h, d) { return mesh(new T.BoxGeometry(w,h,d),c,x,y,z,p); } function sphere(p,c,x,y,z,rx,ry,rz) { const m = mesh(new T.SphereGeometry(1,12,8),c,x,y,z,p); m.scale.set(rx,ry,rz); return m; } function cyl(p,c,x,y,z,r1,r2,h,n=12) { return mesh(new T.CylinderGeometry(r1,r2,h,n),c,x,y,z,p); } function add(g,id,describe,solid=true) { api.add(g,{id,describe,solid}); } api.world({sky:"#9bd5e4",haze:"#d4e5d5",shadow:"#8c71a1"}); const ground = new T.Group(); const disc = mesh(new T.CircleGeometry(600,96),"#dbc499",0,0.02,0,ground); disc.rotation.x = -Math.PI/2; add(ground,"roman-ground","warm sandy Roman ground",false); // Sun hanging above the city. const sun = new T.Group(); sphere(sun,"#ffe095",0,0,0,24,24,24); sun.position.set(150,160,-260); add(sun,"roman-sun","a golden sun above Rome",false); // Forum paving, with shallow individual stone seams. const forum = new T.Group(); box(forum,"#e8d7b9",0,0.07,-18,62,0.12,55); for(let x=-30;x<=30;x+=5) box(forum,"#c4aa92",x,0.14,-18,0.035,0.015,55); for(let z=-45;z<=9;z+=5) box(forum,"#c4aa92",0,0.145,z,62,0.015,0.035); add(forum,"forum-paving","broad marble paving in the Roman forum",false); // A monumental marble temple at the far end of the forum. const temple = new T.Group(); temple.position.set(0,0,-62); box(temple,"#cbb79e",0,0.22,0,31,0.44,25); box(temple,"#e7dac5",0,0.52,0,29,0.25,23); box(temple,"#f5e8d0",0,0.82,0,27,0.32,21); box(temple,"#ede0cc",0,5.7,-2,17,9.7,13); box(temple,"#755666",0,4.1,4.55,4,6.5,0.16); box(temple,"#b99366",-0.12,4.1,4.67,0.13,6.3,0.1); for(const x of [-11,-7.3,-3.65,0,3.65,7.3,11]) { for(const z of [8.5,-9]) { cyl(temple,"#faf0dc",x,5.3,z,0.66,0.82,8.5,16); box(temple,"#e1cfb5",x,1.15,z,1.9,0.35,1.9); box(temple,"#fff1d9",x,9.65,z,2.0,0.5,2.0); } } for(const z of [-5,-1,3]) for(const x of [-11,11]) { cyl(temple,"#faf0dc",x,5.3,z,0.66,0.82,8.5,16); box(temple,"#fff1d9",x,9.65,z,2,0.5,2); } box(temple,"#e4d1b7",0,10.2,0,26,0.8,21); box(temple,"#f7e7ce",0,10.75,0,27,0.4,22); // Triangular pediment and roof. const pedShape = new T.Shape(); pedShape.moveTo(-13,0); pedShape.lineTo(13,0); pedShape.lineTo(0,4.2); pedShape.closePath(); const pedGeo = new T.ExtrudeGeometry(pedShape,{depth:0.55,bevelEnabled:false}); mesh(pedGeo,"#e4cda9",0,10.95,10.5,temple); mesh(pedGeo,"#e4cda9",0,10.95,-11,temple); for(const s of [-1,1]) { const roof = box(temple,"#c55b48",s*6.5,13.05,0,14.2,0.45,22.5); roof.rotation.z = -s*Math.atan2(4.2,13); } sphere(temple,"#d69d4a",0,12.35,11.15,1.0,1.0,0.18); add(temple,"forum-temple","a grand marble temple with tall columns and a red tiled roof"); // Colosseum: tiered oval arcades, open between the piers. const col = new T.Group(); col.position.set(82,0,-65); const N = 32, rx = 34, rz = 25; for(let i=0;i{ for(const r of racers){ if(r.ch){ const a=t*0.19+r.k*2.0; r.ch.position.set(-91+48.5*Math.cos(a),0.22,-63+25*Math.sin(a)); const dx=-48.5*Math.sin(a), dz=25*Math.cos(a); r.ch.rotation.y=Math.atan2(dx,dz); r.ch.position.y+=0.06*Math.sin(t*12+r.k); } else if(r.legs){ r.legs.forEach((leg,i)=>{leg.rotation.x=0.7*Math.sin(t*11+r.offset+(i===0||i===3?0:Math.PI));}); } } }); // Market stalls in two lines, with striped awnings and real goods. const market=new T.Group(); function stall(x,z,flip,index){ const g=new T.Group(); g.position.set(x,0,z); g.rotation.y=flip?Math.PI:0; market.add(g); for(const xx of [-2,2]) for(const zz of [-1.3,1.3]){ box(g,"#966344",xx,1.5,zz,0.18,3,0.18); } box(g,"#b47a50",0,0.9,0,4.3,0.25,2.2); for(let j=0;j<8;j++){ const aw=box(g,j%2?"#f3e4c3":(index%2?"#ba6959":"#b995c6"),-1.9+j*0.54,3.1,0,0.54,0.12,3.2); aw.rotation.x=0.08; const fringe=box(g,j%2?"#f3e4c3":(index%2?"#ba6959":"#b995c6"),-1.9+j*0.54,2.95,1.6,0.54,0.35,0.08); } if(index%3===0){ for(let i=0;i<7;i++) sphere(g,["#cf5941","#e2aa47","#8eac5c"][i%3],-1.6+i*0.5,1.15,0.1,0.22,0.2,0.22); } else if(index%3===1){ for(let i=0;i<4;i++){ const x=-1.4+i*0.9; sphere(g,"#c98058",x,1.35,0,0.34,0.38,0.34); cyl(g,"#e1a577",x,1.7,0,0.16,0.21,0.25,10); } } else { for(let i=0;i<5;i++) box(g,["#bca1c9","#d68b7c","#e8cc91"][i%3],-1.5+i*0.75,1.12,0,0.6,0.18,0.8); } person(g,0,0,-1.0,"#f2e3c8",skins[index%4],0,0.95); } for(let i=0;i<4;i++){ stall(-23+i*6, -13, false, i); stall(7+i*6, -31, true, i+4); } add(market,"forum-market","striped forum market stalls selling fruit, pottery and cloth",false); const walkers=[]; const townsfolk=new T.Group(); for(let i=0;i<18;i++){ const x=-24+(i%6)*9, z=-4-Math.floor(i/6)*12; const p=person(townsfolk,x,0,z,robes[i%robes.length],skins[(i*3)%skins.length],i*1.4,0.95); walkers.push({p,x,z,phase:i*1.7}); } add(townsfolk,"forum-crowd","shoppers and toga-clad townspeople in the forum",false); api.onFrame((dt,t)=>{ for(const w of walkers){ const a=t*0.22+w.phase; w.p.position.x=w.x+1.5*Math.sin(a); w.p.position.z=w.z+0.9*Math.cos(a); w.p.rotation.y=Math.atan2(1.5*Math.cos(a),-0.9*Math.sin(a)); w.p.position.y=0.025*Math.abs(Math.sin(t*5+w.phase)); } }); // Small fountain and cypress trees add life to the forum. const fountain=new T.Group(); fountain.position.set(1,0,-16); cyl(fountain,"#e9d5b8",0,0.35,0,3.1,3.3,0.7,20); cyl(fountain,"#6dbec2",0,0.73,0,2.65,2.65,0.08,20); cyl(fountain,"#e9d5b8",0,1.25,0,0.38,0.55,1.1,12); sphere(fountain,"#b5e4dc",0,2.25,0,0.18,0.35,0.18); add(fountain,"forum-fountain","a little marble fountain in the forum",false); api.particles({type:"particles",kind:"water",attach:{object:"forum-fountain",offset:[0,2.1,0]},area:[0.2,0.2],rate:10,velocity:[0,2,0],jitter:1,gravity:4,life:1.4,size:0.08,colors:["#b5e4dc","#86cbd0"],duration:0}); const trees=new T.Group(); for(const [x,z] of [[-29,-42],[29,-42],[-30,6],[30,6],[33,-52],[-34,-52]]){ cyl(trees,"#8f6747",x,1.1,z,0.25,0.32,2.2,8); sphere(trees,"#477d66",x,4.1,z,0.95,3.2,0.95); sphere(trees,"#669a72",x-0.2,5.0,z+0.1,0.55,2.2,0.55); } add(trees,"forum-cypresses","slender cypress trees around the forum",false); api.say="I built a bustling Roman forum, a columned temple and the Colosseum, with chariots racing past crowds in the circus."; api.suggest=["Add more chariots to the race","Put musicians in the forum","Add a Roman triumphal arch","Make the city glow at sunset"];