Satoshi's Palace

For this project, I created a 3D palace and a camera system that navigates through it based on the current webpage, along with other graphic assets like logos, and loading animations. Of course, the main focus was the 3D environment.

source code

The scene lay out is done in Unity, then exported as a JSON into Three.js. Each webpage / URL corresponds to a specific room in the 3D scene.

The camera is controlled though a 'control point network'. Each control point consists of a 3D position, a room ID (-1 if it's not a room control point), an array of one or more connections to other control points, and its own ID (its index in the control point array).

In the JSON, a control point connection is simply one integer--the index / ID of another control point (that's usually close by). This later gets updated (using Dijkstra's algorithm) to have an additional integer that's used as a bit mask, where each bit corresponds to a room ID. This lets us know which connection to follow to get to a desired room using the shortest path.

These control points / connections are used to create a B-Spline, which is rebuilt every time the webpage / URL changes, and is what the camera samples to move through the scene.