An intro to Three.js and React :) Workshop materials and demo from HackTheNorth 2021

🚄 Speedy 3D - A Quick Intro to Three.js & React

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

⏱ What's to come

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!

Learning Outcomes

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 :)

Prerequisite Knowledge

In order to get the most out of this workshop you should be comfortable with the following concepts:

• Basic JavaScript Syntax
• Basic React

Pre-Workshop Checklist

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

🥳 Setup

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.