https://github.com/jhillgithub/r3f-vite-starter

https://github.com/jhillgithub/r3f-vite-starter

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jhillgithub/r3f-vite-starter
• Owner: jhillgithub
• Created: 2024-08-07T21:08:31.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-07T21:19:23.000Z (6 months ago)
• Last Synced: 2024-11-11T23:12:39.964Z (3 months ago)
• Language: JavaScript
• Size: 1.32 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Three Fiber + vite starter template

## Install from scratch

Install vite 

```shell

npm create vite@latest -- --template react

```

cd into the project

```shell

cd r3f-vite-starter

```

Install depedencies

```shell

npm i @react-three/fiber @react-three/drei @react-three/rapier three three-stdlib

```

Install dev dependencies

```shell

npm i -D vite-plugin-glsl @types/three

```

Install tailwind

```shell

npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p

```

Install tailwind prettier plugin

```shell

npm install -D prettier prettier-plugin-tailwindcss

```

Create the .prettierrc file

```

// .prettierrc

{

  "plugins": ["prettier-plugin-tailwindcss"]

}

```

Update the tailwind.config.js file

```js

/** @type {import('tailwindcss').Config} */

export default {

  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

```

Update vite.config.js with the react and glsl plugins

```js

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

import glsl from "vite-plugin-glsl";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react(), glsl()],

});

```

Update index.css

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

Update App.jsx and use tailwind to create a full screen canvas

```jsx

import React from "react";

import Experience from "./components/Experience";

import { Canvas } from "@react-three/fiber";

const App = () => {

  return (

    


      

        

        

      

    

  );

};


export default App;

```

## Optional Install

postprocessing

```shell

npm i @react-three/postprocessing

```

leva controls

```shell

npm i leva

```

Additional repositories can be found on https://github.com/orgs/pmndrs/repositories