const T = api.THREE; const dir = new T.Vector3(); api.camera.getWorldDirection(dir); dir.y = 0; if (dir.lengthSq() < 0.001) dir.set(0, 0, -1); dir.normalize(); const angle = Math.atan2(dir.x, dir.z); const px = api.player.x + dir.x * 29; const pz = api.player.z + dir.z * 29; const groundY = api.groundHeight(px, pz); api.world({sky:"#8ed8e8", haze:"#c5f0e8", shadow:"#7865a2"}); const sand = new T.Mesh(new T.CircleGeometry(600, 96), api.toon("#f2cc78")); sand.rotation.x = -Math.PI / 2; sand.position.y = 0.02; api.add(sand, {id:"sandy-ground", describe:"golden sand stretching around the beach", solid:false}); function root() { const g = new T.Group(); g.position.set(px, groundY, pz); g.rotation.y = angle; return g; } function box(g, name, x,y,z, sx,sy,sz, color, rx=0, ry=0, rz=0) { const m = new T.Mesh(new T.BoxGeometry(sx,sy,sz), api.toon(color)); m.name = name; m.position.set(x,y,z); m.rotation.set(rx,ry,rz); g.add(m); return m; } function ball(g, name, x,y,z, sx,sy,sz, color) { const m = new T.Mesh(new T.SphereGeometry(1, 12, 8), api.toon(color)); m.name = name; m.position.set(x,y,z); m.scale.set(sx,sy,sz); g.add(m); return m; } function line(g, name, pts, radius, color) { const curve = new T.CatmullRomCurve3(pts.map(p => new T.Vector3(...p))); const mesh = new T.Mesh(new T.TubeGeometry(curve, Math.max(8, pts.length * 4), radius, 6, false), api.toon(color)); mesh.name = name; g.add(mesh); return mesh; } function rod(g, name, a, b, radius, color) { const av = new T.Vector3(...a), bv = new T.Vector3(...b); const m = new T.Mesh(new T.CylinderGeometry(radius, radius, av.distanceTo(bv), 10), api.toon(color)); m.position.copy(av).add(bv).multiplyScalar(0.5); m.quaternion.setFromUnitVectors(new T.Vector3(0,1,0), bv.sub(av).normalize()); m.name = name; g.add(m); return m; } function poly(g, name, vertices, indices, color) { const geo = new T.BufferGeometry(); geo.setAttribute("position", new T.Float32BufferAttribute(vertices.flat(), 3)); geo.setIndex(indices); geo.computeVertexNormals(); const m = new T.Mesh(geo, api.toon(color)); m.name = name; g.add(m); return m; } const park = root(); box(park,"concrete-pad",0,0.10,0,46,0.2,48,"#c6b4d1"); box(park,"entry-path",0,0.08,-26,7,0.16,5,"#e3c9d6"); // A deep-looking, open square bowl: the sloped rings rise to a rounded rim. const cx=-11, cz=0, inner=2.7, outer=6.2; const levels=5; for (let k=0;k 0.21 + 2.65*Math.pow(i/seg,2); for(let i=0;i=4?4:0), z=29+(i%3)*3.2; const g=root(); const trunkX=x+(i%2?0.7:-0.7); rod(g,"palm-trunk",[x,0.1,z],[trunkX,6.6,z+0.5],0.27,"#bf7d4f"); for(let k=0;k<5;k++){ const yy=0.8+k*1.05; const xx=x+(trunkX-x)*yy/6.6; const zz=z+0.5*yy/6.6; rod(g,"trunk-band",[xx-0.23,yy,zz],[xx+0.23,yy+0.08,zz],0.045,"#885679"); } const crown=new T.Group(); crown.position.set(trunkX,6.6,z+0.5); for(let k=0;k<7;k++){ const a=k*Math.PI*2/7; line(crown,"palm-frond",[[0,0,0],[Math.cos(a)*1.4,0.6,Math.sin(a)*1.4],[Math.cos(a)*2.8,0.15,Math.sin(a)*2.8],[Math.cos(a)*3.7,-0.8,Math.sin(a)*3.7]],0.22,k%2?"#38ae80":"#66c77b"); } for(let k=0;k<3;k++) ball(crown,"coconut",Math.cos(k*2.1)*0.35,-0.12,Math.sin(k*2.1)*0.35,0.24,0.25,0.24,"#b97545"); g.add(crown); api.add(g,{id:"beach-palm-"+i,describe:"a leaning beach palm tree with coconuts"}); } // Sunny sky decorations. const sun = new T.Mesh(new T.SphereGeometry(17,20,14),api.toon("#ffe36c",{glow:true})); sun.position.set(px+dir.x*230-90,150,pz+dir.z*230); api.add(sun,{id:"sun",describe:"a big sunny yellow sun",solid:false}); for(let i=0;i<3;i++){ const g=new T.Group(); g.position.set(px+dir.x*(160+i*35)+(i-1)*65, 100+i*9, pz+dir.z*(160+i*35)); for(let k=0;k<4;k++) ball(g,"cloud-puff",(k-1.5)*9,(k%2)*3,0,11,6,5,"#fff1e3"); api.add(g,{id:"cloud-"+i,describe:"a fluffy sunny-day cloud",solid:false}); } // Build skaters and BMX riders as animated, non-solid figures. const action=root(); function skater(x,z,shirt,helmet,phase){ const g=api.build({parts:[ {name:"board",shape:"roundbox",size:[0.55,0.12,1.35],pos:[0,0.14,0],color:"#ef8a3c"}, {name:"wheelL",shape:"sphere",size:[0.18,0.18,0.18],pos:[-0.3,0.09,0.43],color:"#725295",mirror:true}, {name:"wheelBack",shape:"sphere",size:[0.18,0.18,0.18],pos:[-0.3,0.09,-0.43],color:"#725295",mirror:true}, {name:"legL",shape:"capsule",size:[0.22,0.62,0.22],pos:[-0.2,0.52,0.13],rot:[-25,0,-10],color:"#6155a5",mirror:true}, {name:"body",shape:"roundbox",size:[0.66,0.72,0.4],pos:[0,1.12,0],rot:[-12,0,0],color:shirt}, {name:"armL",shape:"capsule",size:[0.19,0.67,0.19],pos:[-0.47,1.24,0],rot:[0,0,-65],color:shirt,mirror:true}, {name:"handL",shape:"sphere",size:[0.2,0.2,0.2],pos:[-0.73,1.38,0],color:"#f2c9a0",mirror:true}, {name:"head",shape:"sphere",size:[0.58,0.58,0.55],pos:[0,1.72,0.05],color:"#f2c9a0"}, {name:"eyeL",shape:"eye",size:[0.19,0.21,0.1],pos:[-0.14,1.77,0.31],mirror:true}, {name:"helmet",shape:"sphere",size:[0.68,0.32,0.64],pos:[0,1.96,0.02],color:helmet} ]}); action.add(g); return {g,x,z,phase}; } const riders=[ skater(9,-8,"#2db9aa","#f3c848",0), skater(-11,0,"#f175a4","#7656bf",2.1), skater(9,11,"#f39b4a","#41b4bb",4.2) ]; function bmx(x,z,phase,color){ const g=new T.Group(); const wheelMat=api.toon("#604679"); for(const zz of [-0.72,0.72]){ const tire=new T.Mesh(new T.TorusGeometry(0.39,0.075,8,20),wheelMat); tire.rotation.y=Math.PI/2; tire.position.set(0,0.46,zz); tire.name="bmx-wheel"; g.add(tire); rod(g,"wheel-spoke",[0,0.1,zz],[0,0.82,zz],0.025,"#f7ca66"); rod(g,"wheel-spoke",[0,0.46,zz-0.36],[0,0.46,zz+0.36],0.025,"#f7ca66"); } rod(g,"bike-frame",[0,0.46,-0.72],[0,0.52,0.05],0.075,color); rod(g,"bike-frame",[0,0.52,0.05],[0,1.02,-0.4],0.075,color); rod(g,"bike-frame",[0,1.02,-0.4],[0,0.46,-0.72],0.075,color); rod(g,"bike-frame",[0,1.02,-0.4],[0,0.98,0.48],0.075,color); rod(g,"bike-frame",[0,0.52,0.05],[0,0.98,0.48],0.075,color); rod(g,"bike-fork",[0,0.46,0.72],[0,1.18,0.48],0.065,"#755091"); rod(g,"handlebars",[-0.35,1.2,0.48],[0.35,1.2,0.48],0.06,"#755091"); box(g,"saddle",0,1.1,-0.4,0.28,0.1,0.38,"#755091"); const person=api.build({parts:[ {name:"legL",shape:"capsule",size:[0.2,0.58,0.2],pos:[-0.18,1.17,-0.1],rot:[25,0,15],color:"#5b62aa",mirror:true}, {name:"body",shape:"roundbox",size:[0.58,0.62,0.37],pos:[0,1.63,0.02],rot:[-25,0,0],color:"#f2b144"}, {name:"armL",shape:"capsule",size:[0.16,0.57,0.16],pos:[-0.27,1.48,0.27],rot:[-55,0,0],color:"#f2b144",mirror:true}, {name:"head",shape:"sphere",size:[0.52,0.54,0.5],pos:[0,2.08,0.15],color:"#f2c9a0"}, {name:"eyeL",shape:"eye",size:[0.18,0.19,0.09],pos:[-0.12,2.11,0.39],mirror:true}, {name:"helmet",shape:"sphere",size:[0.6,0.29,0.57],pos:[0,2.31,0.14],color:"#e75c93"} ]}); g.add(person); action.add(g); return {g,x,z,phase}; } const bikes=[bmx(2,-5,0.8,"#34bcb3"),bmx(3,12,3.7,"#ef7951")]; api.add(action,{id:"park-riders",describe:"helmeted skateboarders and BMX riders soaring over the skate park",solid:false}); api.onFrame((dt,t)=>{ for(const r of riders){ const a=t*0.85+r.phase; r.g.position.set(r.x+Math.sin(a)*2.4,0.25+Math.pow(Math.max(0,Math.sin(a)),1.3)*3.4,r.z+Math.cos(a)*2.1); r.g.rotation.y=a+Math.PI/2; r.g.rotation.z=0.18*Math.sin(a); r.g.rotation.x=0.16*Math.sin(a*1.3); } for(const r of bikes){ const a=t*0.7+r.phase; r.g.position.set(r.x+Math.sin(a)*3,0.2+Math.pow(Math.max(0,Math.sin(a)),1.4)*2.9,r.z+Math.cos(a)*2.8); r.g.rotation.y=a+Math.PI/2; r.g.rotation.z=0.15*Math.sin(a); } }); api.say="I built a sunny beachside skate park with graffiti-covered ramps, a bowl and rails. Skateboarders and BMX riders are catching air, with palms and ocean behind them."; api.suggest=["add a giant looping ramp","put a beach hut by the palms","add a flock of flying seagulls","make the sunset glow pink"];