React Three Fiber Example

Creator

Creator

Seonglae Cho

Created

Created

2021 Aug 1 16:4

Editor

Editor

Seonglae Cho

Edited

Edited

2025 May 16 15:53

Refs

Refs

Light official

Building an interactive WebGL experience in Next.js - Vercel

WebGL is a JavaScript API for rendering 3D graphics within a web browser, giving developers the ability to create unique, delightful graphics, unlike anything a static image is capable of. By leveraging WebGL, we were able to take what would have been a static conference signup and turned it into the immersive Next.js Conf registration page.

https://vercel.com/blog/building-an-interactive-webgl-experience-in-next-js

Building an interactive WebGL experience in Next.js - Vercel

pinball

Pinball in 70 lines

Super small pinball barebones implementation.

https://codesandbox.io/s/arkanoid-under-60-loc-forked-rmfcq?file=/src/App.js:115-121

Pinball in 70 lines

3d text

Playground by supahfunk using drei, gsap, react, react-dom, react-scripts, react-three-fiber, three

https://codesandbox.io/s/playground-9cenu?file=/public/bold.blob

Playground

Amazing

https://codesandbox.io/p/sandbox/nextjs-prism-j3ycvl

Nextjs prism

Vite App

https://bananas.vercel.app/

Shader

Shader Environment

https://codesandbox.io/p/sandbox/shader-environment-5kz6xr

Shader Environment

Component

https://codesandbox.io/p/sandbox/cards-dc5fjy?file=/package.json

Cards

Recommendations

//////////////