const T = api.THREE; const player = api.player; 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 origin = new T.Vector3(player.x, 0, player.z); function worldPos(x, z) { return new T.Vector3(x, 0, z).applyAxisAngle(new T.Vector3(0, 1, 0), angle).add(origin); } function material(c, glow = false) { return api.toon(c, {glow}); } const mats = { road: material("#25243f"), sidewalk: material("#4b3e59"), curb: material("#77647c"), ink: material("#3a2230"), pink: material("#ff68b4", true), cyan: material("#62f4ef", true), gold: material("#ffd075", true), red: material("#ec535b"), lantern: material("#ff9870", true), glass: material("#395775"), puddle: material("#405b78"), roof: material("#763b58"), cream: material("#f4d4a7"), metal: material("#79678b") }; const boxGeo = new T.BoxGeometry(1, 1, 1); const sphereGeo = new T.SphereGeometry(1, 14, 10); const cylGeo = new T.CylinderGeometry(1, 1, 1, 16); function box(parent, name, x, y, z, w, h, d, mat) { const m = new T.Mesh(boxGeo, mat); m.name = name; m.position.set(x, y, z); m.scale.set(w, h, d); parent.add(m); return m; } function sphere(parent, name, x, y, z, w, h, d, mat) { const m = new T.Mesh(sphereGeo, mat); m.name = name; m.position.set(x, y, z); m.scale.set(w / 2, h / 2, d / 2); parent.add(m); return m; } function cylinder(parent, name, x, y, z, radius, height, mat) { const m = new T.Mesh(cylGeo, mat); m.name = name; m.position.set(x, y, z); m.scale.set(radius, height, radius); parent.add(m); return m; } function put(group, id, describe, x = 0, z = 0, solid = false) { const p = worldPos(x, z); group.position.set(p.x, api.groundHeight(p.x, p.z), p.z); group.rotation.y = angle; api.add(group, {id, describe, solid}); return group; } api.world({time: "night", sky: "#171b38", haze: "#36324e", shadow: "#625078"}); const ground = new T.Mesh(new T.CircleGeometry(600, 96), material("#302c47")); ground.rotation.x = -Math.PI / 2; ground.position.y = 0.02; api.add(ground, {id: "night-ground", describe: "dark ground beneath a rainy night street", solid: false}); const street = new T.Group(); box(street, "wet-road", 0, 0.045, 8, 8.8, 0.06, 86, mats.road); for (const side of [-1, 1]) { box(street, "sidewalk", side * 5.25, 0.12, 8, 1.9, 0.2, 86, mats.sidewalk); box(street, "curb", side * 4.35, 0.16, 8, 0.12, 0.22, 86, mats.curb); for (let z = -32; z <= 50; z += 2.5) { box(street, "paving-joint", side * 5.25, 0.228, z, 1.8, 0.012, 0.035, mats.ink); } } for (let z = -30; z < 50; z += 8) { box(street, "lane-marking", 0, 0.082, z, 0.11, 0.012, 2.4, mats.cream); } const puddles = [ [-2.1,-5,1.6,0.75], [1.5,2,1.8,0.7], [-2,10,2.2,0.9], [2.4,15,1.5,0.65], [-0.9,22,2.1,0.75], [2.2,-13,1.9,0.7], [-2.7,29,1.4,0.55], [1,34,1.8,0.6], [-3,1,1,0.5] ]; puddles.forEach((p, i) => { sphere(street, "puddle", p[0], 0.09, p[1], p[2] * 2, 0.025, p[3] * 2, mats.puddle); for (let j = 0; j < 4; j++) { const strip = box(street, "neon-reflection", p[0] + (j - 1.5) * 0.27, 0.108, p[1] + (j % 2 ? 0.12 : -0.12), 0.055, 0.012, p[3] * (0.65 + j * 0.12), [mats.pink, mats.cyan, mats.gold][(i + j) % 3]); strip.rotation.y = (j - 1) * 0.08; } }); put(street, "wet-side-street", "a wet road with pavements, puddles and neon reflections"); const wallColors = ["#59435e", "#48435f", "#634760", "#3b465f"]; for (const side of [-1, 1]) { for (let i = 0; i < 8; i++) { const z = -22 + i * 9; const height = 7 + (i % 3) * 1.4; const g = new T.Group(); const wall = material(wallColors[(i + (side > 0 ? 2 : 0)) % wallColors.length]); box(g, "building", 0, height / 2, 0, 4.4, height, 8.5, wall); box(g, "roofline", 0, height + 0.12, 0, 4.65, 0.24, 8.7, mats.ink); const face = -side * 2.22; for (let floor = 0; floor < 2; floor++) { for (let k = -1; k <= 1; k++) { box(g, "window-frame", face, 3.3 + floor * 2.05, k * 2.3, 0.09, 1.4, 1.5, mats.ink); box(g, "window", face - side * 0.06, 3.3 + floor * 2.05, k * 2.3, 0.08, 1.17, 1.25, (i + floor + k) % 3 === 0 ? mats.gold : mats.glass); box(g, "window-divider", face - side * 0.11, 3.3 + floor * 2.05, k * 2.3, 0.05, 1.2, 0.06, mats.ink); } } box(g, "shopfront", face - side * 0.04, 1.18, 0, 0.12, 2.15, 5.3, mats.ink); box(g, "shop-window", face - side * 0.12, 1.25, -1.3, 0.08, 1.65, 1.65, mats.glass); box(g, "shop-door", face - side * 0.12, 1.05, 1, 0.08, 2, 1.1, material("#805771")); box(g, "door-glass", face - side * 0.18, 1.45, 1, 0.04, 0.75, 0.75, mats.glass); sphere(g, "door-handle", face - side * 0.24, 0.96, 0.68, 0.1, 0.1, 0.1, mats.gold); const neon = [mats.pink, mats.cyan, mats.gold][i % 3]; box(g, "neon-sign-backing", face - side * 0.16, 2.65, -0.2, 0.15, 0.65, 3.7, mats.ink); for (const dz of [-1.82, 1.42]) { box(g, "neon-border", face - side * 0.26, 2.65, dz, 0.09, 0.57, 0.06, neon); } for (const y of [2.38, 2.92]) { box(g, "neon-border", face - side * 0.26, y, -0.2, 0.09, 0.06, 3.25, neon); } for (let k = -2; k <= 2; k++) { const b = box(g, "neon-pattern", face - side * 0.27, 2.65, k * 0.51 - 0.2, 0.1, 0.32, 0.08, k % 2 ? mats.gold : neon); b.rotation.x = k % 2 ? 0.7 : -0.5; } put(g, "street-building-" + side + "-" + i, "a narrow night-time shop building with glowing neon", side * 8.35, z, true); } } const lanterns = new T.Group(); for (const z of [1, 13, 25]) { box(lanterns, "lantern-cord", 0, 4.9, z, 12, 0.045, 0.045, mats.ink); for (let x = -4.8; x <= 4.8; x += 1.6) { box(lanterns, "lantern-string", x, 4.65, z, 0.035, 0.5, 0.035, mats.ink); sphere(lanterns, "paper-lantern", x, 4.25, z, 0.65, 0.86, 0.65, mats.lantern); cylinder(lanterns, "lantern-top", x, 4.65, z, 0.2, 0.08, mats.ink); cylinder(lanterns, "lantern-bottom", x, 3.85, z, 0.2, 0.08, mats.ink); for (const offset of [-0.16, 0.16]) { box(lanterns, "paper-rib", x + offset, 4.25, z + 0.3, 0.025, 0.62, 0.025, mats.red); } } } put(lanterns, "paper-lanterns", "strings of warm glowing paper lanterns over the street"); const stand = new T.Group(); box(stand, "stall-platform", 0, 0.17, 0, 2.6, 0.28, 3.6, mats.roof); for (const x of [-1.12, 1.12]) for (const z of [-1.57, 1.57]) { box(stand, "post", x, 1.48, z, 0.16, 2.7, 0.16, mats.cream); } box(stand, "back-wall", -1.17, 1.35, 0, 0.18, 2.35, 3.5, mats.roof); box(stand, "counter", 0.82, 1.02, 0, 0.75, 0.2, 3.4, mats.cream); box(stand, "counter-front", 1.1, 0.55, 0, 0.18, 1, 3.4, mats.red); box(stand, "roof", 0, 2.92, 0, 3.05, 0.22, 4, mats.roof); box(stand, "awning", 0.8, 2.65, 0, 1.15, 0.16, 3.85, mats.red); for (let z = -1.55; z <= 1.55; z += 0.62) { box(stand, "awning-stripe", 1.02, 2.73, z, 0.65, 0.04, 0.2, mats.cream); } cylinder(stand, "pot", 0.25, 1.27, -0.9, 0.36, 0.42, mats.metal); cylinder(stand, "pot-rim", 0.25, 1.5, -0.9, 0.39, 0.07, mats.ink); for (const z of [0.15, 0.95]) { cylinder(stand, "ramen-bowl", 0.83, 1.21, z, 0.22, 0.18, mats.cream); cylinder(stand, "broth", 0.83, 1.31, z, 0.19, 0.025, mats.gold); box(stand, "chopsticks", 0.85, 1.36, z, 0.48, 0.025, 0.025, mats.roof).rotation.y = 0.4; } sphere(stand, "stall-lantern", 1.15, 2.45, -1.65, 0.5, 0.62, 0.5, mats.lantern); put(stand, "ramen-stand", "a tiny red ramen stand with a steaming pot and bowls", -5, 8, true); const vendorRecipe = { parts: [ {name:"body", shape:"capsule", size:[0.65,0.85,0.4], pos:[0,1.05,0], color:"#f3d6a4"}, {name:"apron", shape:"box", size:[0.54,0.52,0.06], pos:[0,0.91,0.23], color:"#e96764"}, {name:"head", shape:"sphere", size:[0.55,0.6,0.52], pos:[0,1.71,0], color:"#dca47c"}, {name:"eyeL", shape:"eye", size:[0.18,0.2,0.12], pos:[0.13,1.76,0.24], color:"#ffffff"}, {name:"eyeR", shape:"eye", size:[0.16,0.18,0.12], pos:[-0.12,1.76,0.24], color:"#ffffff"}, {name:"headband", shape:"box", size:[0.57,0.13,0.49], pos:[0,1.94,0], color:"#f4e3bc"}, {name:"armL", shape:"capsule", size:[0.15,0.62,0.15], pos:[0.39,1.15,0], rot:[-25,0,-20], color:"#dca47c"}, {name:"armR", shape:"capsule", size:[0.15,0.62,0.15], pos:[-0.39,1.15,0], rot:[-25,0,20], color:"#dca47c"} ] }; const vendor = api.build(vendorRecipe); const vp = worldPos(-5.5, 8); vendor.position.set(vp.x, 0.3, vp.z); vendor.rotation.y = angle + Math.PI / 2; api.add(vendor, {id:"ramen-vendor", describe:"a ramen vendor tending the little stand", solid:false}); api.particles({ type:"particles", kind:"smoke", attach:{object:"ramen-stand", part:"pot", offset:[0,0.3,0]}, rate:9, velocity:[0,0.9,0], jitter:0.22, gravity:-0.12, life:2.5, size:0.24, colors:["#ded3ee","#cbb8df","#f5e4de"], duration:0 }); for (let i = 0; i < 2; i++) { const g = new T.Group(); const body = i ? material("#dc647f") : material("#60b6c1"); box(g, "machine-body", 0, 1.05, 0, 0.9, 2.1, 0.9, body); box(g, "machine-top", 0, 2.12, 0, 1, 0.14, 1, mats.ink); box(g, "illuminated-display", 0, 1.43, 0.46, 0.72, 0.95, 0.06, mats.gold); for (let r = 0; r < 2; r++) for (let c = 0; c < 4; c++) { cylinder(g, "drink-can", -0.25 + c * 0.16, 1.2 + r * 0.34, 0.51, 0.05, 0.2, [mats.red, mats.cyan, mats.pink, mats.metal][(c + r + i) % 4]); } box(g, "delivery-slot", 0, 0.42, 0.47, 0.55, 0.23, 0.06, mats.ink); sphere(g, "selection-button", 0.34, 0.83, 0.49, 0.1, 0.1, 0.04, mats.cyan); const p = worldPos(5.73, 3 + i * 1.05); g.position.set(p.x, 0.24, p.z); g.rotation.y = angle - Math.PI / 2; api.add(g, {id:"vending-machine-" + i, describe:"a glowing vending machine stocked with little drinks", solid:true}); } const coats = ["#b968a3","#e49752","#63adad","#9d87c9","#d65e72"]; const umbrellas = ["#e97594","#6dd1d1","#dbaa64","#b593e9","#e76e5b"]; for (let i = 0; i < 5; i++) { const r = { parts:[ {name:"body",shape:"capsule",size:[0.62,0.95,0.38],pos:[0,1.05,0],color:coats[i]}, {name:"head",shape:"sphere",size:[0.52,0.58,0.48],pos:[0,1.75,0],color:i%2?"#c89575":"#f2c9a0"}, {name:"eyeL",shape:"eye",size:[0.18,0.2,0.12],pos:[0.12,1.8,0.22],color:"#ffffff"}, {name:"eyeR",shape:"eye",size:[0.16,0.18,0.12],pos:[-0.11,1.8,0.22],color:"#ffffff"}, {name:"hair",shape:"sphere",size:[0.55,0.24,0.49],pos:[0,1.99,-0.04],color:"#56384b"}, {name:"legL",shape:"capsule",size:[0.19,0.65,0.2],pos:[0.17,0.67,0],anchor:"top",color:"#564862"}, {name:"legR",shape:"capsule",size:[0.19,0.65,0.2],pos:[-0.17,0.67,0],anchor:"top",color:"#564862"}, {name:"armL",shape:"capsule",size:[0.17,0.63,0.17],pos:[0.38,1.15,0],rot:[-30,0,-18],color:coats[i]}, {name:"armR",shape:"capsule",size:[0.17,0.63,0.17],pos:[-0.38,1.15,0],rot:[0,0,12],color:coats[i]}, {name:"umbrella-pole",shape:"cylinder",size:[0.055,1.55,0.055],pos:[0.43,2.05,0.05],color:"#e9d5b9"}, {name:"umbrella",shape:"cone",size:[1.75,0.52,1.75],pos:[0.43,2.76,0.05],color:umbrellas[i]}, {name:"umbrella-edge",shape:"cylinder",size:[1.75,0.07,1.75],pos:[0.43,2.52,0.05],color:umbrellas[i]}, {name:"umbrella-tip",shape:"sphere",size:[0.1,0.13,0.1],pos:[0.43,3.05,0.05],color:"#f7dfb3"} ] }; const person = api.build(r); const side = i % 2 ? 1 : -1; const travel = i % 2 ? -1 : 1; const x = side * (3.15 + (i % 3) * 0.22); const initialZ = -10 + i * 7; const p = worldPos(x, initialZ); person.position.set(p.x, 0.1, p.z); person.rotation.y = angle + (travel < 0 ? Math.PI : 0); api.add(person, {id:"umbrella-walker-" + i, describe:"a person walking under a colorful umbrella", solid:false}); const legL = person.getObjectByName("legL"); const legR = person.getObjectByName("legR"); api.onFrame((dt, t) => { const z = -19 + (((initialZ + 19 + travel * t * 0.8) % 52) + 52) % 52; const wp = worldPos(x, z); person.position.set(wp.x, 0.1 + Math.abs(Math.sin(t * 4 + i)) * 0.035, wp.z); if (legL) legL.rotation.x = Math.sin(t * 4 + i) * 0.48; if (legR) legR.rotation.x = -Math.sin(t * 4 + i) * 0.48; }); } api.particles({ type:"particles", kind:"rain", place:{where:"here",height:22}, area:[65,65], rate:400, velocity:[-0.6,-13,0.4], jitter:0.5, gravity:5, life:2, size:0.09, colors:["#b9d5ef","#a8c9e7"], duration:0, splash:true }); api.say = "I made a rainy neon side street, with a steaming ramen stand, glowing lanterns and umbrella-carrying pedestrians."; api.suggest = [ "Add a cat sheltering beside the ramen stand", "Put a little rooftop garden above the shops", "Make a tram roll slowly down the street", "Add distant thunder and lightning" ];