const T = api.THREE; api.world({sky:"#a9e8e6", haze:"#c6f2e9", shadow:"#8a73bc"}); const mat = {}; function m(c) { return mat[c] || (mat[c] = api.toon(c)); } function box(g, x,y,z, sx,sy,sz, c, rz=0) { const o = new T.Mesh(new T.BoxGeometry(sx,sy,sz), m(c)); o.position.set(x,y,z); o.rotation.z=rz; g.add(o); return o; } function ball(g,x,y,z,sx,sy,sz,c) { const o=new T.Mesh(new T.SphereGeometry(1,16,10),m(c)); o.position.set(x,y,z); o.scale.set(sx,sy,sz); g.add(o); return o; } function cyl(g,x,y,z,r1,r2,h,c) { const o=new T.Mesh(new T.CylinderGeometry(r1,r2,h,12),m(c)); o.position.set(x,y,z); g.add(o); return o; } function rod(g,a,b,r,c) { const v1=new T.Vector3(...a),v2=new T.Vector3(...b), d=v2.clone().sub(v1); const o=new T.Mesh(new T.CylinderGeometry(r,r,d.length(),10),m(c)); o.position.copy(v1).add(v2).multiplyScalar(.5); o.quaternion.setFromUnitVectors(new T.Vector3(0,1,0),d.normalize()); g.add(o); return o; } function tube(g, pts, radius, c) { const curve=new T.CatmullRomCurve3(pts.map(p=>new T.Vector3(...p))); const o=new T.Mesh(new T.TubeGeometry(curve,24,radius,8,false),m(c)); g.add(o); return o; } function surface(g,verts,indices,c) { const geo=new T.BufferGeometry(); geo.setAttribute("position",new T.Float32BufferAttribute(verts.flat(),3)); geo.setIndex(indices); geo.computeVertexNormals(); const material=api.toon(c); material.side=T.DoubleSide; const o=new T.Mesh(geo,material); g.add(o); return o; } const sea=new T.Group(); const water=new T.Mesh(new T.CircleGeometry(600,96),m("#46c9c5")); water.rotation.x=-Math.PI/2; water.position.y=.02; sea.add(water); api.add(sea,{id:"turquoise-lagoon",describe:"a vast turquoise lagoon",solid:false}); const shallows=new T.Group(); for(let i=0;i<24;i++){ const a=i*2.399, r=13+((i*17)%48); const p=new T.Mesh(new T.CircleGeometry(2.2+(i%4)*1.1,24),m(i%2?"#72dcd0":"#5ed3c7")); p.rotation.x=-Math.PI/2; p.position.set(Math.cos(a)*r,.035,Math.sin(a)*r); p.scale.set(1.4,.65,1); shallows.add(p); } api.add(shallows,{id:"lagoon-shallows",describe:"patches of clear shallow turquoise water",solid:false}); const resort=new T.Group(); function plank(x,z,w,d,y=.48){ box(resort,x,y,z,w,.18,d,"#b97842"); box(resort,x,y+.10,z,w,.025,.035,"#e6b379"); } function stilt(x,z){ cyl(resort,x,.05,z,.15,.19,1.05,"#8d573b"); cyl(resort,x,.52,z,.22,.22,.08,"#d6a06a"); } for(let x=-15;x<=15;x+=.65) plank(x,2,.61,2.5); for(let x=-14;x<=14;x+=3.5){stilt(x,1);stilt(x,3);} function bungalow(cx, color) { const z=-7; for(let x=-3.8;x<=3.8;x+=.55) { box(resort,cx+x,.55,z,.51,.22,6.4,"#d49a5d"); } for(const x of [-3.65,3.65]) for(const dz of [-2.8,0,2.8]) stilt(cx+x,z+dz); // Cozy room with an open front and a deep side veranda. box(resort,cx-2.85,1.89,z-.6,.18,2.55,4.5,color); box(resort,cx+2.0,1.89,z-.6,.18,2.55,4.5,color); box(resort,cx-.43,1.89,z-2.8,4.95,2.55,.18,color); box(resort,cx-2.22,1.89,z+1.6,1.25,2.55,.18,color); box(resort,cx+1.35,1.89,z+1.6,1.3,2.55,.18,color); box(resort,cx-.43,2.95,z+1.6,4.85,.42,.18,color); for(const x of [-2.9,2.05]) for(const dz of [-2.85,1.65]) box(resort,cx+x,1.92,z+dz,.18,2.8,.18,"#8d573b"); // Pitched thatch, with layered straw trim. box(resort,cx-1.85,3.42,z-.6,3.15,.30,5.4,"#eab967",.48); box(resort,cx+1.0,3.42,z-.6,3.15,.30,5.4,"#eab967",-.48); box(resort,cx-.43,4.15,z-.6,.26,.20,5.5,"#b97842"); for(let dz=-2.8;dz<=1.7;dz+=.65){ box(resort,cx-3.25,2.70,z+dz,.22,.18,.12,"#f6d68d",.48); box(resort,cx+2.39,2.70,z+dz,.22,.18,.12,"#f6d68d",-.48); } // Windows, shutters and little flower boxes. for(const dx of [-2.25,1.38]){ box(resort,cx+dx,2.05,z+1.72,.78,.80,.06,"#71c9cc"); box(resort,cx+dx,2.05,z+1.77,.08,.80,.07,"#f5ddb2"); box(resort,cx+dx,2.05,z+1.77,.78,.08,.07,"#f5ddb2"); box(resort,cx+dx,1.56,z+1.79,.95,.22,.25,"#ae7248"); for(let j=-1;j<=1;j++) ball(resort,cx+dx+j*.25,1.73,z+1.83,.12,.12,.12,j===0?"#f08cc0":"#f6d164"); } // A hammock curves between two veranda posts. for(const dz of [-2.65,2.45]) { rod(resort,[cx+3.15,.66,z+dz],[cx+3.15,2.45,z+dz],.09,"#8d573b"); ball(resort,cx+3.15,2.49,z+dz,.14,.14,.14,"#f3c37b"); } const ps=[[cx+3.15,2.15,z-2.65],[cx+3.15,1.2,z-1.55],[cx+3.15,1.03,z],[cx+3.15,1.2,z+1.4],[cx+3.15,2.15,z+2.45]]; tube(resort,ps,.075,"#f8e6b7"); surface(resort,[ [cx+2.75,1.95,z-2.35],[cx+3.55,1.95,z-2.35], [cx+2.75,1.02,z-.9],[cx+3.55,1.02,z-.9], [cx+2.75,1.02,z+.8],[cx+3.55,1.02,z+.8], [cx+2.75,1.95,z+2.15],[cx+3.55,1.95,z+2.15] ],[0,1,2,1,3,2,2,3,4,3,5,4,4,5,6,5,7,6],"#f08cc0"); // Small porch lamp. cyl(resort,cx-2.9,2.2,z+1.9,.17,.17,.34,"#f7d976"); ball(resort,cx-2.9,2.2,z+1.9,.10,.16,.10,"#fff0ae"); for(let zz=-3.7;zz<1;zz+=.55) plank(cx,zz,1.9,.51); for(let zz=-3;zz<=0;zz+=2.5){stilt(cx-.75,zz);stilt(cx+.75,zz);} } bungalow(-11,"#f2b992"); bungalow(0,"#f4d19b"); bungalow(11,"#f0a9a4"); api.add(resort,{id:"overwater-bungalows",describe:"three thatched overwater bungalows with hammocks and wooden walkways"}); function island(id,x,z,rx,rz) { const g=new T.Group(); const sand=cyl(g,0,.12,0,1,1,.5,"#f3d28b"); sand.scale.set(rx,1,rz); const beach=cyl(g,0,.39,0,1,1,.08,"#f9dda0"); beach.scale.set(rx*.87,1,rz*.87); function palm(px,pz,h,lean,phase) { const top=[px+lean,h,pz+.35]; tube(g,[[px,.42,pz],[px+lean*.15,h*.35,pz],[px+lean*.6,h*.75,pz+.2],top],.22,"#b87544"); for(let j=0;j<5;j++){ const yy=.9+j*(h-.9)/5, xx=px+lean*(yy/h)*.8; const ring=cyl(g,xx,yy,pz+.2*(yy/h),.23,.23,.075,"#d49b5e"); ring.rotation.z=-lean/h; } for(let k=0;k<7;k++){ const a=phase+k*Math.PI*2/7, dx=Math.cos(a),dz=Math.sin(a); const tx=top[0],ty=top[1],tz=top[2], len=2.6+(k%3)*.35; surface(g,[[tx,ty,tz],[tx+dx*len*.48-dz*.45,ty+.15,tz+dz*len*.48+dx*.45], [tx+dx*len,ty-.9,tz+dz*len],[tx+dx*len*.48+dz*.45,ty+.15,tz+dz*len*.48-dx*.45]], [0,1,2,0,2,3],k%2?"#53b86b":"#78ce68"); rod(g,[tx,ty,tz],[tx+dx*len,ty-.85,tz+dz*len],.035,"#3f9d67"); } for(let k=0;k<3;k++) ball(g,top[0]+Math.cos(k*2.1)*.26,top[1]-.22,top[2]+Math.sin(k*2.1)*.26,.22,.23,.22,"#a66a3b"); } palm(-rx*.35,-rz*.1,6.4,.8,.1); palm(rx*.28,rz*.18,7.1,-.7,.6); palm(rx*.05,-rz*.42,5.4,.45,1.2); for(let i=0;i<7;i++){ const a=i*2.4, px=Math.cos(a)*rx*.7,pz=Math.sin(a)*rz*.68; ball(g,px,.53,pz,.32,.17,.27,i%2?"#f08cc0":"#f6f0c6"); } g.position.set(x,0,z); api.add(g,{id,describe:"a sandy palm-covered island"}); } island("palm-island-west",-32,-12,7,5.5); island("palm-island-east",32,-20,8,6); island("palm-island-south",-29,27,6,4.7); const boat=new T.Group(); // A rounded, colorful hull, gunwales, mast and two full triangular sails. ball(boat,0,.50,0,1.55,.52,3.8,"#ef8a3c"); box(boat,0,.82,0,2.55,.17,5.6,"#f4cd8b"); box(boat,0,.92,.1,1.9,.10,3.5,"#8d573b"); rod(boat,[0,.85,-.3],[0,6.7,-.3],.11,"#8d573b"); rod(boat,[0,1.35,-.3],[0,1.35,2.85],.08,"#8d573b"); surface(boat,[[.02,1.48,-.2],[.02,6.4,-.2],[.02,1.48,2.65]], [0,1,2],"#fff2cb"); surface(boat,[[-.03,1.55,-.42],[-.03,5.45,-.42],[-.03,1.55,-3.0]], [0,1,2],"#f4a6b3"); rod(boat,[0,6.65,-.3],[0,1.15,-3.25],.035,"#f5dfb7"); ball(boat,0,6.75,-.3,.13,.13,.13,"#f2cc70"); boat.position.set(16,0,16); boat.rotation.y=-.5; api.add(boat,{id:"lagoon-sailboat",describe:"a small orange sailboat with cream and pink sails",solid:false}); const rays=[]; for(let i=0;i<5;i++){ const g=new T.Group(); // Diamond-shaped wings and a long, tapered tail. surface(g,[[0,.17,1.05],[-1.45,.12,0],[0,.25,-.8],[1.45,.12,0]], [0,1,2,0,2,3],"#9b83c4"); ball(g,0,.17,.13,.68,.13,.75,"#b9a3e8"); tube(g,[[0,.15,-.55],[.1,.13,-1.2],[.22,.12,-2.05],[.32,.12,-2.65]],.035,"#8a6db2"); ball(g,-.25,.30,.45,.12,.08,.12,"#fff8f1"); ball(g,.25,.30,.45,.12,.08,.12,"#fff8f1"); ball(g,-.25,.37,.49,.035,.03,.035,"#241820"); ball(g,.25,.37,.49,.035,.03,.035,"#241820"); const x=-19+i*8, z=11+(i%2)*8; g.position.set(x,0,z); api.add(g,{id:"gliding-stingray-"+(i+1),describe:"a gentle stingray gliding through the lagoon",solid:false}); rays.push({g,x,z,phase:i*1.7}); } api.onFrame((dt,t)=>{ for(const r of rays){ r.g.position.x=r.x+Math.sin(t*.25+r.phase)*3; r.g.position.z=r.z+Math.cos(t*.25+r.phase)*2; r.g.rotation.y=Math.atan2(Math.cos(t*.25+r.phase)*3,-Math.sin(t*.25+r.phase)*2); r.g.position.y=.025+Math.sin(t*2+r.phase)*.025; r.g.rotation.z=Math.sin(t*2+r.phase)*.06; } boat.position.y=.08+Math.sin(t*1.15)*.07; boat.rotation.z=Math.sin(t*.8)*.025; }); const sky=new T.Group(); ball(sky,-120,105,-250,24,24,24,"#fff1ad"); for(let i=0;i<5;i++){ const x=-125+i*62, y=60+(i%2)*12, z=-190-(i%3)*15; for(let j=0;j<4;j++) ball(sky,x+j*7,y+(j%2)*2,z,10,4.5,5,"#e9faf0"); } api.add(sky,{id:"lagoon-sky",describe:"a warm sun and soft clouds over the lagoon",solid:false}); api.say="I built a turquoise lagoon with three stilt bungalows, connected walkways, hammocks, a sailboat, palm islands, and gliding stingrays."; api.suggest=["Add lanterns along the wooden walkways","Put dolphins in the lagoon","Make it a tropical sunset","Add a beachside picnic"];