---
# System prepended metadata

title: 3D on the web with React Three Fiber

---

## Vision

Create a fun and enaging series of videos on creating 3D for the web

My idea is to create a series of videos to teach people how to create 3D in the web using react three fiber.
We would start from an empty project, install r3f and get it set up and go all the way to make a full fledged 3D scene.

This vision includes an all out website to get people excited on what they can create. This course would be for mid engineers, so someone who has been making forms for quite some years and wants to learn something more, maybe they want to make a game, work in an agency or just love 3D and want to integrate it into their websites.



## Scope

This will be a course that can get update videos and also new videos and while the size of the market can be small because it requires react I plan on adding a section at the start on getting up to speed with react to improve that.

I would be the only instructor.


## Topic

Why choose this topic? Because people think 3D on the web looks fucking awesome but they also think it's incredibly hard so with some flashy 3D things it's easy to get people excited.

From my experience people think that knowing these things is a super power already so we can really blow their minds with the ease of use on making scenes.


## Timeframe

A mix between long term and one off. The course would release completed but then new lessons would be added ad-hoc every couple of months to keep people interested

My idea was also to have a box where people could tell me what they wanted to see and have those things done.

To keep the long term going I was also thinking on running contests for people on the community so they can engage and continue using the course.



## Lessons plan so far:

- Starting a project with R3F and Vite
	- Install all necessary dependencies and do basic R3F setup
- Your first scene
	- Create a simple scene with your first cube
- Adding interactions
	- Make your 3D cube react to user actions
- Your first animation
	- How to animate 3D models
- Lightning
	- All types of lightning and explain how lightning works in 3D spaces
- Adding shadows
	- Shadows are not enabled by default and let's explain how they work and turn them on
- Exporting models from blender to R3F
	- Extra content: Making the NES cart in blender
- Materials
	- Using several types of materials and explain how they work, this would probably be two videos or one long one
- Using image textures
- 3D text
	- Adding 3D text
- Mixing HTML with 3D Models
	- Using HTML inside your 3D model
- Accessibility
	- using https://github.com/pmndrs/react-three-a11y to add a11y to our application
- Particles
	- Creating particle effects
- Using Environments
	- Using https://github.com/pmndrs/drei and seeing what it has to offer. Focus on environments
- Post Processing
	- Add some effects like scanlines
- Simple game???
	- Final video could be showing how to make the simplest video game, like arkanoid or something