This course teaches you how to create fully interactive, modern 3D websites using React, Three.js, and React-Three-Fiber. You will learn everything from the fundamentals to advanced features like animations, lighting, physics, post-processing, 3D models, UI overlays, and deployment.

Whether you're a beginner or leveling up your skills, this course takes you from zero to a professional 3D website ready for your portfolio or clients.


---

✅ What This Course Includes

🔹 React Fundamentals Refresher

Components, hooks, props, state

Project structure

React best practices


🔹 Full Three.js & React-Three-Fiber Training

Canvas setup

Cameras, lights, shadows

Materials & PBR

Textures & HDRI

Meshes & geometries


🔹 Importing & Optimizing 3D Models

How to model/export from Blender

GLTF / GLB

Draco compression

useGLTF loader


🔹 Animations

useFrame animations

GSAP timeline

GLTF AnimationMixer

On-scroll & on-hover animations


🔹 Interactivity (Lesson 8)

Clickable 3D objects

Pointer events

Raycasting

3D → HTML overlays with

Opening info panels, modals, actions


🔹 Performance Optimization

LOD

Instancing

Suspense + lazy loading

Texture compression

Baking lighting


🔹 Advanced Features

Physics (use-cannon)

Particles

Postprocessing (bloom, SSAO, depth-of-field)

Camera transitions

3D UI/UX patterns


🔹 Full Real Project

Build a real 3D Portfolio Website:

Animated hero model

Floating objects

Hover interactions

Info hotspots

Smooth camera movement

Styled UI overlay


🔹 Deployment

Build for production

Hosting on Vercel or Netlify

Asset optimization for mobile


🔹 Extra Tools & Resources

Professional workflow tips

Blender export settings

Code templates

Troubleshooting guide

Best practices for 3D on the web





⭐ What You Will Be Able To Do After This Course

✔ Build your own 3D interactive websites