GithubHelp home page GithubHelp logo

ocelyn / r3f-next-starter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from earn9/r3f-next-starter

0.0 0.0 0.0 1.47 MB

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

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

JavaScript 97.99% SCSS 0.81% GLSL 0.45% CSS 0.75%

r3f-next-starter's Introduction

โ€ผ๏ธ The repo is moving to https://github.com/pmndrs/react-three-next

Lighthouse Global dependencies Status devDependencies Status npm

๐Ÿฏ 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.

๐Ÿ—พ Demo :

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

How to use

Installation

Tailwind is the default

yarn create r3f-app next my-app <tailwind?>

or

npx create-r3f-app next my-app <tailwind?>

๐Ÿ—ป Features

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

๐Ÿš„ 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 (
    <>
      <h1>Hello !</h1>
      {/* Simply add the r3f prop to the parent component -> */}
      <Group r3f />
      <h2>Bonjour.</h2>
      <MeshComponent r3f />
    </>
  )
}

export default Page

๐ŸŽ›๏ธ Available Scripts

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

๐Ÿ”Ž 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

r3f-next-starter's People

Contributors

renaudrohlinger avatar allcontributors[bot] avatar jhsu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.