As you can guess from the title that was my goal for the week to learn three js, and get my board to interface with it. I loooove CADDING so three js seemed like the perfect choice of programming language to work with. This was a lighter week so I don't have much to talk about. It was a lot of learning, and I kind of skipped the step where I learn javascript before I start working with something that complicates it, but things went mostly well. I learned all about three js syntax and how to create a scene and add objects to it. My specific goal was to be able to add obj files to to my website that way I can display the CADs I so lovingly talk about. It turns out that this is a bit of a complicated issue. Three js has built in 3d model loaders including one for gltf files, but I couldn't find a way to export my files as gltfs from Fusion for free. There are extensions but they work on a trial basis before you have to pay. So I did a lot of research on how to load obj filesand ran into a lot of dead end before finally discovering that I need to know more about javascript before attempting this. After learning some specific syntax for both javascript and three js, I finally loaded a model. Now all I had to do was get it to interface with a board I built.
For my interface I decided to go for one of my go tos and create a turtle thermometer, during input devies week I designed a temperature measuring board shaped like a turtle... This time I wanted to make the turtle 3 dimensional using CAD models I created during molding and casting week. My three js script displays an obj file of a turtle, and my board sends temperature values that in turn controls its color. My temperature sensor reads the temperature and gives me a value that I then translate and categorize into different temperture buckets. Really cold, cold, warm/perfect, really warm, and super hot. Each of which correspond to a different color. Blue, light blue, green, orange, and red. These colors are then put into the function controlling the Turtles color.
I floundered a lot trying to display my 3D model in threejs, I scoured all over the internet for reasons why the models wouldn't display. I followed countless tutorials but none of them would work. The unlikely culprit was that I was doing more better coding stuff than I had previously, i.e. because of browser security issues the models would not display when running my files locally, i.e. I would have to commit my changes that looked totally incorrect before I could see whether it turned out right or not. Changing the color of the model also turned out to be a challenge. I could set the material of the mesh to be a certain color but changing it was quite difficult, I got around this by not changing the color of the material but the material itself. I created five different materials for each state of temperature. The code exists here .