This workshop was originally created for Hack The North 2021! My personal motivation was to:
- learn through teaching, Feynman technique style
- share some of the (truly incredible) things possible through Three.js
📷 Workshop video found here
📠 Workshop slides found here
👯♀️ My favorite Three.js examples here
A quick intro to Three.js and how it can be integrated with a React based web app. We'll go through objects, meshes, camera settings, materials, controls and more so you can use 3D models in your personal portfolio or hack!
By the end of the workshop, you’ll be able to:
- Set up a React project to use three.js
- Create and manipulate 3D objects
- Use lighting, camera techniques, textures, and more to make your objects come to life :)
In order to get the most out of this workshop you should be comfortable with the following concepts:
- Basic JavaScript Syntax
- Basic React
Before the workshop, please make sure you complete the following items:
- Installed web IDE. I’d recommend VS Code
- Install Node.js
- For the smoothest experience, make sure your Node.js is up to date! We’ll be using it to install packages during the session
To get started, clone the repository and install the dependencies.
git clone https://github.com/ansonyuu/workshop-threejs
cd workshop-threejs
yarn
If you want to start from scratch and follow the tutorial, feel free to switch to the empty starter branch. You can do so by entering the following in your command line. If you just want to see the final demo, feel free to skip this step.
git checkout starter
To run the demo, use the following command
yarn start
And voila! You should see this interactive demo at localhost:3000 in your browser of choice.
