正在加载视频...

视频加载失败

I built an open-source generative art platform where AI agents create, evolve, and export 3D visuals. It's called Threelab. React + Three.js + Go, 21 built-in patterns, a visual node-graph editor, genetic evolution, and 13 MCP tools so AI agents can drive the whole thing. Everything exports as standalone...

15,302 次观看 • 7 个月前 •via X (Twitter)

39 条评论

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Threelab is MIT-licensed: Full writeup:

Charles Macnish 的头像
Charles Macnish7 个月前

Rad! I love this, great work @jradoff! I will show you what I come up with! Big respect 💚🔥💚

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Love to see it!

Eric 的头像
Eric7 个月前

Such a cool idea! Excited to make some art babies

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

@EricAlar11 agentic babybots for everyone!

Scry Visuals 的头像
Scry Visuals7 个月前

This looks awesome!

Crytpo 的头像
Crytpo5 个月前

what about $BMB?

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Every pattern is a wirable node graph. Lissajous curves, physarum slime molds, Lorenz attractors, flow fields, fractal systems, Voronoi tessellations — you can inspect the logic, fork it, rewrite the evaluate function, and watch changes hot-reload. Stack patterns as layers with blend modes, opacity, and bloom post-processing.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

The MCP server is a first-class citizen. An AI agent can browse the gallery, assemble a genome of pattern layers and parameters, evolve it through mutation and crossover, rate the results, and export — all without a human touching a slider. The genome is a high-level language for generative art. The agent never writes WebGL.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Why Three.js? 5.4M weekly npm downloads — 270x more than Babylon.js. WebGPU now on all major browsers. "Vibe coding" went from Karpathy tweet to Collins Dictionary Word of the Year in 10 months. Three.js in 2026 is the substrate of an entire creative economy.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Backend logic, APIs, data transforms: Claude Code was a genuine collaborator. Tight feedback loops, fast iteration. Visual/spatial work? I spent a long while writing paragraphs to explain "make the particles fade more gradually toward the edges with a slight blue shift." A graphics engineer fixes that in 10 seconds.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

LLMs are still more wordcel than shape rotator. IJCAI 2025: "representational grounding — not linguistic fluency — remains the primary bottleneck" for LLMs in spatial tasks. Among visual artists at GDC 2026, 64% view AI as negative for the industry. They feel the modality mismatch most acutely.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

The tools are catching up: → tldraw turned a canvas into a "conversation space where you and the AI workshop an idea together" (Steve Ruiz) → TalkSketch: sketch + speak simultaneously, both feeding the model → Stanford this month: current AI models are "terrible collaborators" for creative work But all of these work in 2D.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Nobody's built the equivalent for 3D generative art, shader programming, or spatial creative work. That's the frontier. And it's why I built Threelab with composability as a core principle: every scene exports as a single HTML file. No build step, no server. Open it and it runs.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

Three.js crossed 5.4M downloads/week. Godot is the fastest-growing game engine. Blender taught us open-source wins long-term. The bottleneck isn't engineering anymore. It's imagination — and the interfaces we haven't invented yet to communicate visual intent to AI.

Dan Rockwell 的头像
Dan Rockwell7 个月前

very very cool

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

thank you!

Arel Avellino 的头像
Arel Avellino7 个月前

13 MCP tools for AI agents to drive 3D visuals is wild. The visual node-graph editor is the part that makes this actually usable vs just a cool demo. How are you handling the feedback loop between what the agent generates and what actually looks good?

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

there isn't a feedback loop, but that's a good idea -- probably needs some sort of human feedback to tune that, but of course visual appreciation is fairly subjective

Arel Avellino 的头像
Arel Avellino7 个月前

Nice. I actually found a prompt that somebody put on GitHub that enhances Claude's approach to website design, setting limitations on quality bar. I've been toying with how to create QC feedback loops.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

If you liked the project, let me know about it!

Arel Avellino 的头像
Arel Avellino7 个月前

