I built an interactive 3D photo display with JavaScript
Tags: webdev, javascript, showdev, threejs
Published: 2021-06-27 20:46:54

I am a _sucker_ for interactive websites.

The developer portfolios that have stuck with me have always been the ones with bold designs and animations - the ones that give each user a personal and unique experience that they will remember for days, weeks, and even months down the line.

Despite having limited JavaScript knowledge, `this` (pun intended) desire to create something memorable is what lead me to build an [interactive 3D photo display](https://www.christophergreening.com/photography) with JavaScript and [Three.js](https://threejs.org/)

![Interactive photo portfolio demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8mn4lk9tybck338vara.gif)

{% embed https://www.christophergreening.com %}

---

## And you may ask yourself, "Well... how did I get here?"

Ironically I never originally planned on including photography in my portfolio.

Although it was an important part of my time spent in quarantine, I figured software developers were software developers and no one was going to care about my photography...

... until I saw an example of an interactive periodic table of elements on [Three.js' website](https://threejs.org/examples/#css3d_periodictable)

![Interactive floating periodic table of elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul73d2dnh0jxrzrxy23n.gif)

What does this have to do with photography?

_Nothing!_

But it gave me the inspiration and foundation I needed to build my photo display. 

---

## Standing on the shoulders of giants 

I said it earlier and I'll say it again: _I'm not that great at JavaScript_. 

The most important part of my development workflow has always been to just start working on a problem and figure things out as I go. 

I knew I wanted to use Three.js - I just didn't know how so I went on their site looking for some sample code to hack away at.

Luckily the periodic table instantly caught my eye. I downloaded the source code, fired it up on localhost, and began learning what each piece did. 

And then the thought struck me: _wouldn't it be sick if this could display `<img>` tags?_

So I tried it. 

![Interactive image display in shape of sphere](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05som0ur858fomlhdf1s.gif)

And it worked.

---

## One Eternity Later

After many hours and an embarrassingly large amount of coffee  (seriously don't get me started), I have come away with a product I'm proud of. 

I've implemented a simple CMS with Flask so I can upload and edit photos as needed. I've added links to each photos respective Instagram post (cross-promoting content all day every day). And most importantly I have learned _A LOT_ about JavaScript, Three.js, and UI/UX along the way. 

![Cycling through different shape configurations of the photo portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cobwbw6dj4cvotirouul.gif)

It ain't much but it's honest work and I'd love for you to check it out and give feedback in the comments below!

{% embed https://www.christophergreening.com %}

## Let's get in touch

I LOVE connecting with other developers. 

Drop a link to your portfolio so I can check it out :smile: (and if you don't have a portfolio, tell me about a project you're proud of!)

If you want to see more of my work check out my JavaScript arcade game blog post:

{% link https://dev.to/chrisgreening/i-added-a-javascript-arcade-game-to-my-portfolio-s-homepage-1jmf %}

or better yet... 

[try it out for yourself!](https://www.christophergreening.com/home)