DEV Community

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

Posted on • Updated on

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

Table Of Contents

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


Enter fullscreen mode Exit fullscreen mode

2. Install Tailwind CSS and Other Dependencies for it:



npm install -D tailwindcss postcss autoprefixer


Enter fullscreen mode Exit fullscreen mode

Generate the Configuration Files,



npx tailwindcss init -p


Enter fullscreen mode Exit fullscreen mode

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}",
  ]


Enter fullscreen mode Exit fullscreen mode

Add tailwind directives to CSS by adding the statements below to your ./src/index.css file:



@tailwind base;
@tailwind components;
@tailwind utilities;


Enter fullscreen mode Exit fullscreen mode

3. Install three-fiber and three-drei:



npm install three @react-three/fiber


Enter fullscreen mode Exit fullscreen mode

Install rect-three/drei



npm install @react-three/drei


Enter fullscreen mode Exit fullscreen mode

The File-System module of the project should look like:

screenshot of the FileSystem module at this point
And the package.json file should have the following dependencies:

screenshot of the dependencies in package.json file
confirming that drie, fiber, postcss and tailwind are installed

If in terminal there is any vulnerability



npm audit fix


Enter fullscreen mode Exit fullscreen mode

4. Final Add-ons then, run the script:



npm install
npm run dev




Enter fullscreen mode Exit fullscreen mode

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

screenshot of default vite-react website

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



Enter fullscreen mode Exit fullscreen mode

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





Now for anyone who wants to run this project of yours can follow the following steps:



npm install
npm run dev


Enter fullscreen mode Exit fullscreen mode

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.

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

favicon r3f.docs.pmnd.rs

GitHub logo pmndrs / drei

🥉 useful helpers for react-three-fiber

logo

Version Downloads Discord Shield Open in GitHub Codespaces

A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.

If you make a component that is generic enough to be useful to others, think about CONTRIBUTING!

npm install @react-three/drei
Enter fullscreen mode Exit fullscreen mode

Important

this package is using the stand-alone three-stdlib instead of three/examples/jsm.

Basic usage

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
Enter fullscreen mode Exit fullscreen mode

React-native

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

The native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.

Documentation

https://pmndrs.github.io/drei

Warning

Below is an archive of the anchors links with their new respective locations to the documentation website. Do not update the links below, they are for reference only.

Cameras

PerspectiveCamera

Documentation has moved here

OrthographicCamera

Documentation has moved here

CubeCamera

Documentation has moved here

Controls

CameraControls

Documentation has moved…






Hope it helped!

Top comments (1)

Collapse
 
warkentien2 profile image
Philip Warkentien II

Works like a charm. Thanks for the setup!