const T = api.THREE; api.world({time:"sunset", sky:"#b77db5", haze:"#efb29f", shadow:"#72518c"}); const ground = new T.Mesh(new T.CircleGeometry(600,96), api.toon("#8b6d86")); ground.rotation.x = -Math.PI/2; ground.position.y = 0.02; api.add(ground,{id:"city-ground",describe:"dusky city pavement",solid:false}); const forward = new T.Vector3(); api.camera.getWorldDirection(forward); forward.y = 0; if (forward.lengthSq() < 0.001) forward.set(0,0,-1); forward.normalize(); const yaw = Math.atan2(forward.x,forward.z); const right = new T.Vector3(forward.z,0,-forward.x); const origin = new T.Vector3(api.player.x,0,api.player.z); function worldPos(x,z,y=0){ return origin.clone().addScaledVector(right,x).addScaledVector(forward,z).add(new T.Vector3(0,y,0)); } function put(group,x,z,id,describe,solid=true){ group.position.copy(worldPos(x,z)); group.rotation.y=yaw; api.add(group,{id,describe,solid}); } const mats={}; function mat(c,glow=false){ const k=c+glow; return mats[k]||(mats[k]=api.toon(c,{glow})); } function box(g,x,y,z,w,h,d,c,glow=false){ const m=new T.Mesh(new T.BoxGeometry(w,h,d),mat(c,glow)); m.position.set(x,y,z); g.add(m); return m; } function ball(g,x,y,z,r,c,glow=false){ const m=new T.Mesh(new T.SphereGeometry(r,12,8),mat(c,glow)); m.position.set(x,y,z); g.add(m); return m; } function rod(g,a,b,r,c,glow=false){ const av=new T.Vector3(...a), bv=new T.Vector3(...b); const m=new T.Mesh(new T.CylinderGeometry(r,r,av.distanceTo(bv),8),mat(c,glow)); m.position.copy(av).add(bv).multiplyScalar(.5); m.quaternion.setFromUnitVectors(new T.Vector3(0,1,0),bv.sub(av).normalize()); g.add(m); return m; } function cylinder(g,x,y,z,r1,r2,h,c){ const m=new T.Mesh(new T.CylinderGeometry(r1,r2,h,12),mat(c)); m.position.set(x,y,z); g.add(m); return m; } // A road runs between the buildings, with little curb and lane details. const street=new T.Group(); box(street,1,0.035,33,10,.05,100,"#66506f"); box(street,-4.15,.15,33,.35,.3,100,"#d7a1a2"); box(street,6.15,.15,33,.35,.3,100,"#d7a1a2"); for(let z=-8;z<80;z+=8) box(street,1,.075,z,.16,.025,3,"#f5cf80"); for(let i=0;i<6;i++) box(street,-1.9+i*1.15,.08,7,.65,.025,2,"#f7d7bd"); put(street,0,0,"street","a dusky street with curbs and a crosswalk",false); // An accessible rooftop garden, with wide steps rising from the pavement. const garden=new T.Group(); box(garden,0,2,0,12,4,12,"#b75b55"); box(garden,0,4.1,0,12.3,.2,12.3,"#9a707e"); box(garden,-5.85,4.48,0,.3,.75,12,"#9b4b4e"); box(garden,5.85,4.48,0,.3,.75,12,"#9b4b4e"); box(garden,0,4.48,5.85,12,.75,.3,"#9b4b4e"); box(garden,-3.7,4.48,-5.85,4.3,.75,.3,"#9b4b4e"); box(garden,3.7,4.48,-5.85,4.3,.75,.3,"#9b4b4e"); for(let i=0;i<8;i++){ const h=(i+1)*.5; box(garden,0,h/2,-12.4+i*.82,3,h,.85,"#b77c73"); box(garden,0,h+.035,-12.4+i*.82,3.04,.07,.85,"#d7aaa0"); } // Street-facing windows and brick accents. for(let x of [-4,-2,2,4]){ for(let y of [1.25,2.95]){ box(garden,x,y,-6.025,1.05,1.15,.07,"#563b68"); box(garden,x,y,-6.075,.82,.93,.05,"#f4bf78",true); box(garden,x,y,-6.11,.07,.95,.03,"#76506b"); } } for(let y=.45;y<4;y+=.65){ for(let x=-5.4;x<5.5;x+=2.1) box(garden,x+(Math.round(y*10)%2)*.35,y,-6.04,.85,.035,.035,"#e3917a"); } // Planters, soil, leaves and small flowers. for(const [x,z] of [[-3.4,-2.7],[3.35,-2.7],[-3.4,2.6],[3.35,2.6]]){ box(garden,x,4.48,z,2.8,.62,1.8,"#a46249"); box(garden,x,4.82,z,2.65,.12,1.65,"#684154"); for(let i=0;i<6;i++){ const px=x-1+i*.4, pz=z+((i%2)*.65-.33); rod(garden,[px,4.86,pz],[px,5.28+(i%3)*.1,pz],.035,"#478663"); const leaf=ball(garden,px+.13,5.12,pz,.18,i%2?"#71b86a":"#528d63"); leaf.scale.set(1.4,.55,.7); ball(garden,px,5.32+(i%3)*.1,pz,.105,["#f08cc0","#f6cd69","#df7d91"][i%3]); } } // A bench and a watering can. box(garden,0,4.65,3.7,2,.16,.65,"#d89867"); for(const x of [-.75,.75]) box(garden,x,4.39,3.7,.13,.55,.12,"#70475d"); box(garden,0,5.03,4.02,2,.65,.12,"#d89867"); cylinder(garden,1.75,4.48,1.4,.28,.23,.55,"#80b8ae"); rod(garden,[1.95,4.48,1.4],[2.35,4.62,1.4],.07,"#80b8ae"); rod(garden,[1.48,4.73,1.4],[1.88,4.9,1.4],.045,"#80b8ae"); // Four posts carry gently sagging strings of warm bulbs. for(const x of [-5,5]) for(const z of [-4.5,4.5]){ rod(garden,[x,4.2,z],[x,7.25,z],.075,"#65435e"); ball(garden,x,7.3,z,.11,"#e3aa78"); } for(const z of [-4.5,0,4.5]){ let prev=null; for(let i=0;i<=12;i++){ const x=-5+i*10/12, y=7.25-.65*Math.sin(Math.PI*i/12); if(prev) rod(garden,prev,[x,y,z],.025,"#59405d"); if(i%2===1){ rod(garden,[x,y,z],[x,y-.18,z],.025,"#59405d"); ball(garden,x,y-.24,z,.11,i%4===1?"#ffe3a0":"#ffd188",true); } prev=[x,y,z]; } } // A small spinning rooftop pinwheel. const pinwheel=new T.Group(); pinwheel.position.set(4.7,6.25,3.9); rod(garden,[4.7,4.2,3.9],[4.7,6.25,3.9],.035,"#684959"); for(let i=0;i<4;i++){ const a=i*Math.PI/2; const blade=box(pinwheel,Math.cos(a)*.25,Math.sin(a)*.25,0,.45,.14,.06,i%2?"#f4c963":"#ee8eae"); blade.rotation.z=a+.35; } ball(pinwheel,0,0,.05,.1,"#f7d7a8",true); garden.add(pinwheel); put(garden,-10,18,"rooftop-garden","a brick rooftop garden with stairs, flowers and string lights"); api.onFrame((dt)=>{pinwheel.rotation.z+=dt*1.4;}); function brickBuilding(x,z,w,d,h,color,id){ const g=new T.Group(); box(g,0,h/2,0,w,h,d,color); box(g,0,h+.12,0,w+.3,.24,d+.3,"#79566e"); for(let xx=-w/2+.3;xx