CakeView · 3D Cake Maker

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_182":183,"_184":185},"routes/_app.x.$handle.$name",{"_101":100,"_37":49,"_110":91,"_32":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_26":-5,"_122":-5,"_123":-5,"_124":30,"_125":126,"_127":63,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":30},"version",3,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","3b98e73e-340f-4066-853a-b986663148d4","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":39,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","cake3d.ts","latestPath","fileId","a6ecab1e-5db6-11f1-95bf-1607ee4eb77e","name","fileType","script","content","import * as THREE from \"https://esm.sh/three@0.160.0\";\nimport { OrbitControls } from \"https://esm.sh/three@0.160.0/examples/jsm/controls/OrbitControls.js\";\n\nexport type CakeConfig = {\n layers: number;\n icing: string; // hex\n sponge: string; // hex\n decoration: string; // \"candles\" | \"sprinkles\" | \"figurine\" | \"none\"\n};\n\nexport function createCakeScene(canvas: HTMLCanvasElement) {\n const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n const scene = new THREE.Scene();\n\n const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);\n camera.position.set(0, 3.2, 7);\n\n const controls = new OrbitControls(camera, canvas);\n controls.enableDamping = true;\n controls.dampingFactor = 0.08;\n controls.enablePan = false;\n controls.minDistance = 4.5;\n controls.maxDistance = 11;\n controls.minPolarAngle = 0.4;\n controls.maxPolarAngle = Math.PI / 2.05;\n controls.target.set(0, 1, 0);\n controls.autoRotate = true;\n controls.autoRotateSpeed = 1.1;\n\n // Lighting — soft, bakery-warm\n scene.add(new THREE.HemisphereLight(0xfff4ec, 0xd9c9bd, 0.9));\n const key = new THREE.DirectionalLight(0xffffff, 1.4);\n key.position.set(4, 8, 5);\n key.castShadow = true;\n key.shadow.mapSize.set(1024, 1024);\n key.shadow.camera.near = 1;\n key.shadow.camera.far = 25;\n key.shadow.bias = -0.0004;\n scene.add(key);\n const fill = new THREE.DirectionalLight(0xffe0d2, 0.5);\n fill.position.set(-5, 3, -4);\n scene.add(fill);\n\n // Plate\n const plate = new THREE.Mesh(\n new THREE.CylinderGeometry(2.7, 2.9, 0.18, 64),\n new THREE.MeshStandardMaterial({ color: 0xf3ece4, roughness: 0.6, metalness: 0.05 }),\n );\n plate.position.y = 0.09;\n plate.receiveShadow = true;\n scene.add(plate);\n\n // Ground shadow catcher\n const ground = new THREE.Mesh(\n new THREE.CircleGeometry(8, 64),\n new THREE.ShadowMaterial({ opacity: 0.16 }),\n );\n ground.rotation.x = -Math.PI / 2;\n ground.position.y = 0.001;\n ground.receiveShadow = true;\n scene.add(ground);\n\n const cakeGroup = new THREE.Group();\n scene.add(cakeGroup);\n\n function buildCake(cfg: CakeConfig) {\n cakeGroup.clear();\n\n const layerHeight = 0.55;\n const baseRadius = 1.85;\n const radiusStep = 0.28;\n let y = 0.18;\n\n for (let i = 0; i < cfg.layers; i++) {\n const r = baseRadius - i * radiusStep;\n // sponge tier\n const tier = new THREE.Mesh(\n new THREE.CylinderGeometry(r, r + 0.04, layerHeight, 64),\n new THREE.MeshStandardMaterial({ color: cfg.sponge, roughness: 0.85 }),\n );\n tier.position.y = y + layerHeight / 2;\n tier.castShadow = true;\n tier.receiveShadow = true;\n cakeGroup.add(tier);\n\n // icing band (drip ring) on top of each tier\n const band = new THREE.Mesh(\n new THREE.CylinderGeometry(r + 0.05, r + 0.05, 0.16, 64),\n new THREE.MeshStandardMaterial({ color: cfg.icing, roughness: 0.55 }),\n );\n band.position.y = y + layerHeight - 0.04;\n band.castShadow = true;\n cakeGroup.add(band);\n\n y += layerHeight + 0.04;\n }\n\n // top frosting dome\n const topR = baseRadius - (cfg.layers - 1) * radiusStep;\n const dome = new THREE.Mesh(\n new THREE.SphereGeometry(topR + 0.05, 48, 24, 0, Math.PI * 2, 0, Math.PI / 2),\n new THREE.MeshStandardMaterial({ color: cfg.icing, roughness: 0.5 }),\n );\n dome.scale.y = 0.35;\n dome.position.y = y;\n dome.castShadow = true;\n cakeGroup.add(dome);\n\n const topY = y + (topR + 0.05) * 0.35;\n\n // Decorations\n if (cfg.decoration === \"candles\") {\n const n = 6;\n for (let i = 0; i < n; i++) {\n const a = (i / n) * Math.PI * 2;\n const cr = topR * 0.6;\n const candle = new THREE.Mesh(\n new THREE.CylinderGeometry(0.05, 0.05, 0.7, 12),\n new THREE.MeshStandardMaterial({ color: 0xfff4d6, roughness: 0.4 }),\n );\n candle.position.set(Math.cos(a) * cr, topY + 0.35, Math.sin(a) * cr);\n candle.castShadow = true;\n cakeGroup.add(candle);\n const flame = new THREE.Mesh(\n new THREE.SphereGeometry(0.07, 12, 12),\n new THREE.MeshStandardMaterial({ color: 0xffae42, emissive: 0xff8c1a, emissiveIntensity: 1.5 }),\n );\n flame.scale.y = 1.7;\n flame.position.set(Math.cos(a) * cr, topY + 0.78, Math.sin(a) * cr);\n cakeGroup.add(flame);\n }\n } else if (cfg.decoration === \"sprinkles\") {\n const colors = [0xff6b8a, 0x6bb6ff, 0xffe066, 0x8ce99a, 0xda77f2];\n for (let i = 0; i < 80; i++) {\n const a = Math.random() * Math.PI * 2;\n const rad = Math.random() * topR * 0.95;\n const s = new THREE.Mesh(\n new THREE.CapsuleGeometry(0.03, 0.1, 4, 6),\n new THREE.MeshStandardMaterial({ color: colors[i % colors.length], roughness: 0.4 }),\n );\n s.position.set(Math.cos(a) * rad, topY + 0.02 + Math.random() * 0.05, Math.sin(a) * rad);\n s.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);\n cakeGroup.add(s);\n }\n } else if (cfg.decoration === \"figurine\") {\n const berryMat = new THREE.MeshStandardMaterial({ color: 0xe23b5a, roughness: 0.35 });\n const n = 5;\n for (let i = 0; i < n; i++) {\n const a = (i / n) * Math.PI * 2;\n const cr = topR * 0.55;\n const berry = new THREE.Mesh(new THREE.SphereGeometry(0.16, 20, 20), berryMat);\n berry.scale.set(1, 1.25, 1);\n berry.position.set(Math.cos(a) * cr, topY + 0.14, Math.sin(a) * cr);\n berry.castShadow = true;\n cakeGroup.add(berry);\n }\n const cherry = new THREE.Mesh(new THREE.SphereGeometry(0.2, 20, 20), berryMat);\n cherry.scale.set(1, 1.2, 1);\n cherry.position.set(0, topY + 0.18, 0);\n cherry.castShadow = true;\n cakeGroup.add(cherry);\n }\n }\n\n let frame = 0;\n function resize() {\n const w = canvas.clientWidth;\n const h = canvas.clientHeight;\n if (canvas.width !== w || canvas.height !== h) {\n renderer.setSize(w, h, false);\n camera.aspect = w / h;\n camera.updateProjectionMatrix();\n }\n }\n\n function animate() {\n frame = requestAnimationFrame(animate);\n resize();\n controls.update();\n renderer.render(scene, camera);\n }\n animate();\n\n return {\n update: buildCake,\n setAutoRotate: (v: boolean) => { controls.autoRotate = v; },\n dispose: () => { cancelAnimationFrame(frame); controls.dispose(); renderer.dispose(); },\n };\n}\n","createdAt",["D",1780317449105],"branchVersion","branchId","8b8baffa-5db6-11f1-a0d3-1607ee4eb77e","id","8b8af060-5db6-11f1-a0d3-1607ee4eb77e","cakeview",["D",1780317403175],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D cake maker and customization site","imageUrl","ce853fdc-9996-40c7-996b-556d13e92e26","pinnedFileId","90f0abbc-5db6-11f1-95bf-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e832e-4116-75ec-826a-81329287dac1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_19":59,"_106":107,"_108":30},"branch",{"_13":90,"_37":91,"_47":46,"_92":48,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":49,"_99":100},"isOwned",4,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dynamikcodez","handle","displayName","Olukoya iyiola","avatar","https://avatars.githubusercontent.com/u/61966129?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":178,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":179,"_85":180,"_87":181,"_89":30},"tree",[165,166,167],"files",[165,166,167],"counts",{"_155":67,"_156":138,"_157":67,"_158":159,"_160":161},"contents",[132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":152,"_37":33,"_35":36,"_137":-5,"_45":46,"_44":14,"_139":63,"_42":153,"_13":67,"_38":39,"_40":41,"_29":30,"_143":-5,"_32":154},{"_47":145,"_37":146,"_35":147,"_137":-5,"_45":46,"_44":148,"_139":63,"_42":149,"_13":67,"_38":26,"_40":150,"_29":30,"_143":-5,"_32":151},{"_47":135,"_37":136,"_35":61,"_137":-5,"_45":46,"_44":138,"_139":63,"_42":140,"_13":67,"_38":141,"_40":142,"_29":30,"_143":-5,"_32":144},"90f0aacc-5db6-11f1-95bf-1607ee4eb77e","main.tsx","parentId",1,"latest",["D",1780317412217],"http","/** @jsxImportSource https://esm.sh/react@18 */\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // Serve the client-side bundle\n if (url.pathname === \"/app.tsx\") {\n const code = await readFile(\"/app.tsx\", import.meta.url);\n return new Response(code, {\n headers: { \"Content-Type\": \"text/javascript; charset=utf-8\" },\n });\n }\n\n const html = await readFile(\"/index.html\", import.meta.url);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","label",[136],"93ebaa42-5db6-11f1-95bf-1607ee4eb77e","index.html","93ebab28-5db6-11f1-95bf-1607ee4eb77e",2,["D",1780317417222],"\n\n \n \n \n CakeView · 3D Cake Maker\n 🎂\" />\n \n \n \n \n \n \n

