Week 76: LEGO, physics and portfolios

26 Jul, 2022

This last vacation week, I got around to doing one of the things I love - intersecting different interests. Like every designer, it seems, I’ve been wanting to update my portfolio for a while. Mainly with the work from my time at LEGO.

Another thing I’ve wanted to do for a while was to play with three.js and it’s ability to load LDraw files (LDraw is an open, community-driven standard and repository for LEGO CAD models).

So the idea formed in my head that I could build my portfolio in a more playful and interactive way, using actual CAD models of LEGO models and elements I worked on.

Loading LDraw models

Last time I tried loading LDraw models, I struggled to get custom LEGO models “packed” into a single file that would contain all its “parts” and “subparts”. As usual, that was because I didn’t read the documentation properly. Using the unofficial LDraw parts (thanks Philippe Hurbain, for submitting the little dude), I was finally able to pack LEGO Mario and get him onto the scene:

Unofficial LEGO Mario model loaded into three.js

Unofficial LEGO Mario model loaded into three.js

Physics!

This made me think, it could be fun if Mario was bouncing around on the scene, accompanied by some Goompas and lightly swaying trees. First idea that came to mind was using a physics engine and define the behavior in code. Using cannon.js, I’ve made a little, buggy, prototype of LEGO elements bouncing around in a confined space:

LEGO elements flying around inside a box

LEGO elements bouncing around using a physics engine

But I also realized there might be a different way. I’ve been following Bruno Simon’s fantastic course on three.js, and in the later lessons he teaches how to create animated scenes with beautiful lighting. So I’m planning to try and import LDraw models into Blender and see if that workflow is easier, better and afford more creativity.

What I should have been working on this week

Before I forget, I actually also updated my main site this week! New, slightly fresher design, dark/light mode, and backend based on hugo just like this site.

My original idea for this week, rather than the title of this post, was to write out some of the future ideas on the site. Maybe I’ll get around to it next week 🤷🏼‍♂️, but also I’m going back to work, and pace my side project energy as projects winds up again.