Three.js / React Three Fiber

The web's default 3D library, plus its React renderer.

MIT · ★ 116.1k · 237 clips

Website GitHub116.1k Showcase

Three.js / React Three Fiber clips237

Filter in Explore

0:32

An interactive camera lens labby @RyanSaelPromptThree.js

4:17

Interactive Peach Blossom Spring 3D demoby @doteyThree.js

0:18

Mobile game reward animation templateby @op7418PromptThree.js

2:27

@JaydenDavisNC Splatoon 游戏录屏by @JaydenDavisNCThree.js

2:00

250 Years of U.S. History in Sand Animationby @MichaelzsguoPromptBlender

0:19

Dynasty Warriors web game demoby @BubuStdThree.js

0:34

An Interactive 3D Tour Inside a Data Centerby @RyanSaelPromptThree.js

1:23

Three.js retro first-person RPG gameby @literallydenisThree.js

3:47

Procedural ocean island simulationby @dangreenheckThree.js

0:52

One-shot Mario Kart style gameby @bridgemindaiThree.js

0:48

Data Center to Silicon Atomby @ai_ba_rezaThree.js

2:37

Five Thousand Years of Chinese History in Line Artby @akokoi1PromptThree.js

0:59

Playable Boat Journey Through a Japanese Valleyby @MengToPromptBlender

0:35

An Explorable Raptor 3 Rocket Engineby @konstantinsaifoPromptThree.js

1:00

Antikythera underwater game demoby @edwinarbusPromptThree.js

1:21

Sakura Crossingby @gmi_cloudThree.js

0:33

Interactive 2D/3D Floor Plan and Interior Design Web Toolby @akokoi1PromptThree.js

0:53

3D pelican riding bicycle demoby @alin_zoneThree.js

0:28

Trolley problem gameby @soyukke_gameThree.js

3:44

The rise of Anthropicby @VincentWei93PromptThree.js

0:28

Three.js 3D basketball web game demoby @xingbugengmingThree.js

1:31

Spearfishing 3D game demoby @nachat_dayoThree.js

0:26

Letters Abroad language-learning app demoby @anshucThree.js

1:11

Electromagnetic field visualizationby @thebuggeddevThree.js

How people build with Three.js / React Three Fiber

Works where the prompt, the code or the video is public. Videos load from the creator's own host when you press play.

Watch at the source

Interactive 3D Japanese Cherry Blossom Valley Web Experience

by 宝玉 · NOASSERTION, none · AI-made

Interactive 3D Japanese Cherry Blossom Valley Web Experience — generated with claude-opus-5.5; public prompt, source, render.

Code ↗Prompt ↗Source page ↗

Showreel of advanced motion design techniques

by lukasersil · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Showreel of advanced motion design techniques — generated with claude-opus-5.5; public prompt, render.

Prompt

Create a bold, dynamic 15-second motion graphics showreel that feels like the ultimate portfolio piece of an exceptionally talented motion designer. Showcase a wide range of advanced techniques: kinetic typography, smooth transitions, 2D and 3D animation, abstract geometry, fluid simulations, particles, distortion, creative masking, compositing, lighting, depth, and seamless camera movement. Keep the pacing fast, confident, and visually surprising, with every shot transitioning naturally into the next. Make it feel meticulously art-directed rather than like a random collection of effects. Push the creativity, polish, timing, and visual impact as far as possible. This should feel like the opening reel that gets a motion designer hired.

Source page ↗

Mobile game reward animation template

by op7418 · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Mobile game reward animation template — generated with claude-opus-5.5; public prompt, render.

Prompt ↗Source page ↗

Pixar-level Three.js animation for Grid Genius

by Anilraok · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Pixar-level Three.js animation for Grid Genius — generated with claude-opus-5.5; public prompt, render.

Prompt

I want you to imagine a story, that subtly promotes grid genius. Or it can not even have grid genius, but something that aligns with our app and helps us get more eyeballs when posted on social media. Then using threejs/javascript I want you to create full animation, Pixar-level quality out of the story you imagine

Source page ↗

Python-rendered 3D cube and type reel

by Dannnnnok · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Python-rendered 3D cube and type reel — generated with claude-opus-5.5; public prompt, render.

Prompt

I’m curious to see how strong you are as a motion designer. To prove it, create a polished 15-second animated graphic video that showcases your motion design skills. This piece will be presented to 10,000 people on X, so make it visually compelling, professional, and memorable. Take full creative freedom and make the strongest result you can

Source page ↗

Watch at the source

3D Douglas Skyraider Aircraft Build

by BuildFastWithAI · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

3D Douglas Skyraider Aircraft Build — generated with claude-opus-5.5; public prompt, render.

Prompt

Build a Douglas A-1H Skyraider in Three.js

Source page ↗

About Three.js / React Three Fiberagents, rendering, runtime

With agents: Three.js publishes llms.txt and llms-full.txt (incl. TSL) and R3F publishes llms.txt; agents typically write scenes directly or inside Remotion/HyperFrames adapters for frame-accurate rendering.
Render path: Not a video tool itself: render frame-accurately via @remotion/three or the HyperFrames Three.js adapter, or capture canvas frames and encode with FFmpeg.
Runtime: JavaScript (WebGL/WebGPU); R3F for React
Best for: 3D product shots · particle systems · abstract 3D loops · data sculptures · interactive scenes

Worth knowing

Three.js MIT ~116k stars; R3F MIT ~32.6k stars source ↗
Both publish llms.txt (Three.js also llms-full.txt incl. TSL) — https://threejs.org/llms.txt , https://r3f.docs.pmnd.rs/llms.txt
MP4 via @remotion/three or the HyperFrames Three.js adapter source ↗

Official AI resourcesthreejs.org/llms.txt threejs.org/docs/llms-full.txt r3f.docs.pmnd.rs/llms.txt

For the Three.js / React Three Fiber team

Featured on 24fps

This page is free and always will be. If it helps your users, drop the badge on your showcase or README.

<a href="https://24fps.dev/tools/threejs"><img src="https://24fps.dev/badge/threejs.svg" alt="Featured on 24fps" height="28"></a>