DEV Community

loading...
Cover image for I built an interactive 3D photo display with JavaScript

I built an interactive 3D photo display with JavaScript

Chris Greening
Freelance Python developer | Probably programming right now | Coding, hiking, and rollerblading
・3 min read

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 with JavaScript and Three.js

Interactive photo portfolio demo


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

Interactive floating periodic table of elements

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 before and I'll say it again: I'm not that great at JavaScript.

The most important part of my development workflow always has been and always will be 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

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

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!

https://www.christophergreening.com/photography

Let's get in touch

I LOVE connecting with other developers.

Drop a link to your portfolio so I can check it out 😄 (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:

or better yet...

try it out for yourself!

Discussion (26)

Collapse
larsejaas profile image
Lars Ejaas

Wow! That's really cool! Never really got around to learning Three.js - I always tend to get amazed of the level of cool stuff you can create with it!! I have my own portfolio at larsejaas.com/en/ - although it doesn't have anything this cool 😂

Collapse
chrisgreening profile image
Chris Greening Author

YES this is exactly the type of portfolio I love seeing; fantastic job Lars!!!

Absolutely love the floating phone animation - something like this is on my agenda of things to learn how to do

Collapse
larsejaas profile image
Lars Ejaas

Ahh - glad you liked it! It's actually a couple of years old - I have burried myself in webdevelopment stuff like React, Typescript and Headless WordPress lately.

I actually feel I need to do something more on the creative side soon again! I have made the animation using GSAP and drawing the phone in InkScape - GSAP is nice! Although I feel it's a bit troublesome to work with in React at times!

Thread Thread
chrisgreening profile image
Chris Greening Author

Awesome! I really gotta pick up React or Vue or something - I don't know any frontend frameworks/libraries aside from working knowledge of jQuery 😬 endless list of things I wanna learn just not enough time lmao

Collapse
codeitout_ profile image
Codeitout

It's awesome

Collapse
chrisgreening profile image
Chris Greening Author

thank you Namita!!! 🙌

Collapse
bennyboy_jp profile image
bennyBoy_JP

Great work Chris! It looks awesome and is a very cool concept for photographs.

Collapse
chrisgreening profile image
Chris Greening Author

Ayy thanks so much my friend!!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Crazy and amazing! Great work 🔥

Collapse
chrisgreening profile image
Chris Greening Author

Thank you my friend!!!! Appreciate the feedback :D

Collapse
marco23 profile image
Rishov Saha

Really cool stuff

Collapse
chrisgreening profile image
Chris Greening Author

Thank you so much Rishov 😄

Collapse
lepinekong profile image
lepinekong

I like 3D must learn it ;)

Collapse
marianpirvan profile image
marianpirvan

It's love it, for me look like in SC diration, you wanna shared code for this?

Collapse
chrisgreening profile image
Chris Greening Author

Thank you!

I will share it open source sometime soon 😄

Collapse
parth_codes profile image
Parth Bhardwaj

It's amazing ! Great work :D

Collapse
chrisgreening profile image
Chris Greening Author

Thank you so much Parth!

Collapse
bcrypt profile image
Beckett Normington

When I saw this a few weeks ago, I was blown away. Great work!

Collapse
chrisgreening profile image
Chris Greening Author

As always your support means the world Beckett, thank you!

Collapse
garimasharma profile image
Garima

This is so cool ! ✨

Collapse
chrisgreening profile image
Chris Greening Author

Hey Garima, thanks so much 😄 it means a lot!!

Collapse
sachindahal profile image
Sachin Dahal

Chris Bro!
It's really amazing. You've done this with a cool concept

Collapse
chrisgreening profile image
Chris Greening Author

Ayy bro thanks so much!!!

Collapse
chrisgreening profile image
Chris Greening Author

Let's connect on LinkedIn or Twitter!
LinkedIn: linkedin.com/in/chris-greening-dev/
Twitter: twitter.com/ChrisGreening

Collapse
devfranpr profile image
DevFranPR

Wow this is amazing :O

Collapse
chrisgreening profile image
Chris Greening Author

Ayy thanks so much my friend, glad you appreciate! :D