Base set up for 3-D Web Dev: Three-Fiber, TailwindCSS, Vite-React

Table Of Contents

• Why this way only?
• Setup Vite-React
• Install and congifure Tailwind
• Install Three-fiber & Three-drei
• Check if its working
• ReadMe content to share
• Docs for further build

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 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.

let's start the setup,

1. Setup Vite React app:

npm create vite@latest projectName -- --template react
cd projectName

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;

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:

And the package.json file should have the following dependencies:

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:

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.

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

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.

Here are some documentations on the technologies used to help in further development.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

Your first scene - React Three Fiber

This guide will help you setup your first React Three Fiber scene and introduce you to its core concepts.

r3f.docs.pmnd.rs

npm install @react-three/drei

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'