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 yaw = Math.atan2(dir.x, dir.z); const px = api.player.x, pz = api.player.z; const mats = {}; function mat(c, glow = false) { const k = c + (glow ? "g" : ""); return mats[k] || (mats[k] = api.toon(c, glow ? {glow:true} : {})); } function root() { const g = new T.Group(); g.position.set(px, 0, pz); g.rotation.y = yaw; return g; } function box(g, c, x,y,z, sx,sy,sz, name) { const m = new T.Mesh(new T.BoxGeometry(sx,sy,sz), mat(c)); m.position.set(x,y,z); if (name) m.name = name; g.add(m); return m; } function ball(g,c,x,y,z,sx,sy,sz) { const m = new T.Mesh(new T.SphereGeometry(1, 12, 8), mat(c)); m.position.set(x,y,z); m.scale.set(sx,sy,sz); g.add(m); return m; } function cyl(g,c,x,y,z,r1,r2,h) { 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; } function line(g,c,a,b,r) { const v1 = new T.Vector3(...a), v2 = new T.Vector3(...b); const d = new T.Vector3().subVectors(v2,v1); const m = new T.Mesh(new T.CylinderGeometry(r,r,d.length(),8), mat(c)); m.position.copy(v1).add(v2).multiplyScalar(0.5); m.quaternion.setFromUnitVectors(new T.Vector3(0,1,0),d.normalize()); g.add(m); return m; } api.world({sky:"#68cbd2", haze:"#bce5df", shadow:"#8a69ad"}); const ground = new T.Mesh(new T.CircleGeometry(600,96), mat("#74c8b1")); ground.rotation.x = -Math.PI/2; ground.position.set(px,0.02,pz); api.add(ground,{id:"festival-ground",describe:"teal ground around the festival street",solid:false}); const street = root(); box(street,"#d58d70",0,0.05,35,13,0.08,100); box(street,"#f1c99e",-7.65,0.14,35,2.3,0.25,100); box(street,"#f1c99e",7.65,0.14,35,2.3,0.25,100); for (let z=-10; z<85; z+=4) { box(street,"#ecab87",-7.65,0.275,z,2.25,0.015,0.045); box(street,"#ecab87",7.65,0.275,z,2.25,0.015,0.045); } for (let z=-4; z<83; z+=6) { box(street,"#f4c875",0,0.1,z,0.12,0.02,1.8); } api.add(street,{id:"festival-street",describe:"a long parade street with raised sidewalks",solid:false}); const buildings = root(); const colors = ["#ed8a71","#efbd7a","#db7690","#b99ad4","#f0a36f","#8ac9bf"]; for (const side of [-1,1]) { for (let i=0;i<9;i++) { const z=1+i*10.2, x=side*13.1, h=5.8+(i%3)*1.1; box(buildings,colors[(i+(side>0?2:0))%colors.length],x,h/2,z,8,h,9); box(buildings,"#a63e49",x,h+0.3,z,8.7,0.6,9.6); box(buildings,"#f1c660",x,h+0.65,z,8.2,0.15,9.2); const faceX=side*9.06; box(buildings,"#9d4d54",faceX,1.55,z,0.16,3.1,1.65); box(buildings,"#efbf66",faceX-side*0.1,1.6,z,0.12,2.8,1.35); box(buildings,"#a63e49",faceX-side*0.18,1.4,z,0.13,2.45,1.04); for (const dz of [-2.8,2.8]) { box(buildings,"#7f526e",faceX,3.65,z+dz,0.18,1.5,1.45); box(buildings,"#b8e5dd",faceX-side*0.12,3.65,z+dz,0.11,1.2,1.15); box(buildings,"#e6a35f",faceX-side*0.2,3.65,z+dz,0.08,1.3,0.08); box(buildings,"#e6a35f",faceX-side*0.2,3.65,z+dz,0.08,0.08,1.25); } box(buildings,"#d35d50",faceX-side*0.4,2.9,z,1.0,0.18,2.4); } } api.add(buildings,{id:"festival-buildings",describe:"colorful shopfronts lining both sides of the parade"}); const decorations = root(); function lantern(x,y,z,scale) { line(decorations,"#a14c55",[x,y+0.48*scale,z],[x,y+0.88*scale,z],0.025); ball(decorations,"#df3e39",x,y,z,0.42*scale,0.48*scale,0.38*scale); cyl(decorations,"#f2c65b",x,y+0.43*scale,z,0.18*scale,0.18*scale,0.1*scale); cyl(decorations,"#f2c65b",x,y-0.43*scale,z,0.18*scale,0.18*scale,0.1*scale); line(decorations,"#e4b44c",[x,y-0.48*scale,z],[x,y-0.83*scale,z],0.035); for (const dx of [-0.08,0,0.08]) line(decorations,"#f4c55a",[x,y-0.8*scale,z],[x+dx*scale,y-1.0*scale,z],0.025); } for (let z=5;z<=75;z+=10) { line(decorations,"#754352",[-9,7.9,z],[0,7.25,z],0.035); line(decorations,"#754352",[0,7.25,z],[9,7.9,z],0.035); for (let x=-7.5;x<=7.5;x+=3) lantern(x,6.75+0.06*Math.abs(x),z,0.9); } for (const side of [-1,1]) { for (let z=2;z<80;z+=10.2) { lantern(side*9.7,4.7,z+3.6,0.65); } } api.add(decorations,{id:"red-lanterns",describe:"red and gold lanterns strung across the street",solid:false}); const crackers = root(); for (const side of [-1,1]) { const x=side*6.8,z=12+(side>0?14:0); line(crackers,"#d3a655",[x,5.8,z],[x,2.3,z],0.05); for (let i=0;i<10;i++) { const y=5.4-i*0.3, dx=(i%2?0.2:-0.2); const c=cyl(crackers,"#e43e35",x+dx,y,z,0.085,0.085,0.42); c.rotation.z=i%2?0.3:-0.3; cyl(crackers,"#f6c55b",x+dx,y+0.19,z,0.088,0.088,0.045); } const spark = ball(crackers,"#ffd36a",x,2.4,z,0.16,0.16,0.16); spark.name=side<0?"cracker-left":"cracker-right"; } api.add(crackers,{id:"firecrackers",describe:"hanging red firecracker strings popping with sparks",solid:false}); for (const part of ["cracker-left","cracker-right"]) { api.particles({type:"particles",kind:"sparkles",attach:{object:"firecrackers",part,offset:[0,0,0]},area:[0.5,0.5],rate:14,velocity:[0,2,0],jitter:2.4,gravity:5,life:0.7,size:0.11,colors:["#ffd568","#fff1ae","#ef7042"],duration:0}); } const dragon = root(); const head = api.build({parts:[ {name:"head",shape:"roundbox",size:[2.5,1.6,2.6],pos:[0,0,0],color:"#e34639"}, {name:"snout",shape:"roundbox",size:[2.0,0.75,1.4],pos:[0,-0.38,1.55],color:"#f09345"}, {name:"jaw",shape:"roundbox",size:[1.85,0.27,1.45],pos:[0,-0.88,1.45],color:"#d23d3c"}, {name:"nose",shape:"sphere",size:[1.4,0.45,0.55],pos:[0,-0.1,2.2],color:"#c73038"}, {name:"eyeL",shape:"eye",size:[0.72,0.75,0.48],pos:[0.8,0.47,0.94],color:"#ffffff"}, {name:"eyeR",shape:"eye",size:[0.65,0.7,0.48],pos:[-0.8,0.5,0.94],color:"#ffffff"}, {name:"browL",shape:"capsule",size:[0.9,0.2,0.25],pos:[0.8,0.92,0.94],rot:[0,0,-15],color:"#f5c34c"}, {name:"browR",shape:"capsule",size:[0.9,0.2,0.25],pos:[-0.8,0.92,0.94],rot:[0,0,15],color:"#f5c34c"}, {name:"hornL",shape:"cone",size:[0.38,1.25,0.38],pos:[0.8,1.12,-0.55],rot:[0,0,-20],color:"#f6ce6c"}, {name:"hornR",shape:"cone",size:[0.38,1.25,0.38],pos:[-0.8,1.12,-0.55],rot:[0,0,20],color:"#f6ce6c"}, {name:"mane",shape:"sphere",size:[2.9,1.9,0.65],pos:[0,0,-1.0],color:"#f8bd47"}, {name:"whiskerL",shape:"tube",points:[[0.8,-0.28,1.7],[1.5,-0.15,2.0],[2.25,0.1,1.7]],radius:0.07,color:"#f7d47a"}, {name:"whiskerR",shape:"tube",points:[[-0.8,-0.28,1.7],[-1.5,-0.15,2.0],[-2.25,0.1,1.7]],radius:0.07,color:"#f7d47a"}, {name:"beard",shape:"cone",size:[0.55,1.1,0.5],pos:[0,-1.1,1.45],rot:[0,0,180],color:"#f4bb48"} ]}); head.rotation.y=Math.PI; dragon.add(head); const segments=[], poles=[]; for (let i=0;i<15;i++) { const s=new T.Group(); const taper=1-i*0.027; ball(s,i%2?"#ed613b":"#e74336",0,0,0,1.1*taper,0.78*taper,1.0); ball(s,"#f5bc49",0,-0.48*taper,0,0.78*taper,0.27*taper,0.76); for (const side of [-1,1]) { ball(s,"#f7bd4d",side*0.83*taper,0.17,0,0.13,0.17,0.46); ball(s,"#f7bd4d",side*0.65*taper,0.48,0.08,0.12,0.12,0.35); } const fin=new T.Mesh(new T.ConeGeometry(0.26*taper,0.65*taper,5),mat("#f8c65a")); fin.position.set(0,0.84*taper,0); fin.rotation.z=0.22; s.add(fin); dragon.add(s); segments.push(s); if (i%3===1) { const p=cyl(dragon,"#d8a750",0,1.5,0,0.055,0.055,3); poles.push({mesh:p,index:i}); } } const tail=api.build({parts:[ {name:"tail",shape:"wing",size:[2.5,1.6,0.18],pos:[0,0,0],rot:[0,0,95],color:"#f6b943"}, {name:"tail2",shape:"wing",size:[2.0,1.15,0.18],pos:[0,0,0],rot:[0,0,-95],color:"#e65b3d"} ]}); dragon.add(tail); api.add(dragon,{id:"dancing-dragon",describe:"a long red and gold dragon dancing through the parade",solid:false}); function personRecipe(i, drummer) { const clothes=["#ba4b60","#398f91","#e7a344","#8c69b1","#e16c52","#58aaa0"]; return {parts:[ {name:"body",shape:"roundbox",size:[0.67,0.82,0.38],pos:[0,1.08,0],color:clothes[i%clothes.length]}, {name:"head",shape:"sphere",size:[0.62,0.67,0.57],pos:[0,1.76,0],color:["#f2c9a0","#b97c59","#e2a77f","#d59470"][i%4]}, {name:"hair",shape:"sphere",size:[0.64,0.3,0.58],pos:[0,2.02,-0.03],color:["#573447","#734456","#3a2230"][i%3]}, {name:"eyeL",shape:"eye",size:[0.16,0.2,0.12],pos:[0.16,1.8,0.265],color:"#ffffff"}, {name:"eyeR",shape:"eye",size:[0.16,0.2,0.12],pos:[-0.16,1.8,0.265],color:"#ffffff"}, {name:"legL",shape:"capsule",size:[0.2,0.67,0.21],pos:[0.18,0.38,0],color:"#704e78"}, {name:"legR",shape:"capsule",size:[0.2,0.67,0.21],pos:[-0.18,0.38,0],color:"#704e78"}, {name:"shoeL",shape:"roundbox",size:[0.25,0.16,0.36],pos:[0.18,0.08,0.07],color:"#714454"}, {name:"shoeR",shape:"roundbox",size:[0.25,0.16,0.36],pos:[-0.18,0.08,0.07],color:"#714454"}, {name:"armL",shape:"capsule",size:[0.2,0.65,0.2],pos:[0.41,1.33,0],anchor:"top",rot:[drummer?-55:0,0,drummer?-25:-25],color:clothes[i%clothes.length]}, {name:"armR",shape:"capsule",size:[0.2,0.65,0.2],pos:[-0.41,1.33,0],anchor:"top",rot:[drummer?-55:0,0,drummer?25:25],color:clothes[i%clothes.length]} ]}; } const crowd = root(), wavers=[]; let n=0; for (const side of [-1,1]) { for (let i=0;i<12;i++) { const p=api.build(personRecipe(n,false)); p.position.set(side*(7.45+(i%2)*0.48),0.27,5+i*5.2); p.rotation.y=side<0?Math.PI/2:-Math.PI/2; const arm=p.getObjectByName(i%2?"armL":"armR"); if (arm) wavers.push({arm,phase:i*0.7}); crowd.add(p); n++; } } api.add(crowd,{id:"parade-crowd",describe:"spectators cheering and waving from both sidewalks",solid:false}); const band=root(), beaters=[]; for (let i=0;i<4;i++) { const side=i%2?-1:1, z=12+Math.floor(i/2)*6; const performer=new T.Group(); performer.position.set(side*4.6,0,z); performer.rotation.y=side>0?-Math.PI/2:Math.PI/2; const p=api.build(personRecipe(i+2,true)); performer.add(p); const drum=cyl(performer,"#cb3e3b",0,0.95,0.72,0.52,0.52,0.72); cyl(performer,"#f8d588",0,1.33,0.72,0.54,0.54,0.1); cyl(performer,"#e4ab4d",0,0.57,0.72,0.54,0.54,0.09); for(let j=0;j<10;j++) { const a=j*Math.PI*2/10; ball(performer,"#f6ca65",Math.cos(a)*0.5,1.19,0.72+Math.sin(a)*0.5,0.045,0.045,0.045); } const sticks=[]; for (const x of [-0.28,0.28]) { const stick=line(performer,"#f5d395",[x,1.65,0.2],[x,1.37,0.72],0.035); sticks.push(stick); } beaters.push({left:p.getObjectByName("armL"),right:p.getObjectByName("armR"),sticks,phase:i*0.8}); band.add(performer); } api.add(band,{id:"parade-drummers",describe:"four drummers beating red and gold drums",solid:false}); api.onFrame((dt,t)=>{ const travel=55-((t*0.85+30)%46); head.position.set(Math.sin(t*1.8)*0.65,3.9+Math.sin(t*3)*0.35,travel); head.rotation.z=Math.sin(t*2)*0.12; for(let i=0;i