const T = api.THREE; const ink = "#3a2230"; const mat = (c, glow = false) => api.toon(c, glow ? { glow: true } : {}); const colors = { stone: mat("#eacb9d"), pale: mat("#f5dfbd"), cream: mat("#fff1d3"), roof: mat("#8a6c9d"), dark: mat("#5b4052"), street: mat("#bc9eaa"), sidewalk: mat("#dfc6ac"), white: mat("#fff2dd"), red: mat("#d84a46"), green: mat("#4a986c"), leaf: mat("#48946a"), pink: mat("#ef83a9"), gold: mat("#edb958"), glass: mat("#91cbd1"), tower: mat("#a16e70"), towerLight: mat("#c48b80"), wood: mat("#a86749") }; const forward = new T.Vector3(); api.camera.getWorldDirection(forward); forward.y = 0; if (forward.lengthSq() < 0.0001) forward.set(0, 0, -1); forward.normalize(); const angle = Math.atan2(forward.x, forward.z); const origin = new T.Vector3(api.player.x, 0, api.player.z); function worldPos(x, z) { return new T.Vector3( origin.x + Math.cos(angle) * x + Math.sin(angle) * z, 0, origin.z - Math.sin(angle) * x + Math.cos(angle) * z ); } function addAt(group, x, z, id, describe, 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; } function box(g, w, h, d, x, y, z, material, rz = 0) { const m = new T.Mesh(new T.BoxGeometry(w, h, d), material); m.position.set(x, y, z); m.rotation.z = rz; g.add(m); return m; } function ball(g, r, x, y, z, material, sx = 1, sy = 1, sz = 1) { const m = new T.Mesh(new T.SphereGeometry(r, 12, 8), material); m.position.set(x, y, z); m.scale.set(sx, sy, sz); g.add(m); return m; } function rod(g, a, b, radius, material, segments = 8) { const v1 = new T.Vector3(...a), v2 = new T.Vector3(...b); const delta = v2.clone().sub(v1); const m = new T.Mesh(new T.CylinderGeometry(radius, radius, delta.length(), segments), material); m.position.copy(v1).add(v2).multiplyScalar(0.5); m.quaternion.setFromUnitVectors(new T.Vector3(0, 1, 0), delta.normalize()); g.add(m); return m; } function disc(g, r, h, x, y, z, material, segments = 20) { const m = new T.Mesh(new T.CylinderGeometry(r, r, h, segments), material); m.position.set(x, y, z); g.add(m); return m; } api.world({ sky: "#a9d8ea", haze: "#d6e9e3", shadow: "#8d76a5" }); const ground = new T.Mesh(new T.CircleGeometry(600, 96), mat("#dfceaf")); ground.rotation.x = -Math.PI / 2; ground.position.set(api.player.x, 0.02, api.player.z); api.add(ground, { id: "paris-ground", describe: "warm pale stone surrounding the Paris street", solid: false }); const paving = new T.Group(); box(paving, 12, 0.06, 91, 0, 0.06, 42, colors.street); box(paving, 4.3, 0.16, 87, -8.15, 0.1, 41, colors.sidewalk); box(paving, 4.3, 0.16, 87, 8.15, 0.1, 41, colors.sidewalk); for (let z = 0; z < 85; z += 4) { box(paving, 0.13, 0.025, 1.7, 0, 0.102, z, colors.cream); for (const x of [-8.15, 8.15]) { box(paving, 4.2, 0.025, 0.035, x, 0.19, z, colors.roof); } } addAt(paving, 0, 0, "paris-street", "a long Parisian street with broad stone sidewalks"); const buildingColors = ["#efd1ae", "#f4ddbd", "#e8c1a7", "#dfc3c5", "#eed3bb"]; for (let side of [-1, 1]) { for (let i = 0; i < 5; i++) { const b = new T.Group(); const wall = mat(buildingColors[(i + (side === 1 ? 2 : 0)) % buildingColors.length]); const face = -side; box(b, 7.8, 9.6, 12.5, 0, 4.8, 0, wall); box(b, 8.1, 0.3, 12.8, 0, 9.55, 0, colors.pale); box(b, 8.3, 1.65, 12.9, 0, 10.45, 0, colors.roof); box(b, 8.4, 0.2, 13, 0, 11.3, 0, colors.dark); for (let zz of [-3.8, 0, 3.8]) { for (let yy of [4.25, 7.1]) { box(b, 0.13, 2.05, 1.55, face * 3.94, yy, zz, colors.cream); box(b, 0.16, 1.68, 1.22, face * 4.02, yy, zz, colors.glass); box(b, 0.19, 1.72, 0.07, face * 4.12, yy, zz, colors.cream); box(b, 0.19, 0.07, 1.24, face * 4.12, yy, zz, colors.cream); box(b, 0.38, 0.14, 1.85, face * 4.05, yy - 1.08, zz, colors.pale); if (yy === 4.25) { rod(b, [face * 4.32, yy - 0.8, zz - 0.75], [face * 4.32, yy - 0.8, zz + 0.75], 0.045, colors.dark); for (let dz of [-0.55, 0, 0.55]) rod(b, [face * 4.32, yy - 1.03, zz + dz], [face * 4.32, yy - 0.48, zz + dz], 0.035, colors.dark); } } } box(b, 0.17, 2.55, 1.5, face * 3.98, 1.32, 0, colors.dark); box(b, 0.19, 2.26, 1.22, face * 4.08, 1.35, 0, i % 2 ? colors.green : colors.wood); ball(b, 0.065, face * 4.2, 1.2, 0.4, colors.gold); for (let zz of [-3.8, 3.8]) { box(b, 0.16, 2.2, 2.35, face * 4.01, 1.65, zz, colors.dark); box(b, 0.18, 1.86, 2.02, face * 4.12, 1.7, zz, colors.glass); box(b, 0.2, 0.09, 2.03, face * 4.2, 1.65, zz, colors.cream); } if (i === 0 && side === -1) { for (let s = 0; s < 18; s++) { const z = -5.85 + s * 0.65; const strip = box(b, 2.7, 0.12, 0.65, 5.15, 3.05, z, s % 2 ? colors.cream : colors.red, -0.16); strip.name = "striped-awning"; box(b, 0.12, 0.31, 0.64, 6.48, 2.82, z, s % 2 ? colors.cream : colors.red); } } else if (i % 2 === 1) { for (let s = 0; s < 9; s++) { box(b, 1.6, 0.1, 0.55, face * 4.72, 2.98, -2.2 + s * 0.55, s % 2 ? colors.cream : colors.green, face * 0.15); } } addAt(b, side * 13.5, 16 + i * 13.2, `paris-building-${side < 0 ? "left" : "right"}-${i + 1}`, "a cream Parisian building with tall windows and a mansard roof", true); } } const cafe = new T.Group(); for (let z of [12, 18, 24]) { disc(cafe, 0.69, 0.12, -7.35, 0.85, z, colors.cream); rod(cafe, [-7.35, 0.15, z], [-7.35, 0.8, z], 0.075, colors.dark); rod(cafe, [-7.7, 0.16, z], [-7.0, 0.16, z], 0.055, colors.dark); disc(cafe, 0.18, 0.08, -7.35, 0.94, z, colors.red); ball(cafe, 0.1, -7.35, 1.06, z, colors.gold); for (let dz of [-1.12, 1.12]) { const cz = z + dz; disc(cafe, 0.37, 0.1, -7.35, 0.48, cz, colors.green); for (let dx of [-0.22, 0.22]) { rod(cafe, [-7.35 + dx, 0.12, cz - 0.2], [-7.35 + dx, 0.48, cz - 0.2], 0.045, colors.dark); rod(cafe, [-7.35 + dx, 0.12, cz + 0.2], [-7.35 + dx, 0.48, cz + 0.2], 0.045, colors.dark); } rod(cafe, [-7.65, 0.5, cz + Math.sign(dz) * 0.27], [-7.65, 1.05, cz + Math.sign(dz) * 0.27], 0.045, colors.dark); rod(cafe, [-7.65, 1.02, cz + Math.sign(dz) * 0.27], [-7.05, 1.02, cz + Math.sign(dz) * 0.27], 0.045, colors.dark); } } addAt(cafe, 0, 0, "sidewalk-cafe", "a sidewalk cafe with little bistro tables and chairs", true); const cart = new T.Group(); box(cart, 1.35, 0.35, 1.8, 0, 0.8, 0, colors.wood); box(cart, 1.4, 0.16, 1.9, 0, 1.05, 0, colors.green); for (let z of [-0.65, 0.65]) { for (let x of [-0.72, 0.72]) { const wheel = new T.Mesh(new T.TorusGeometry(0.31, 0.065, 8, 16), colors.dark); wheel.rotation.y = Math.PI / 2; wheel.position.set(x, 0.35, z); cart.add(wheel); rod(cart, [x, 0.07, z], [x, 0.63, z], 0.035, colors.gold); rod(cart, [x, 0.35, z - 0.28], [x, 0.35, z + 0.28], 0.035, colors.gold); } } rod(cart, [0, 0.65, -0.85], [0, 0.45, -1.5], 0.08, colors.wood); const flowerMats = [colors.pink, colors.red, colors.gold, colors.cream]; for (let i = 0; i < 12; i++) { const x = -0.48 + (i % 3) * 0.48; const z = -0.65 + Math.floor(i / 3) * 0.42; const y = 1.32 + (i % 3) * 0.12; rod(cart, [x, 1.04, z], [x + 0.05, y, z], 0.035, colors.leaf); ball(cart, 0.13, x + 0.05, y, z, flowerMats[i % 4]); ball(cart, 0.055, x + 0.05, y + 0.1, z + 0.07, colors.gold); } addAt(cart, 7.5, 21, "flower-cart", "a wooden flower cart piled high with bright blooms", true); const musician = api.build({ parts: [ { name: "body", shape: "roundbox", size: [0.72, 0.9, 0.42], pos: [0, 1.08, 0], color: "#416e83" }, { name: "head", shape: "sphere", size: [0.52, 0.57, 0.5], pos: [0, 1.77, 0], color: "#f2c9a0" }, { name: "nose", shape: "sphere", size: [0.17, 0.16, 0.2], pos: [0, 1.72, 0.26], color: "#e7a989" }, { name: "eyeL", shape: "eye", size: [0.18, 0.2, 0.12], pos: [0.13, 1.83, 0.23], color: "#ffffff" }, { name: "eyeR", shape: "eye", size: [0.2, 0.22, 0.12], pos: [-0.13, 1.83, 0.23], color: "#ffffff" }, { name: "beret", shape: "sphere", size: [0.65, 0.18, 0.58], pos: [0, 2.04, 0], color: "#5b4052" }, { name: "beret-tip", shape: "sphere", size: [0.1, 0.09, 0.1], pos: [0, 2.15, 0], color: "#5b4052" }, { name: "legL", shape: "capsule", size: [0.23, 0.65, 0.23], pos: [0.2, 0.39, 0], color: "#5b4052" }, { name: "legR", shape: "capsule", size: [0.23, 0.65, 0.23], pos: [-0.2, 0.39, 0], color: "#5b4052" }, { name: "shoeL", shape: "roundbox", size: [0.27, 0.14, 0.4], pos: [0.2, 0.09, 0.08], color: "#694851" }, { name: "shoeR", shape: "roundbox", size: [0.27, 0.14, 0.4], pos: [-0.2, 0.09, 0.08], color: "#694851" }, { name: "armL", shape: "capsule", size: [0.2, 0.66, 0.2], pos: [0.48, 1.12, 0.12], rot: [0, 0, 25], color: "#416e83" }, { name: "armR", shape: "capsule", size: [0.2, 0.66, 0.2], pos: [-0.48, 1.12, 0.12], rot: [0, 0, -25], color: "#416e83" }, { name: "accordion", shape: "roundbox", size: [0.76, 0.48, 0.25], pos: [0, 1.14, 0.37], color: "#d84a46" }, { name: "bellows", shape: "box", size: [0.43, 0.43, 0.27], pos: [0, 1.14, 0.39], color: "#f4d6b5" }, { name: "fold1", shape: "box", size: [0.035, 0.44, 0.03], pos: [-0.14, 1.14, 0.54], color: "#684657" }, { name: "fold2", shape: "box", size: [0.035, 0.44, 0.03], pos: [-0.05, 1.14, 0.54], color: "#684657" }, { name: "fold3", shape: "box", size: [0.035, 0.44, 0.03], pos: [0.05, 1.14, 0.54], color: "#684657" }, { name: "fold4", shape: "box", size: [0.035, 0.44, 0.03], pos: [0.14, 1.14, 0.54], color: "#684657" }, { name: "handL", shape: "sphere", size: [0.19, 0.19, 0.19], pos: [0.43, 1.12, 0.4], color: "#f2c9a0" }, { name: "handR", shape: "sphere", size: [0.19, 0.19, 0.19], pos: [-0.43, 1.12, 0.4], color: "#f2c9a0" } ], anim: [ { part: "bellows", prop: "scale", amp: 0.1, speed: 0.6 }, { part: "body", prop: "rz", amp: 4, speed: 0.6 }, { part: "head", prop: "rz", amp: 5, speed: 0.6 } ] }); const mp = worldPos(7.3, 34); musician.position.set(mp.x, api.groundHeight(mp.x, mp.z), mp.z); musician.rotation.y = angle + Math.PI; api.add(musician, { id: "accordion-player", describe: "a beret-wearing man playing a red accordion", solid: true }); const lamps = new T.Group(); for (const x of [-6.25, 6.25]) for (const z of [5, 39, 66, 83]) { disc(lamps, 0.24, 0.15, x, 0.17, z, colors.dark); rod(lamps, [x, 0.2, z], [x, 3.45, z], 0.08, colors.dark); box(lamps, 0.55, 0.7, 0.55, x, 3.75, z, colors.gold); box(lamps, 0.63, 0.12, 0.63, x, 4.14, z, colors.dark); ball(lamps, 0.13, x, 4.25, z, colors.dark); } addAt(lamps, 0, 0, "street-lamps", "old-fashioned lamps lining the street"); const tower = new T.Group(); const footX = 9, footZ = 7; function legPoint(sx, sz, y) { let x, z; if (y <= 30) { const t = y / 30; x = footX * (1 - t) + 3.2 * t; z = footZ * (1 - t) + 2.5 * t; } else { const t = (y - 30) / 24; x = 3.2 * (1 - t) + 0.8 * t; z = 2.5 * (1 - t) + 0.8 * t; } return [sx * x, y, sz * z]; } for (const sx of [-1, 1]) for (const sz of [-1, 1]) { const levels = [0, 8, 16, 24, 30, 38, 46, 54]; for (let j = 0; j < levels.length - 1; j++) rod(tower, legPoint(sx, sz, levels[j]), legPoint(sx, sz, levels[j + 1]), j < 4 ? 0.38 : 0.25, colors.tower); box(tower, 2.7, 0.6, 2.7, sx * footX, 0.3, sz * footZ, colors.towerLight); } for (const y of [10, 16, 23, 30, 37, 44, 51, 54]) { const p = legPoint(1, 1, y); const x = p[0], z = p[2]; for (let s of [-1, 1]) { rod(tower, [-x, y, s * z], [x, y, s * z], 0.18, colors.towerLight); rod(tower, [s * x, y, -z], [s * x, y, z], 0.18, colors.towerLight); } } for (const pair of [[10,16], [16,23], [23,30], [30,37], [37,44], [44,51], [51,54]]) { const [y1, y2] = pair; const a = legPoint(1, 1, y1), b = legPoint(1, 1, y2); for (const s of [-1, 1]) { rod(tower, [-a[0], y1, s*a[2]], [b[0], y2, s*b[2]], 0.11, colors.towerLight); rod(tower, [a[0], y1, s*a[2]], [-b[0], y2, s*b[2]], 0.11, colors.towerLight); rod(tower, [s*a[0], y1, -a[2]], [s*b[0], y2, b[2]], 0.11, colors.towerLight); rod(tower, [s*a[0], y1, a[2]], [s*b[0], y2, -b[2]], 0.11, colors.towerLight); } } for (const z of [-5.9, 5.9]) { let last = null; for (let i = 0; i <= 16; i++) { const x = -8.4 + i * 1.05; const y = 1 + 9.4 * Math.sqrt(Math.max(0, 1 - (x*x)/(8.4*8.4))); const p = [x, y, z]; if (last) rod(tower, last, p, 0.24, colors.tower); last = p; } } for (const y of [16, 30, 51]) { const p = legPoint(1, 1, y); box(tower, p[0]*2 + 1.3, 0.6, p[2]*2 + 1.3, 0, y, 0, colors.tower); } rod(tower, [0, 54, 0], [0, 61, 0], 0.22, colors.tower); ball(tower, 0.4, 0, 61, 0, colors.gold); addAt(tower, 0, 100, "eiffel-tower", "a tall lattice Eiffel Tower rising at the end of the street", true); const clouds = new T.Group(); for (let i = 0; i < 5; i++) { const x = -85 + i * 42; const z = 150 + (i % 2) * 35; const y = 45 + (i % 3) * 8; for (let k = 0; k < 3; k++) ball(clouds, 5 + (k === 1 ? 2 : 0), x + (k - 1) * 6, y + (k === 1 ? 1 : 0), z, colors.cream, 1.2, 0.55, 0.7); } addAt(clouds, 0, 0, "paris-clouds", "soft cartoon clouds above the Paris street"); api.say = "I built a Parisian street with a striped café, flower cart, accordion player and Eiffel Tower at the far end."; api.suggest = [ "Add pastries and coffee to the café tables", "Plant flowering trees along the street", "Add a little dog strolling past the flower cart", "Make the sky a warm Parisian sunset" ];