rotating.boston - making of

The idea behind this came to me after running across a .boston domain (probably toot.boston or better.boston) while scrolling Fedi and seeing Tris' rotating.horse site. The vision I had in my head was of a 3D model slowly spinning, but what would it be a 3D model of? What's recognizable as Boston and also either already modeled or is simple enough that I could dust off my skills with Autodesk Inventor and model it myself?

The answer is Boston's angular and brutalist City Hall. I heard somewhere that the city government provides 3D models, so I looked for one, but it lacked a lot of the building's shape.

This simply won't do, so I looked for a better model and found one in the SketchUp 3D Warehouse.

There was a button to download it for free after creating an account, but there's gotta be a catch, right? The license even allows commercial use, so that probably isn't it.

Ah. Right, there's the catch.

To explain why this is a problem, I need to talk about some history and where this model came from.

SketchUp used to be owned by Google (they bought its original creator rather than developing it themselves) and was closely integrated with Google Earth, with features to upload and geolocate models of buildings. Google later sold SketchUp to Trimble (known for their GPS and surveying equipment) in 2012, since it was rather far from their core business of search and search accessories. From 2007 (shortly after Google's acquisition of it) until 2017, when it was replaced by a free web version, a free desktop version of SketchUp was available, with the ability to export SketchUp models in other formats.

The new web version has locked model export behind a paywall, so this model is stuck in a format basically nothing can open. I found a Blender plugin that claimed to be able to import SketchUp files, but I couldn't get it to work on any version of Blender I tried. (Blender scares me anyway, so perhaps it is best for me to avoid it.)

Not expecting to find anything, I searched "skp to obj converter" and found a website that claimed to do just that, although it didn't inspire much confidence. I uploaded the model and, after it spun for a minute, got a zip file back containing an OBJ and a MTL file. I imported the OBJ file into Blender, and, after struggling with the unfamiliar controls for a minute, saw what could be the model I was looking for.

This looked maybe recognizable enough to rotate, so next I had to figure out how to do that.

From my very brief research, I settled on three.js, a 3D and graphics library often used for browser-based games and such things. Its documentation even starts with creating a spinning cube, so it seemed perfect.

I then had to replace the cube, which was simple enough to express in just three lines of the example code, with the model of city hall. Three.js includes an OBJ loader, so I took the example code for that, replaced the model with the output of the converter, and got something.

That definitely looks like it could be part of Boston City Hall, so I adjusted the scale (0.001x scale should be enough, right?).

Ah yes, much better. The lighting still looked weird at this point, but that was a problem to deal with later.

I added axes so I could see what I was doing and moved it around a bit to get a good angle on it. I also turned on the animation feature of the orbit controls so that it would spin. (The model itself does not rotate; the camera orbits around a stationary model.)

It was looking pretty good at this point, but the model as it appeared on 3D Warehouse had textures and I thought it'd look better as not just a white shape in the void. The converted model did include a MTL file, but it was essentially blank, so I had to look somewhere other than that converter.

Not able to find any third-party tools that can open SketchUp (SKP) files properly, I signed up for a 7 day free trial of SketchUp itself. Starting the trial also unlocked downloading a GLB (also known as GLTF) file of the model from 3D Warehouse, which three.js has a loader for.

I swapped out the OBJ loading code for GLTF loading code and, bam!, I had a textured model of Boston City Hall spinning in the void.

It looked a little dark, so I tweaked the lighting and turned down the decay.

Since I had access to the full version of SketchUp for the next few days, I opened up the model, removed most of the flat plane around it to make it look better, and exported it again. This had the welcome side effect of making the model file a lot smaller.

Even though the model was smaller now (4.9 MB instead of 13 MB), it still took time to download, so I added a loading screen using the same percentage downloaded that the example code logged to the console and a rotating emoji that could be used to represent a city hall.

With that, the project was pretty much done. I bought the domain rotating.boston, pointed it at my server, set up TLS certificates, and it was good to go.

Since the site went live, I've thought about making another version featuring a larger 3D model, perhaps one of the whole city, but I think the joke is played out at this point (at least for me).

Thanks for reading!