const T = api.THREE; const sand = api.toon("#e9b763"); const duneColors = ["#e6ad59", "#edbd70", "#dca052", "#f2c67c"]; api.world({ time: "sunset", sky: "#efb184", haze: "#f5c995", shadow: "#805a91" }); const ground = new T.Mesh(new T.CircleGeometry(600, 96), sand); ground.rotation.x = -Math.PI / 2; ground.position.y = 0.02; api.add(ground, { id: "desert-ground", describe: "golden sand stretching across the desert", solid: false }); const forward = new T.Vector3(); api.camera.getWorldDirection(forward); forward.y = 0; if (forward.lengthSq() < 0.001) forward.set(0, 0, -1); forward.normalize(); const right = new T.Vector3(-forward.z, 0, forward.x); const center = new T.Vector3(api.player.x, 0, api.player.z).addScaledVector(forward, 27); const angle = Math.atan2(-forward.x, -forward.z); function point(x, z, y = 0) { return center.clone().addScaledVector(right, x).addScaledVector(forward, -z).add(new T.Vector3(0, y, 0)); } function setPose(obj, x, z) { obj.position.copy(point(x, z)); obj.rotation.y = angle; } function mesh(geometry, color, x, y, z, parent, glow = false) { const m = new T.Mesh(geometry, api.toon(color, { glow })); m.position.set(x, y, z); parent.add(m); return m; } function ball(parent, color, x, y, z, sx, sy, sz) { const m = mesh(new T.SphereGeometry(1, 12, 8), color, x, y, z, parent); m.scale.set(sx, sy, sz); return m; } function tube(parent, color, points, radius, segments = 20) { const curve = new T.CatmullRomCurve3(points.map(p => new T.Vector3(...p))); return mesh(new T.TubeGeometry(curve, segments, radius, 6, false), color, 0, 0, 0, parent); } const distant = new T.Group(); for (let i = 0; i < 48; i++) { const a = i * 2.39996; const r = 74 + (i % 4) * 42 + (i * 13 % 31); const h = 5 + (i * 7 % 13); const d = ball(distant, duneColors[i % duneColors.length], Math.cos(a) * r, -h * 0.28, Math.sin(a) * r, 25 + i % 9 * 2, h, 14 + i % 6 * 2); d.rotation.y = a * 0.7; } distant.position.set(api.player.x, 0, api.player.z); api.add(distant, { id: "distant-dunes", describe: "rolling golden dunes all around the horizon", solid: false }); const sun = new T.Mesh(new T.SphereGeometry(17, 24, 16), api.toon("#ffe1a0", { glow: true })); sun.position.set(api.player.x + forward.x * 260 - right.x * 95, 75, api.player.z + forward.z * 260 - right.z * 95); api.add(sun, { id: "setting-sun", describe: "a large warm sun low over the dunes", solid: false }); const pool = new T.Group(); const water = mesh(new T.CircleGeometry(1, 64), "#39c7c4", 0, 0.075, 0, pool); water.rotation.x = -Math.PI / 2; water.scale.set(7.2, 5.1, 1); const ripples = []; for (let i = 0; i < 5; i++) { const r = mesh(new T.TorusGeometry(0.6 + i * 0.13, 0.025, 6, 36), "#a1f0dc", -3.2 + i * 1.5, 0.105, -1.8 + (i % 3) * 1.55, pool, true); r.rotation.x = Math.PI / 2; r.scale.set(1.4, 0.7, 1); ripples.push(r); } for (let i = 0; i < 29; i++) { const a = i * Math.PI * 2 / 29; const s = 0.23 + (i % 4) * 0.09; const stone = ball(pool, i % 3 === 0 ? "#d58a57" : "#f3d49c", Math.cos(a) * 7.35, 0.14, Math.sin(a) * 5.22, s * 1.45, s * 0.55, s); stone.rotation.y = a; } setPose(pool, 0, 0); api.add(pool, { id: "turquoise-spring", describe: "a turquoise oasis spring edged with warm stones", solid: false }); const swaying = []; function palm(x, z, height, lean, id) { const g = new T.Group(); const trunkPoints = [[0, 0.15, 0], [lean * 0.15, height * 0.35, 0], [lean * 0.65, height * 0.72, 0.12], [lean, height, 0.15]]; tube(g, "#af683a", trunkPoints, 0.32, 28); for (let i = 1; i < 11; i++) { const f = i / 11; const band = mesh(new T.TorusGeometry(0.33 - f * 0.045, 0.035, 6, 12), "#e3a65b", lean * f * f, height * f, 0.15 * f, g); band.rotation.x = Math.PI / 2; band.rotation.y = lean / height * 0.2; } const crown = new T.Group(); crown.position.set(lean, height, 0.15); g.add(crown); ball(crown, "#508b46", 0, 0, 0, 0.48, 0.35, 0.48); for (let k = 0; k < 9; k++) { const a = k * Math.PI * 2 / 9; const len = 3.1 + (k % 3) * 0.3; const branch = new T.Group(); branch.rotation.y = a; crown.add(branch); tube(branch, "#78ad47", [[0, 0.05, 0], [len * 0.38, 0.48, 0], [len * 0.72, 0.15, 0], [len, -0.65, 0]], 0.075, 16); const verts = []; const indices = []; const steps = 12; for (let j = 0; j <= steps; j++) { const f = j / steps; const xx = len * f; const yy = 1.7 * f * (1 - f) - 0.65 * f * f; const w = Math.sin(Math.PI * f) * 0.43; verts.push(xx, yy, -w, xx, yy + 0.08, 0, xx, yy, w); if (j < steps) { const n = j * 3; indices.push(n, n + 3, n + 1, n + 1, n + 3, n + 4, n + 1, n + 4, n + 2, n + 2, n + 4, n + 5); } } const geo = new T.BufferGeometry(); geo.setAttribute("position", new T.Float32BufferAttribute(verts, 3)); geo.setIndex(indices); geo.computeVertexNormals(); const mat = api.toon(k % 2 ? "#57a94e" : "#73bc57"); mat.side = T.DoubleSide; branch.add(new T.Mesh(geo, mat)); } for (let i = 0; i < 12; i++) { const a = i * 2.4; ball(crown, i % 2 ? "#d47735" : "#e5a044", Math.cos(a) * 0.45, -0.2 - (i % 3) * 0.18, Math.sin(a) * 0.45, 0.15, 0.2, 0.15); } setPose(g, x, z); api.add(g, { id, describe: "a tall date palm with arching fronds and ripe dates" }); swaying.push({ crown, phase: x * 0.4 + z * 0.2 }); } palm(-10, -4, 9.5, 0.7, "date-palm-west"); palm(-11, 5, 8.5, -0.4, "date-palm-near"); palm(-5, -9, 10.5, 0.8, "date-palm-far-west"); palm(5, -9, 9.2, -0.6, "date-palm-far-east"); palm(9, 7, 10, 0.6, "date-palm-east"); palm(1, 9, 8.7, -0.5, "date-palm-front"); const tent = new T.Group(); const poleMat = "#9e593e"; for (const x of [-4, 4]) { for (const z of [-3.4, 3.4]) { mesh(new T.CylinderGeometry(0.1, 0.13, 3.1, 8), poleMat, x, 1.55, z, tent); } } for (const z of [-3.4, 3.4]) { mesh(new T.CylinderGeometry(0.12, 0.15, 4.35, 8), poleMat, 0, 2.175, z, tent); } const clothColors = ["#f6dfae", "#cf6851"]; function fabricQuad(a, b, c, d, color) { const geo = new T.BufferGeometry(); geo.setAttribute("position", new T.Float32BufferAttribute([...a, ...b, ...c, ...d], 3)); geo.setIndex([0, 1, 2, 0, 2, 3]); geo.computeVertexNormals(); const mat = api.toon(color); mat.side = T.DoubleSide; tent.add(new T.Mesh(geo, mat)); } for (let i = 0; i < 12; i++) { const z0 = -3.5 + i * 7 / 12; const z1 = -3.5 + (i + 1) * 7 / 12; const color = clothColors[i % 2]; fabricQuad([-4.25, 3, z0], [0, 4.4, z0], [0, 4.4, z1], [-4.25, 3, z1], color); fabricQuad([0, 4.4, z0], [4.25, 3, z0], [4.25, 3, z1], [0, 4.4, z1], color); for (const x of [-4, 4]) fabricQuad([x, 0.15, z0], [x, 3, z0], [x, 3, z1], [x, 0.15, z1], color); } for (let i = 0; i < 12; i++) { const x0 = -4 + i * 8 / 12; const x1 = -4 + (i + 1) * 8 / 12; const y0 = 4.4 - Math.abs(x0) * 0.35; const y1 = 4.4 - Math.abs(x1) * 0.35; fabricQuad([x0, 0.15, -3.45], [x1, 0.15, -3.45], [x1, y1, -3.45], [x0, y0, -3.45], clothColors[i % 2]); } const rug = mesh(new T.BoxGeometry(5.5, 0.06, 4.3), "#9f5382", 0, 0.07, 0, tent); for (let i = -2; i <= 2; i++) mesh(new T.BoxGeometry(0.12, 0.015, 4.1), "#f2be75", i * 0.9, 0.11, 0, tent); ball(tent, "#e79660", -1.5, 0.3, -1.5, 0.7, 0.24, 0.55); ball(tent, "#b984bc", 1.2, 0.3, -1.6, 0.7, 0.24, 0.55); setPose(tent, 15, -1); api.add(tent, { id: "striped-oasis-tent", describe: "an open striped desert tent with cushions and a woven rug" }); const lanterns = new T.Group(); const swingingLanterns = []; for (const x of [-3, 0, 3]) { const pivot = new T.Group(); pivot.position.set(x, 3.05 + (x === 0 ? 0.8 : 0), 3.45); lanterns.add(pivot); tube(pivot, "#8d5a47", [[0, 0, 0], [0, -0.45, 0]], 0.035, 4); mesh(new T.CylinderGeometry(0.14, 0.2, 0.48, 8), "#ffd777", 0, -0.7, 0, pivot, true); mesh(new T.CylinderGeometry(0.2, 0.16, 0.09, 8), "#bb7040", 0, -0.45, 0, pivot); mesh(new T.CylinderGeometry(0.17, 0.2, 0.09, 8), "#bb7040", 0, -0.96, 0, pivot); for (let k = 0; k < 4; k++) { const a = k * Math.PI / 2; mesh(new T.CylinderGeometry(0.018, 0.018, 0.48, 5), "#9d6041", Math.cos(a) * 0.16, -0.7, Math.sin(a) * 0.16, pivot); } swingingLanterns.push(pivot); } setPose(lanterns, 15, -1); api.add(lanterns, { id: "tent-lanterns", describe: "three glowing lanterns hanging from the tent", solid: false }); function camel(x, z, id, turn) { const obj = api.build({ parts: [ { name: "body", shape: "sphere", size: [1.65, 1.35, 2.6], pos: [0, 1.15, 0], color: "#c99260" }, { name: "hump", shape: "sphere", size: [1.1, 1.05, 1.25], pos: [0, 1.9, -0.18], color: "#d6a16a" }, { name: "chest", shape: "sphere", size: [1.35, 1.3, 1.05], pos: [0, 1.05, 0.85], color: "#c99260" }, { name: "neck", shape: "tube", points: [[0, 1.2, 0.8], [0, 1.65, 1.15], [0, 2.35, 1.2], [0, 2.7, 1.48]], radius: 0.27, taper: 0.8, color: "#d2a06e" }, { name: "head", shape: "sphere", size: [0.85, 0.72, 1.05], pos: [0, 2.65, 1.7], color: "#d6a675" }, { name: "muzzle", shape: "sphere", size: [0.72, 0.4, 0.62], pos: [0, 2.45, 2.15], color: "#e1b684" }, { name: "eye-left", shape: "eye", size: [0.27, 0.3, 0.15], pos: [0.34, 2.76, 2.02], rot: [0, 25, 0], color: "#ffffff" }, { name: "eye-right", shape: "eye", size: [0.27, 0.3, 0.15], pos: [-0.34, 2.76, 2.02], rot: [0, -25, 0], color: "#ffffff" }, { name: "ear-left", shape: "sphere", size: [0.22, 0.45, 0.22], pos: [0.3, 3.02, 1.55], rot: [0, 0, -25], color: "#bd8059", mirror: true }, { name: "front-leg-left", shape: "capsule", size: [0.4, 0.42, 1.1], pos: [0.55, 0.3, 0.85], rot: [90, 0, 0], color: "#bf895d", mirror: true }, { name: "back-leg-left", shape: "capsule", size: [0.45, 0.42, 1.1], pos: [0.55, 0.3, -0.75], rot: [90, 0, 0], color: "#bf895d", mirror: true }, { name: "tail", shape: "tube", points: [[0, 1.2, -1.18], [0.2, 0.85, -1.6], [0.4, 0.55, -1.8]], radius: 0.075, taper: 0.6, color: "#b87d52" }, { name: "tail-tuft", shape: "sphere", size: [0.22, 0.25, 0.3], pos: [0.4, 0.55, -1.8], color: "#805340" } ], anim: [{ part: "body", prop: "scale", amp: 0.025, speed: 0.18 }] }); setPose(obj, x, z); obj.rotation.y += turn; api.add(obj, { id, describe: "a resting one-humped camel with folded legs" }); } camel(-12.5, 1, "resting-camel-one", -0.5); camel(8.6, -7.2, "resting-camel-two", 0.8); api.onFrame((dt, t) => { swaying.forEach(({ crown, phase }) => { crown.rotation.z = Math.sin(t * 0.55 + phase) * 0.045; crown.rotation.x = Math.sin(t * 0.4 + phase) * 0.025; }); swingingLanterns.forEach((p, i) => { p.rotation.z = Math.sin(t * 1.1 + i) * 0.09; }); ripples.forEach((r, i) => { const s = 0.85 + 0.2 * (0.5 + 0.5 * Math.sin(t * 1.2 + i)); r.scale.set(1.4 * s, 0.7 * s, 1); }); }); api.say = "I made a golden-hour oasis with a turquoise spring, date palms, a lantern-lit tent and resting camels. Dunes roll away toward the setting sun."; api.suggest = ["Add a little campfire beside the tent", "Make the dunes glow under a starry sky", "Add a wandering desert fox", "Put floating flowers on the spring"];