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
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.
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
Important
this package is using the stand-alone three-stdlib
instead of three/examples/jsm
.
Basic usage
import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
React-native
import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'
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
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
OrthographicCamera
CubeCamera
Controls
CameraControls
Hope it helped!
Top comments (1)
Works like a charm. Thanks for the setup!