DEV Community

Cover image for Project 75 of 100 - An Introduction to Three.js
James Hubert
James Hubert

Posted on

Project 75 of 100 - An Introduction to Three.js

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

No long post today because I just ran a half-marathon and am completely beat. You're also going to get mad at me because this is a pure Javascript project and not React. But wait- is it possible there's some link here between Vanilla JS and React?

One of the biggest takeaways for me from this project is Vite, a lightweight bundler that allows you to use node packages in your project without React. No configuring webpack like the old days, just type npm run dev in your browser and you're ready to code. It was remarkably easy to use and felt familiar to create-react-app.

Here (link) is the wicked tutorial from Fireship on Three.js- I had an absolute blast making this. Tomorrow maybe a React version?

The only issue I ran into is that Vite seems to perform a chunking operation on build that doesn't allow any dependencies to be above 500k, which is why some cool graphics are not showing on the live project site (link at top).

Still though, I couldn't help but think of all of the wonderful possibilities for Three.js- from Oneohtrix Point Never to Homer Simpson.

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.

Top comments (0)