\n \n \n\n",[146],"a6ecaa56-5db6-11f1-95bf-1607ee4eb77e",["D",1780317449105],[33],"pulls","branches","forks","envVars",{"_162":67,"_164":67},"connections",{"_162":67,"_163":67},"count","unfilledCount","emptyCount",{"_47":152,"_37":33,"_35":36,"_137":-5,"_45":46,"_44":14,"_139":63,"_42":175,"_13":67,"_38":39,"_40":41,"_29":30,"_143":-5,"_169":176,"_32":177},{"_47":145,"_37":146,"_35":147,"_137":-5,"_45":46,"_44":148,"_139":63,"_42":172,"_13":67,"_38":26,"_40":150,"_29":30,"_143":-5,"_169":173,"_32":174},{"_47":135,"_37":136,"_35":61,"_137":-5,"_45":46,"_44":138,"_139":63,"_42":168,"_13":67,"_38":141,"_40":142,"_29":30,"_143":-5,"_169":170,"_32":171},["D",1780317412217],"children",[],[136],["D",1780317417222],[],[146],["D",1780317449105],[],[33],["D",1780317403175],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_19":59,"_106":107,"_108":30},{"_13":90,"_37":91,"_47":46,"_92":48,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":49,"_99":100},"ctx",{"_83":-5,"_129":215,"_216":217,"_218":219,"_220":30,"_221":30,"_222":30,"_223":63,"_224":-5,"_225":-7,"_226":-7,"_227":67,"_228":30,"_229":30,"_230":-5,"_231":30,"_232":30,"_233":30,"_234":-5},"ENV",{"_186":187,"_188":189,"_190":91,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v3