Need help with r3f-next-starter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

RenaudRohlinger
135 Stars 8 Forks 115 Commits 1 Opened issues

Description

Repo is moving to https://github.com/pmndrs/react-three-next

Services available

!
?

Need anything else?

Contributors list

# 93,427
HTML
Webpack
cordova
TypeScr...
101 commits
# 65,813
HTML
Svelte
TypeScr...
Three.j...
1 commit

:bangbang: | The repo is moving to https://github.com/pmndrs/react-three-next :---: | :---

Lighthouse Global dependencies Status devDependencies Status npm

:japanese_castle: Next & React three fiber starter

This starter will automatically pick the marked R3F components and inject them into a canvas layout so we can navigate seamlessly between the pages with some dynamic dom and canvas content without reloading or creating a new canvas every time.

:japan: Demo :

https://r3f-next-starter.vercel.app/

How to use

Installation

Tailwind is the default

yarn create r3f-app next my-app 

or

npx create-r3f-app next my-app 

:mount_fuji: Features

  • [x] Concurrent mode with React experimental
  • [x] Automatically inject r3f component in the Canvas layout
  • [x] Customizable loading
  • [x] Support glsl, images and svg imports
  • [x] PWA Support
  • [x] Dynamic meta data and header using Helmet
  • [x] Clean code using ESlint, Prettier and Husky

:bullettrain_side: Architecture

Inform the nextjs page that the component is a Threejs component. For that, simply add the r3f property to the parent component.

const Page = () => {
  return (
    <>
      

Hello !

{/* Simply add the r3f prop to the parent component -> */}

Bonjour.

> ) }

export default Page

:control_knobs: Available Scripts

  • yarn dev
  • yarn lint (Scripts)
  • yarn build
  • yarn start

:mag_right: Stack

  • Threejs: A lightweight, 3D library with a default WebGL renderer.
  • React-three-fiber: A React renderer for Threejs on the web and react-native.
  • Drei: A growing collection of useful helpers and abstractions for react-three-fiber.
  • Tailwind: A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 directly in your markup.
  • R3F-Perf: Tool to easily monitor react threejs performances.

How to contribute :

git clone https://github.com/RenaudRohlinger/r3f-next-starter
&& cd r3f-next-starter && yarn install
# then push using the terminal to trigger Husky

Contributors will be automatically added using allcontributors.org

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Joe Hsu

💻

Alaric.Baraou

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

More tool and r3f tips on my twitter @onirenaud

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.