Base set up for 3-D Web Dev: Three-Fiber, TailwindCSS, Vite-React
Tags: vite, tutorial, threefiber, tailwindcss
Published: 2023-05-07 20:25:37

> ## Table Of Contents
 * [Why this way only?](#1)
 * [Setup Vite-React](#2)
 * [Install and congifure Tailwind](#3)
 * [Install Three-fiber & Three-drei](#4)
 * [Check if its working](#5)
 * [ReadMe content to share](#6)
 * [Docs for further build](#7)


Here is the guide for base setup to make your 3D visual website or to follow any tutorial on it.
After following this, the project will have `React-three-fiber` ( React renderer for threejs )+ `Three-drei `( helper of Three-fiber )+ `Tailwindcss` using postcss on `Vite-react`.

_Vite is used instead of direct React because Create React App does not support custom PostCSS configurations and is incompatible with many important <a name="1"></a>tools in the PostCSS ecosystem, like `postcss-import`._

### Why this combination only?

**React three fiber** makes it possible to develop 3d websites inside of the react ecosystem, you might think that react three fiber has limitations because it's another shell around threejs but, this is not the case all 3d functionalities will work in react three fiber without any exceptions. There is no hard dependency on a specific threejs version so you don't have to worry about breaking code because of a new threejs update.

**React three drei** is a collection of useful helpers abstractions and react components for react three fiber which makes it a lot easier to add different kinds of objects like cameras, images, 3d models, shapes, and many more.

And with all this, to do custom styling easily **Tailwind CSS** framework can be used. 
<a name="2"></a>
let's start the setup,

#### 1. Setup Vite React app:
```

npm create vite@latest projectName -- --template react
cd projectName
```
<a name="3"></a>
#### 2. Install Tailwind CSS and Other Dependencies for it:
```
npm install -D tailwindcss postcss autoprefixer
```
Generate the Configuration Files,
```
npx tailwindcss init -p
```
This generates two new files `tailwind.congif.js` and `postcss.config.js `.

Configure Source Paths: open `tailwind.config.js` file and make sure the content property looks like this:
```
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ]
```
Add tailwind directives to CSS by adding the statements below to your .`/src/index.css` file:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
<a name="4"></a>
#### 3. Install three-fiber and three-drei:
```
npm install three @react-three/fiber
```
Install rect-three/drei
```
npm install @react-three/drei
```
The File-System module of the project should look like:

![screenshot of the FileSystem module at this point](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0d2t5w9zey7h6gguv7c.png)
And the package.json file should have the following dependencies:


![screenshot of the dependencies in package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovy3he7t4gzqj284siyh.png)
_confirming that drie, fiber, postcss and tailwind are installed_ 

If in terminal there is any vulnerability 
```
npm audit fix
```
#### 4. Final Add-ons then, run the script:
```
npm install
npm run dev


```
All the dependencies are installed and on the local host, the project should be running:

![screenshot of default vite-react website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmkd35pff4lasvqb00x6.png)

> Vite's default dev server port is now 5173.

So, to clean the slate and make room for your files and codes the files that can be deleted (now this depends on projects requirements)
but in general:

- public folder can be emptied completely
- src test files can be deleted
- delete svg or png files

Rest is depends on the file structure one requires. 

---

<a name="5"></a>
#### **Is everything running though?**
To test write the following in `app.jsx`

```
import { useState } from 'react'
import './App.css'
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";

function App() {
  const [count, setCount] = useState(0)

  return (
// tailwind css usage
    <div className={' bg-indigo-800 absolute w-full h-screen p-0 top-0 left-0'}> 
      <div className={'h-5/6 p-0 '}>
        <Canvas camera = {{
          position: [0,0,7],
          fov:30,

        }}>
          <color attach="background" args={["#ececec"]}/>
// three-drei usage
          <OrbitControls/> 
          <mesh rotation ={[Math.PI / 10,10,10]}>
// three-fiber usage
            <torusGeometry /> 
            <meshNormalMaterial/>
          </mesh>
        </Canvas>
        <div className={"text-current text-7xl italic font-light z-40 p-5"}>yaee! you made it </div>
      </div>
    </div>
  )
}

export default App

```

save it.
> After this a screen with a donut floating will appear on the site

![Screenshot of the running webdite having a torus floating in middle of screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjhyoy05ygeke7v4pgy9.png)

{% embed https://base-setup3d-web.vercel.app/ %}
<a name="6"></a>
Now for anyone who wants to run this project of yours can follow the following steps:

```
npm install
npm run dev
```

> This is something you will write in your ReadMe file.

<a name="7"></a>
Here are some documentations on the technologies used to help in further development.
{% embed https://tailwindcss.com/ %}
{% embed https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene %}
{% embed https://github.com/pmndrs/drei#readme %}
_Hope it helped!_