Mood Board
Exploring React, Three.js, WebSockets, Blender and Slack
This project was an experiment to pull together a number of technologies I wanted to learn more about and package them up into something small,
yet pretty. Scope is ever my enemy, so this was a pretty tiny setup to keep it tight.
In a nutshell, it is a 3D React scene utilising
ThreeJS
, it communicates with a Slack instance, receiving notifications and displaying them in
real time.
The Slack API
is super flexible and I would highly recommend checking it out if you haven't played with it before!
Whilst core three.js in itself is great, it doesn’t scale well and it can be tricky to manage a project with lots of pieces. I wanted to see how I could manage that better so this project utilises react-drei & react-fibre to allow the project to scale by utilising React’s component based design. I highly recommend building 3D work in this way as it just makes sense. I'm also using react-spring here as I had never used it before (animejs is my usual goto) and wanted to check it out.
Using HTML in 3D
It’s important to note that message content themselves are actually still HTML. Drei has an HTML wrapper that allows us to position HTML in 3D space so the message box is a mesh (primarily so it has a little thickness and catches the light nicely) but the content is vanilla HTML using Material UI Typography.
Debugging with dat.GUI?
I really like this library. It's simple yet really effective. Why do I like this? Have you even been building out a 3D application and found yourself tweaking a variable 0.001 points at a time? This happens all the time when working in three.js as you are placing things in 3D space. Do you want to move them individually, save and refresh? Nope! Hooking up dat.gui gives you nice little handles to update variables and see the results instantly. I find myself having core elements that stay throughout the project and others that come and go as I'm working out the details and want to save time.
