React Three Next

React Three Fiber, Nextjs, Tailwind and Styled-components starter
Alternatives To React Three Next
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Three Next1,681
a month ago14mitJavaScript
React Three Fiber, Nextjs, Tailwind and Styled-components starter
React Conf 17 Videos184
7 years ago1
Find that one presentation you missed!
5 years ago3mitJavaScript
:house_with_garden: My personal website written in Next.js
6 days ago4mitTypeScript
Inspired by Nick Fury, whose primary job was to recruit avengers, spies and other cool people!
a month ago6mitTypeScript
🌈 The website of the 🚀 Fiber framework
When I Using React10
3 years ago2mitJavaScript
:books:【React学习资料+面试指南】 一份涵盖大部分React开发所需要掌握的核心知识。
Next R3f Starter5
a year agoTypeScript
React Three Fiber, Nextjs, TypeScript
R3fiber Experiments4
3 years ago2TypeScript
🐸 Personal experiments with react-three-fiber
Alternatives To React Three Next
Select To Compare

Alternative Project Comparisons

Downloads Discord Shield

🏯 React-Three-Next starter

A minimalist starter for NextJS, @react-three/fiber and Threejs.

  • TTL ~ 100ms
  • First load JS ~79kb
  • Lighthouse score of 100 (Performance, Accessibility, Best Practices, SEO)

This starter allows you to navigate seamlessly between pages with dynamic dom and/or canvas content without reloading or creating a new canvas every time. 3D components are usable anywhere in the dom. The events, dom, viewport, everything is synchronized!

Demo :


How to use


Tailwind is the default style. styled-components (styled) are also available.

yarn create r3f-app next my-app
# yarn create r3f-app <next> my-app <tailwind|styled>? -ts?

🛂 Typescript

For typescript add the parameter -ts or --typescript:

yarn create r3f-app next my-app -ts

🗻 Features

  • [x] GLSL imports
  • [x] Canvas is not getting unmounted while navigating between pages
  • [x] Canvas components usable in any div of the page
  • [x] Based on the App directory architecture
  • [x] PWA Support

🚄 Architecture

Thanks to tunnel-rat the starter can portal components between separate renderers. Anything rendered inside the <View/> component of the starter will be rendered in the 3D Context. For better performances it uses gl.scissor to cut the viewport into segments.

<div className='relative'>
  <View orbit className='relative sm:h-48 sm:w-full'>
    <Dog scale={2} />
    // Some 3D components will be rendered here

🎛 Available Scripts

  • yarn dev - Next dev
  • yarn analyze - Generate bundle-analyzer
  • yarn lint - Audit code quality
  • yarn build - Next build
  • yarn start - Next start


How to contribute :

git clone
&& cd react-three-next && yarn install

Maintainers :

Popular Nextjs Projects
Popular Fiber Projects
Popular Frameworks Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.