The prompt: Role: Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. Objective: Architect a high-fidelity, cinematic "1:1 Pixel Perfect" landing page for Nura Health. Aesthetic Identity: "High-End Organic Tech" / "Clinical Boutique." The site should feel like a bridge between a biological research lab and an avant-garde luxury magazine. 1. CORE DESIGN SYSTEM (STRICT) Palette: Moss (Primary): #2E4036Clay (Accent): #CC5833Cream (Background): #F2F0E9Charcoal (Text/Dark sections): #1A1A1ATypography: Headings: "Plus Jakarta Sans" & "Outfit" (Tracking tight). Drama/Emphasis: "Cormorant Garamond" (Must use Italic for biological/organic concepts). Data: A clean Monospace font for clinical telemetry. Visual Texture: Implement a global CSS Noise overlay (SVG turbulence at 0.05 opacity) to eliminate flat digital gradients. Use a rounded-[2rem] to rounded-[3rem] radius system for all containers. 2. COMPONENT ARCHITECTURE & BEHAVIOR A. NAVBAR (The Floating Island) A fixed, pill-shaped pill container. Morphing Logic: Transparent with white text at the hero top. Transitions into a white/60 glassmorphic blur with moss text and a subtle border upon scrolling. B. HERO SECTION (Nature is the Algorithm) Visuals: 100dvh height. Background image of a moody, dark forest ( with a heavy Moss-to-Black gradient overlay. Layout: Content pushed to the bottom-left third. Typography: Large scale contrast. "Nature is the" (Bold Sans) vs. "Algorithm." (Massive Serif Italic). Animation: GSAP staggered fade-up for all text parts. C. FEATURES (The Precision Micro-UI Dashboard) Replace standard cards with Interactive Functional Artifacts. Card 1 (Audit Intelligence): Implement a "Diagnostic Shuffler." 3 overlapping white cards that cycle vertically using unshift(pop()) logic. Every 3 seconds, they rotate with a spring-bounce transition (cubic-bezier(0.34, 1.56, 0.64, 1)). Labels: "Epigenetic Age", "Microbiome Score", "Cortisol Optimization". Card 2 (Neural Stream): Implement a "Telemetry Typewriter." A live text feed that cycles through messages like "Optimizing Circadian Rhythm..." with a blinking clay cursor. Include a small "Live Feed" pulsing dot. Card 3 (Adaptive Regimen): A "Mock Cursor Protocol Scheduler." A weekly grid (S M T W T F S) where an automated SVG cursor enters, moves to a day, clicks (visual scale-down), activates the day, then moves to a "Save" button before fading out. D. PHILOSOPHY (The Manifesto) A high-contrast Charcoal section with a parallaxing organic texture ( Text Layout: Huge typography comparison. "Modern medicine asks: What is wrong?" vs. "We ask: What is optimal?" using split-text GSAP reveals. E. PROTOCOL (Sticky Stacking Archive) Vertical stack of 3 full-screen cards. Stacking Interaction: Using GSAP ScrollTrigger, as a new card scrolls into view, the card underneath must scale down to 0.9, increase its blur filter to 20px, and fade its opacity to 0.5. Artifacts: Each card contains a unique animation: A rotating double-helix gear. A scanning laser-grid over a grid of medical cells. A pulsing EKG waveform path. F. MEMBERSHIP & FOOTER Three-tier pricing grid. The middle card ("Performance") should "pop" with a Moss background and Clay button. Footer: Deep Charcoal, rounded-t-[4rem]. Include high-end utility links and a "System Operational" status indicator with a pulsing green dot. 3. TECHNICAL REQUIREMENTS Tech Stack: React 19, Tailwind CSS, GSAP 3 (with ScrollTrigger), Lucide React. Animation Lifecycle: Use gsap.context() within useEffect for all animations to ensure clean mounting/unmounting. Micro-Interactions: Buttons must have a "magnetic" feel (subtle scale-up on hover) and utilize overflow-hidden with a sliding background layer for color transitions. Code Quality: No placeholders. Use real image URLs from Unsplash. Ensure the dashboard cards in the Features section feel like functional software, not just static layouts. Execution Directive: "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns"

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

wow!

Arel Avellino 的头像
Arel Avellino7 个月前

If this is up your alley, I can share more stuff as I modify it into a Claude Code skill in my AIOS.

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

I love to learn!

José Luis Acosta Ramos 的头像
José Luis Acosta Ramos5 个月前

Muy interesante. Se ve potente. Lo único es que el arte está ligado a sentimientos, vivencias y percepciones humanas. Ese antecedente no existe aquí. Es una cuestión filosófica

Dmitriy 的头像
Dmitriy7 个月前

[[agent art]] @treechatdat

Abu Jahja 的头像
Abu Jahja6 个月前

Hi @jradoff any updates going on Beamable Network? I didnt see any post recently on X are you guys still working on it?

PunkXBT 的头像
PunkXBT1 个月前

AI making generative art tools feel like actual playgrounds now

Snibby 的头像
Snibby3 个月前

ai + generative art is such a wild combo, agents creating their own worlds is crazy

loground 的头像
loground7 个月前

banger!

Shokunin | Product & R&D 的头像
Shokunin | Product & R&D7 个月前

Welcome back, Winamp! I kid, this is really interesting. I’d actually love to use a simplified version to use for backgrounds to use on pages. Eg not super crazy visualizer, but chill bg color / curves. Can it be set for that?

jestermolecule 的头像
jestermolecule7 个月前

this looks awesome jon!! could i contribute by making a donation?

Jon Radoff 👾/acc 🎮 Metavert 的头像
Jon Radoff 👾/acc 🎮 Metavert7 个月前

That's very kind... The best donation would be to help spread the word! Hoping people just discover my works and find it helpful!

jestermolecule 的头像
jestermolecule7 个月前

will do man! would still love to make a donation regardless, do you happen to have a solana wallet?

ARK 的头像
ARK7 个月前

Are there plans to make Threelab a general-purpose 3D creation backend for AI Agents?

SHAIK ARSHAD 的头像
SHAIK ARSHAD2 个月前

Hi Jon, I'm an independent cybersecurity professional and recently discovered a security weakness present on one of your internet-facing infrastructure. Could you direct me to the correct channel for responsible disclosure? Thanks, Arshad Security Researcher

Trends 的头像
Trends7 个月前

This ThreeLab looks really cool, and we'd like to invite you to use it at our hackathon:

hira 的头像
hira5 个月前

love the node graph approach really makes it click

相关视频