CakeView · 3D Cake Maker

\n \n \n\n",[77],"a6ecaa56-5db6-11f1-95bf-1607ee4eb77e",["D",1780317449105],"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",[86],"c011b292-5db6-11f1-a0d3-1607ee4eb77e",["D",1780317491288],"/** @jsxImportSource https://esm.sh/react@18 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18\";\nimport { createRoot } from \"https://esm.sh/react-dom@18/client\";\nimport { createCakeScene, type CakeConfig } from \"./cake3d.ts\";\n\nconst CAKE_TYPES = [\n { name: \"Classic Vanilla\", sponge: \"#f4e6c4\" },\n { name: \"Rich Chocolate\", sponge: \"#5b3a29\" },\n { name: \"Red Velvet\", sponge: \"#9e2b3a\" },\n { name: \"Lemon Drizzle\", sponge: \"#f2e07a\" },\n { name: \"Carrot Spice\", sponge: \"#c98a4b\" },\n];\n\nconst ICINGS = [\n { name: \"Cream\", hex: \"#fdfaf4\" },\n { name: \"Blush\", hex: \"#f6b9c0\" },\n { name: \"Butter\", hex: \"#f7d58a\" },\n { name: \"Rose\", hex: \"#ef9aac\" },\n { name: \"Peach\", hex: \"#f6c79a\" },\n { name: \"Mint\", hex: \"#bfe3c9\" },\n];\n\nconst DECOS = [\n { id: \"candles\", label: \"🕯️ Candles\" },\n { id: \"sprinkles\", label: \"🌈 Sprinkles\" },\n { id: \"figurine\", label: \"🍓 Berries\" },\n { id: \"none\", label: \"✦ None\" },\n];\n\nconst C = {\n card: \"#ffffff\",\n bg: \"#faf6f1\",\n pink: \"#f7c4cb\",\n pinkDeep: \"#ef9aac\",\n pinkSoft: \"#fbe3e6\",\n text: \"#3a322e\",\n sub: \"#8a7d74\",\n};\n\nfunction Section({ title, children }: { title: string; children: React.ReactNode }) {\n return (\n

{title}

\n {children}\n

\n );\n}\n\nfunction App() {\n const canvasRef = useRef(null);\n const sceneRef = useRef | null>(null);\n\n const [typeIdx, setTypeIdx] = useState(0);\n const [layers, setLayers] = useState(2);\n const [icing, setIcing] = useState(ICINGS[0].hex);\n const [decoration, setDecoration] = useState(\"figurine\");\n const [sent, setSent] = useState(false);\n const [autoRotate, setAutoRotate] = useState(true);\n\n useEffect(() => {\n if (!canvasRef.current) return;\n sceneRef.current = createCakeScene(canvasRef.current);\n return () => sceneRef.current?.dispose();\n }, []);\n\n useEffect(() => {\n sceneRef.current?.update({\n layers,\n icing,\n sponge: CAKE_TYPES[typeIdx].sponge,\n decoration,\n } as CakeConfig);\n }, [typeIdx, layers, icing, decoration]);\n\n useEffect(() => { sceneRef.current?.setAutoRotate(autoRotate); }, [autoRotate]);\n\n const decoLabel = DECOS.find((d) => d.id === decoration)?.label.replace(/^\\S+\\s/, \"\") ?? \"None\";\n const icingName = ICINGS.find((i) => i.hex === icing)?.name ?? \"Custom\";\n\n return (\n

\n {/* Header */}\n

🎂

CakeView

Design your dream cake in 3D

\n\n

\n {/* 3D Stage */}\n

\n\n {/* Controls */}\n

Customize Cake

\n\n

\n {CAKE_TYPES.map((t, i) => (\n \n ))}\n

\n\n

\n {[1, 2, 3, 4].map((n) => (\n \n ))}\n

\n\n

\n {ICINGS.map((ic) => (\n setIcing(ic.hex)}\n style={{\n width: 38, height: 38, borderRadius: 99, cursor: \"pointer\", background: ic.hex,\n border: icing === ic.hex ? `3px solid ${C.pinkDeep}` : \"2px solid #eee\",\n boxShadow: \"0 2px 6px rgba(0,0,0,0.06)\", transition: \"transform .15s\",\n transform: icing === ic.hex ? \"scale(1.12)\" : \"scale(1)\",\n }}\n />\n ))}\n

\n\n

\n {DECOS.map((d) => (\n \n ))}\n

\n\n { setSent(true); setTimeout(() => setSent(false), 2600); }}\n style={{ width: \"100%\", border: \"none\", cursor: \"pointer\", background: C.pink, color: C.text, fontWeight: 700, fontSize: 16, padding: \"16px\", borderRadius: 16, marginTop: 4, boxShadow: \"0 8px 20px rgba(239,154,172,0.4)\" }}\n >\n {sent ? \"✓ Your cake design has been sent!\" : \"Send Order\"}\n \n

\n\n {/* Order summary strip */}\n

Order Summary — Your Custom Cake

\n \n \n \n \n

\n\n \n

\n View source on Val Town\n

\n );\n}\n\nfunction Stat({ label, value }: { label: string; value: string }) {\n return (\n

{label}

{value}

\n );\n}\n\nfunction pill(active: boolean): React.CSSProperties {\n return {\n border: \"none\", cursor: \"pointer\", borderRadius: 12, padding: \"9px 14px\", fontSize: 13, fontWeight: 600,\n background: active ? C.pink : C.pinkSoft,\n color: C.text,\n boxShadow: active ? \"0 4px 12px rgba(239,154,172,0.35)\" : \"none\",\n };\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[96],"pulls","branches","forks","envVars",{"_199":20,"_201":20},"connections",{"_199":20,"_200":20},"count","unfilledCount","emptyCount",{"_30":188,"_13":96,"_60":95,"_40":-5,"_32":33,"_173":90,"_174":109,"_34":216,"_36":20,"_63":87,"_176":190,"_65":24,"_178":-5,"_207":217,"_146":218},{"_30":184,"_13":86,"_60":85,"_40":-5,"_32":33,"_173":80,"_174":109,"_34":213,"_36":20,"_63":87,"_176":186,"_65":24,"_178":-5,"_207":214,"_146":215},{"_30":180,"_13":77,"_60":76,"_40":-5,"_32":33,"_173":71,"_174":109,"_34":210,"_36":20,"_63":51,"_176":182,"_65":24,"_178":-5,"_207":211,"_146":212},{"_30":172,"_13":62,"_60":61,"_40":-5,"_32":33,"_173":37,"_174":109,"_34":206,"_36":20,"_63":64,"_176":177,"_65":24,"_178":-5,"_207":208,"_146":209},["D",1780317412217],"children",[],[62],["D",1780317417222],[],[77],["D",1780317449105],[],[86],["D",1780317491288],[],[96],["D",1780317403175],{"_11":12,"_145":68},{"_11":12,"_140":141,"_67":68,"_25":66,"_142":143,"_144":24},{"_36":90,"_13":16,"_30":33,"_132":97,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":14,"_139":12},"ctx",{"_49":-5,"_165":256,"_257":258,"_259":260,"_261":24,"_262":24,"_263":24,"_264":109,"_265":-5,"_266":-7,"_267":-7,"_268":20,"_269":24,"_270":24,"_271":-5,"_272":24,"_273":24,"_274":24,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":16,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History