Independent Capstone Project for Epicodus: Learning Three.js and React Three Fiber to experiment making a 3D interactive website
- Check it out! Filmer's Three.js experiment.
- Credit to DesignCourse for providing awesome tutorial content and boiler plate projects to get started with Three.js DesignCourse;
- React
- Three.js
- Three Fiber
- 8:30: create github repository
- 8:40: research Three.js and React Three Fiber docs
- 9:30: initialize proj to github
- 9:30 - 11:00: research example projects, scrub YT for examples
- 11:00 - 12:00: watch a couple different YT videos, bookmarking the ones I found useful to a playlist
- 1:00p - 3:00p: watch select videos that interested me the most
- 3:30p - 4:00p: capstone proposal
- 4:00p - 5:00p: following suggested links on the docs and start to implement sample code
- 8:30: reading through different documentation to find a starting point to work off of
- 9:30 - 10:30: follow along with Three.js fundamental tutorial to set up a scene
- 10:30 - 11:30: trouble shooting, debug, tutorial setup
- 12:30 - 1:00: learned how to set up my first 3D scene with an working camera to orbit around a 3D mesh.
- 2:00 - 3:00: research, scrubbing documentation
- Rotate the sphere by moving your mouse left or right
- Rotate the particle system by moving your mouse up or down
- Zoom in and out by scrolling your mouse wheel or holding middle mouse button and moving your mouse back and forth
- Pan around the scene by holding right click and moving your mouse around
Download Node.js. Run this followed commands:
# Install dependencies (only the first time)
npm install
# Run the local server at localhost:8080
npm run dev
# Build for production in the dist/ directory
npm run build