const T = api.THREE; const parts = []; const add = (name, shape, size, pos, color, extra = {}) => parts.push({ name, shape, size, pos, color, ...extra }); const tube = (name, points, radius, color, extra = {}) => parts.push({ name, shape: "tube", points, radius, color, ...extra }); const wood = "#b66d3d", darkWood = "#75445a", plank = "#e6a55b"; const green = "#69b94e", leafDark = "#438d66", pink = "#f08cc0"; // The oak trunk and its spreading roots. add("trunk", "cylinder", [2.1, 8.6, 2.1], [0, 4.3, -1.45], wood); for (let i = 0; i < 7; i++) { const a = i * Math.PI * 2 / 7; tube("root" + i, [ [Math.cos(a) * 0.65, 0.42, -1.45 + Math.sin(a) * 0.65], [Math.cos(a) * 1.25, 0.2, -1.45 + Math.sin(a) * 1.25], [Math.cos(a) * 1.8, 0.1, -1.45 + Math.sin(a) * 1.8] ], 0.23, wood, { taper: 0.35 }); } for (let i = 0; i < 5; i++) { const a = i * 1.26; tube("bark" + i, [ [Math.cos(a) * 1.05, 0.5, -1.45 + Math.sin(a) * 1.05], [Math.cos(a + 0.08) * 1.07, 1.5, -1.45 + Math.sin(a + 0.08) * 1.07], [Math.cos(a) * 1.05, 2.55, -1.45 + Math.sin(a) * 1.05] ], 0.035, darkWood); } tube("swing-branch", [[-0.4, 7.7, -1.45], [-2.5, 8.15, -1.3], [-4.8, 7.95, -1.2], [-5.8, 8.3, -1.15]], 0.38, wood, { taper: 0.38 }); tube("right-branch", [[0.5, 7.8, -1.45], [2.8, 8.55, -1.8], [4.7, 9, -1.5]], 0.32, wood, { taper: 0.4 }); tube("high-branch", [[0, 7.7, -1.45], [0.6, 10, -1.8], [1.2, 11.2, -2]], 0.42, wood, { taper: 0.3 }); // Big, lumpy oak crown. const crowns = [ [-4.9, 9.3, -1.5, 3.4, 2.6, 3.3], [-3.2, 10.2, -2.1, 4.2, 3.1, 3.7], [-1.1, 11.0, -2.5, 4.4, 3.3, 3.8], [1.5, 11.2, -2.6, 4.3, 3.2, 3.8], [3.7, 10.1, -2.1, 3.8, 3, 3.4], [5, 9.5, -1.6, 2.8, 2.5, 2.8], [-2.7, 9.7, -4, 3.3, 2.5, 3], [2.4, 10.1, -4.1, 3.7, 2.7, 3.1] ]; crowns.forEach((c, i) => add("oak-crown-" + i, "sphere", c.slice(3), c.slice(0, 3), i % 3 === 0 ? leafDark : green)); for (let i = 0; i < 14; i++) { const x = -4.7 + (i % 7) * 1.5; const y = 9.7 + Math.sin(i * 2.2) * 0.65; add("leaf-cluster-" + i, "sphere", [0.65, 0.3, 0.45], [x, y, i < 7 ? 0.15 : -4.5], i % 2 ? "#9bd653" : "#80cb56", { rot: [0, 0, i % 2 ? 20 : -25] }); } // Clubhouse deck and chunky planked floor. add("deck", "roundbox", [6.6, 0.28, 5.4], [0, 3.67, 0], plank); for (let i = 0; i < 9; i++) { add("deck-seam-" + i, "box", [0.035, 0.015, 5.22], [-2.88 + i * 0.72, 3.82, 0], darkWood); } add("front-beam", "box", [6.6, 0.26, 0.24], [0, 3.45, 2.58], darkWood); add("back-beam", "box", [6.6, 0.26, 0.24], [0, 3.45, -2.58], darkWood); add("support-left", "cylinder", [0.28, 3.45, 0.28], [-2.72, 1.72, -1.9], wood); add("support-right", "cylinder", [0.28, 3.45, 0.28], [2.72, 1.72, -1.9], wood); // Back and sides, with an open window in each side. add("back-wall", "roundbox", [5.55, 2.9, 0.22], [0, 5.28, -2.05], "#de9555"); for (const side of [-1, 1]) { const x = side * 2.68; add("side-bottom-" + side, "box", [0.22, 0.95, 4.1], [x, 4.31, 0], "#df9859"); add("side-top-" + side, "box", [0.22, 0.75, 4.1], [x, 6.32, 0], "#df9859"); add("side-post-a-" + side, "box", [0.22, 1.2, 1.18], [x, 5.35, -1.46], "#df9859"); add("side-post-b-" + side, "box", [0.22, 1.2, 1.18], [x, 5.35, 1.46], "#df9859"); add("side-sill-" + side, "box", [0.38, 0.13, 1.72], [x, 4.83, 0], plank); add("corner-front-" + side, "box", [0.25, 3.04, 0.25], [x, 5.28, 2.04], darkWood); add("corner-back-" + side, "box", [0.25, 3.04, 0.25], [x, 5.28, -2.04], darkWood); } // Front: left window and a door-sized opening to the ladder. add("front-left", "box", [0.55, 2.9, 0.22], [-2.42, 5.28, 2.05], "#e0a05f"); add("front-middle", "box", [0.58, 2.9, 0.22], [-0.32, 5.28, 2.05], "#e0a05f"); add("front-right", "box", [0.7, 2.9, 0.22], [2.35, 5.28, 2.05], "#e0a05f"); add("window-bottom", "box", [1.55, 0.95, 0.22], [-1.37, 4.31, 2.05], "#e0a05f"); add("window-top", "box", [1.55, 0.7, 0.22], [-1.37, 6.38, 2.05], "#e0a05f"); add("window-sill", "box", [1.7, 0.14, 0.4], [-1.37, 4.83, 2.13], plank); add("door-lintel", "box", [1.85, 0.55, 0.24], [0.88, 6.45, 2.05], "#e0a05f"); add("door-frame-left", "box", [0.16, 2.4, 0.32], [0.02, 5.03, 2.1], darkWood); add("door-frame-right", "box", [0.16, 2.4, 0.32], [1.75, 5.03, 2.1], darkWood); add("door-step", "box", [1.8, 0.13, 0.55], [0.89, 3.87, 2.18], plank); // Open shutters. add("shutter-left", "box", [0.55, 1.18, 0.12], [-2.3, 5.36, 2.22], "#ef8a3c", { rot: [0, -25, 0] }); add("shutter-right", "box", [0.4, 1.18, 0.12], [-0.42, 5.36, 2.25], "#ef8a3c", { rot: [0, 30, 0] }); for (let y = 4.1; y < 6.6; y += 0.45) { add("back-board-line-" + y, "box", [5.3, 0.025, 0.025], [0, y, -2.18], darkWood); } // Pitched roof. add("roof-left", "roundbox", [3.45, 0.23, 4.8], [-1.48, 7.12, 0], "#a65365", { rot: [0, 0, 24] }); add("roof-right", "roundbox", [3.45, 0.23, 4.8], [1.48, 7.12, 0], "#a65365", { rot: [0, 0, -24] }); add("roof-ridge", "cylinder", [0.22, 4.9, 0.22], [0, 7.83, 0], darkWood, { rot: [90, 0, 0] }); for (const x of [-2.55, -1.8, -1.05, 1.05, 1.8, 2.55]) { add("roof-strip-" + x, "box", [0.07, 0.055, 4.65], [x, 7.8 - Math.abs(x) * 0.445, 0], "#d77b77"); } // Railings around the open deck, leaving the doorway and slide clear. for (const x of [-3.1, -2.25, -1.4, -0.55, 1.95, 3.1]) { add("front-rail-post-" + x, "cylinder", [0.11, 0.8, 0.11], [x, 4.2, 2.56], darkWood); } add("front-rail-left", "cylinder", [0.12, 2.65, 0.12], [-1.82, 4.6, 2.56], plank, { rot: [0, 0, 90] }); add("front-rail-right", "cylinder", [0.12, 1.15, 0.12], [2.52, 4.6, 2.56], plank, { rot: [0, 0, 90] }); for (const z of [-2.3, -1.2, 0, 1.2, 2.3]) { add("left-rail-post-" + z, "cylinder", [0.11, 0.8, 0.11], [-3.13, 4.2, z], darkWood); } add("left-rail", "cylinder", [0.12, 4.8, 0.12], [-3.13, 4.6, 0], plank, { rot: [90, 0, 0] }); // Rope ladder leaning up to the front entrance. for (const x of [0.38, 1.42]) { tube("ladder-rope-" + x, [[x, 0.14, 4.1], [x, 1.25, 3.72], [x, 2.5, 3.18], [x, 3.87, 2.58]], 0.055, "#f3d68c"); } for (let i = 0; i <= 10; i++) { const f = i / 10; add("ladder-rung-" + i, "cylinder", [0.12, 1.15, 0.12], [0.9, 0.18 + f * 3.65, 4.1 - f * 1.52], wood, { rot: [0, 0, 90] }); } // Curved slide: short sloping deck segments with raised side rails. const slidePoints = [ [3.12, 3.8, 0.7], [3.7, 3.55, 1.25], [4.25, 2.95, 1.8], [4.85, 2.15, 2.4], [5.45, 1.3, 3.0], [6.05, 0.55, 3.6], [6.7, 0.2, 4.25], [7.2, 0.15, 4.75] ]; for (let i = 0; i < slidePoints.length - 1; i++) { const a = new T.Vector3(...slidePoints[i]), b = new T.Vector3(...slidePoints[i + 1]); const d = b.clone().sub(a); const mid = a.clone().add(b).multiplyScalar(0.5); const q = new T.Quaternion().setFromUnitVectors(new T.Vector3(0, 0, 1), d.clone().normalize()); const e = new T.Euler().setFromQuaternion(q); add("slide-bed-" + i, "box", [1.1, 0.13, d.length() + 0.08], mid.toArray(), "#f2c84e", { rot: [e.x * 180 / Math.PI, e.y * 180 / Math.PI, e.z * 180 / Math.PI] }); } const perp = new T.Vector3(-0.707, 0, 0.707); for (const side of [-1, 1]) { const points = slidePoints.map(p => [p[0] + perp.x * side * 0.52, p[1] + 0.2, p[2] + perp.z * side * 0.52]); tube("slide-rail-" + side, points, 0.1, "#ef8a3c"); } add("slide-post", "cylinder", [0.22, 1.65, 0.22], [4.85, 0.85, 2.4], wood); // A tire suspended from the far branch. tube("swing-rope", [[-4.55, 8.0, -1.2], [-4.55, 5.1, -1.2], [-4.55, 2.85, -1.2]], 0.055, "#f3d68c"); add("tire", "torus", [1.45, 0.35, 1.45], [-4.55, 2.1, -1.2], "#52364d"); add("tire-hub-hole", "torus", [1.03, 0.06, 1.03], [-4.55, 2.1, -1.39], "#8a5c70"); for (let i = 0; i < 8; i++) { const a = i * Math.PI / 4; add("tire-tread-" + i, "box", [0.12, 0.27, 0.16], [-4.55 + Math.sin(a) * 0.68, 2.1 + Math.cos(a) * 0.68, -1.0], "#80546c", { rot: [0, 0, -a * 180 / Math.PI] }); } // Telescope poking out of the front window, pointing upward. add("telescope-tripod", "cylinder", [0.1, 0.75, 0.1], [-1.35, 5.17, 2.04], darkWood); add("telescope", "cylinder", [0.33, 1.65, 0.33], [-1.35, 5.62, 2.55], "#edbd55", { rot: [-70, 0, 0] }); add("telescope-front", "cylinder", [0.43, 0.16, 0.43], [-1.35, 5.9, 3.31], darkWood, { rot: [-70, 0, 0] }); add("telescope-lens", "cylinder", [0.29, 0.035, 0.29], [-1.35, 5.94, 3.39], "#89d8e4", { rot: [-70, 0, 0], glow: true }); add("telescope-back", "cylinder", [0.23, 0.2, 0.23], [-1.35, 5.34, 1.79], darkWood, { rot: [-70, 0, 0] }); // Pirate flag: a cloth panel and a little skull-and-crossbones emblem. add("flagpole", "cylinder", [0.12, 3.1, 0.12], [0.15, 9.3, 0.1], darkWood); add("flag-finial", "sphere", [0.26, 0.26, 0.26], [0.15, 10.9, 0.1], "#f2c84e"); add("pirate-flag", "box", [1.8, 1.08, 0.07], [1.07, 10.35, 0.1], "#633d73", { anchor: "left" }); add("skull", "sphere", [0.48, 0.45, 0.08], [0.9, 0.1, 0.055], "#fff3d8", { parent: "pirate-flag" }); add("skull-jaw", "box", [0.3, 0.18, 0.07], [0.9, -0.16, 0.06], "#fff3d8", { parent: "pirate-flag" }); for (const x of [0.8, 1.0]) { add("skull-eye-" + x, "sphere", [0.09, 0.11, 0.04], [x, 0.11, 0.11], "#3a2230", { parent: "pirate-flag" }); } add("crossbone-a", "box", [0.72, 0.09, 0.07], [0.9, -0.28, 0.05], "#fff3d8", { parent: "pirate-flag", rot: [0, 0, 27] }); add("crossbone-b", "box", [0.72, 0.09, 0.07], [0.9, -0.28, 0.05], "#fff3d8", { parent: "pirate-flag", rot: [0, 0, -27] }); const clubhouse = api.build({ parts, anim: [{ part: "pirate-flag", prop: "ry", amp: 8, speed: 0.65 }] }); api.place(clubhouse, { where: "ahead", distance: 16 }, { id: "oak-treehouse", describe: "a big oak tree with a pirate clubhouse, rope ladder, tire swing, telescope and slide" }); clubhouse.updateMatrixWorld(true); const point = (x, y, z) => clubhouse.localToWorld(new T.Vector3(x, y, z)); // A soft backyard patch, separate from the walkable clubhouse. const yard = new T.Group(); const lawn = new T.Mesh(new T.CircleGeometry(1, 64), api.toon("#8fd14f")); lawn.rotation.x = -Math.PI / 2; lawn.scale.set(11, 9, 1); lawn.position.set(1, 0.025, 2); yard.add(lawn); for (let i = 0; i < 28; i++) { const a = i * 2.399; const r = 3.6 + (i % 5) * 0.85; const x = Math.cos(a) * r * 1.1 + 1; const z = Math.sin(a) * r * 0.8 + 2; const stem = new T.Mesh(new T.CylinderGeometry(0.025, 0.035, 0.26, 5), api.toon("#4e9c55")); stem.position.set(x, 0.16, z); yard.add(stem); const flower = new T.Mesh(new T.SphereGeometry(0.12, 8, 6), api.toon(i % 3 === 0 ? pink : i % 3 === 1 ? "#f9da6e" : "#f5d7ee")); flower.position.set(x, 0.31, z); yard.add(flower); } yard.position.copy(clubhouse.position); yard.quaternion.copy(clubhouse.quaternion); api.add(yard, { id: "treehouse-backyard", describe: "a flowery green backyard beneath the treehouse", solid: false }); // A playful dog, with moving legs and a wagging tail. const dog = api.build({ parts: [ { name: "body", shape: "sphere", size: [1.05, 0.75, 1.5], pos: [0, 0.82, 0], color: "#e9ab64" }, { name: "chest", shape: "sphere", size: [0.7, 0.65, 0.65], pos: [0, 0.78, 0.55], color: "#f8d9a5" }, { name: "head", shape: "sphere", size: [0.88, 0.8, 0.78], pos: [0, 1.25, 0.75], color: "#e9ab64" }, { name: "muzzle", shape: "sphere", size: [0.56, 0.35, 0.48], pos: [0, 1.08, 1.13], color: "#f9d5a5" }, { name: "nose", shape: "sphere", size: [0.22, 0.16, 0.16], pos: [0, 1.18, 1.36], color: "#3a2230" }, { name: "eye-left", shape: "eye", size: [0.24, 0.28, 0.15], pos: [0.24, 1.42, 1.05], color: "#ffffff" }, { name: "eye-right", shape: "eye", size: [0.22, 0.26, 0.15], pos: [-0.24, 1.42, 1.05], color: "#ffffff" }, { name: "ear-left", shape: "sphere", size: [0.3, 0.6, 0.32], pos: [0.47, 1.21, 0.68], color: "#a76149", rot: [0, 0, 20] }, { name: "ear-right", shape: "sphere", size: [0.3, 0.6, 0.32], pos: [-0.47, 1.21, 0.68], color: "#a76149", rot: [0, 0, -20] }, { name: "collar", shape: "torus", size: [0.75, 0.09, 0.75], pos: [0, 0.98, 0.58], color: "#e55566", rot: [75, 0, 0] }, { name: "tag", shape: "sphere", size: [0.16, 0.2, 0.08], pos: [0, 0.72, 0.89], color: "#f6cf58" }, { name: "leg-front", shape: "capsule", size: [0.23, 0.68, 0.23], pos: [0.34, 0.69, 0.43], anchor: "top", color: "#e9ab64", mirror: true }, { name: "leg-back", shape: "capsule", size: [0.23, 0.66, 0.23], pos: [0.34, 0.68, -0.5], anchor: "top", color: "#e9ab64", mirror: true }, { name: "tail", shape: "tube", points: [[0, 0, 0], [0, 0.24, -0.34], [0.06, 0.5, -0.55]], radius: 0.1, taper: 0.6, pos: [0, 1.0, -0.68], color: "#e9ab64" }, { name: "spot", shape: "sphere", size: [0.36, 0.08, 0.45], pos: [0.13, 1.18, -0.1], color: "#b66d4d" } ], anim: [ { part: "leg-front", prop: "rx", amp: 30, speed: 1.7, walk: true }, { part: "leg-back", prop: "rx", amp: 30, speed: 1.7, phase: 0.5, walk: true }, { part: "tail", prop: "ry", amp: 35, speed: 2.4 } ], motion: { type: "wander", speed: 0.85, radius: 3 } }); const dp = point(3.8, 0, 7.1); dog.position.set(dp.x, api.groundHeight(dp.x, dp.z), dp.z); api.add(dog, { id: "playful-dog", describe: "a playful golden dog wandering in the backyard" }); // A bright ball for the dog. const ball = api.build({ parts: [ { name: "ball", shape: "sphere", size: [0.55, 0.55, 0.55], pos: [0, 0.28, 0], color: "#e85774" }, { name: "stripe", shape: "torus", size: [0.54, 0.08, 0.54], pos: [0, 0.28, 0], color: "#f8d762", rot: [90, 0, 25] } ] }); const bp = point(1.8, 0, 8); ball.position.set(bp.x, api.groundHeight(bp.x, bp.z), bp.z); api.add(ball, { id: "dog-ball", describe: "a colorful ball in the backyard" }); api.say = "I built an oak-tree pirate clubhouse with a rope ladder, tire swing, telescope and slide. A playful dog is exploring its flowery backyard!"; api.suggest = [ "Add a treasure chest inside the clubhouse", "Give the dog a little doghouse", "Plant a vegetable garden nearby", "Add a sunset and fluffy clouds" ];