Three.js is awesome 3D library that I play with since it came out. Building little experiments, playing with shaders etc are always fun. Why not building your own portfolio by using one of your favourite library?

First thing was to decide how the scene is gonna be. Because this would be a kind of web site, I used flat colours and textures without lighting. So I created tens of randomized triangles that are dancing. Colours seem like random but they are actually main colours of the projects I developed. Background triangles are linked to projects. So whenever you view a project, only the triangles that have the project’s colour become visible.

Three.js supports text models, but projects’ descriptions are too long for this. More vertices = lower fps. So every text you see is actually high res png images. Addition to that, project previews are high res videos. I first screen recored the applications, converted them to GIF and exploded it to frames, changed the texture every second. This dropped the FPS dramatically. Instead, I create a video element, play the video, draw it into an image object, and change the texture in runtime. This saved 5-10 FPS at least. I stop video rendering, and the video itself during any kind of animation.

Whole source is here.