DEV Community

Cover image for I built an interactive 3D photo display with JavaScript
Chris Greening
Chris Greening

Posted on • Updated on

I built an interactive 3D photo display with JavaScript

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

Chris Greening - Software Developer

Hey! My name's Chris Greening and I'm a software developer from the New York metro area with a diverse range of engineering experience - beam me a message and let's build something great!

favicon 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

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 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

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!

Chris Greening - Software Developer

Hey! My name's Chris Greening and I'm a software developer from the New York metro area with a diverse range of engineering experience - beam me a message and let's build something great!

favicon 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 😄 (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!

Top comments (27)

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

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

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

thank you Namita!!! 🙌

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Crazy and amazing! Great work 🔥

Collapse
 
chrisgreening profile image
Chris Greening

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

Collapse
 
lepinekong profile image
lepinekong

I like 3D must learn it ;)

Collapse
 
chrisgreening profile image
Chris Greening

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

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

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

Thank you so much Parth!

Collapse
 
garimasharma profile image
Garima

This is so cool ! ✨

Collapse
 
chrisgreening profile image
Chris Greening

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

Collapse
 
marco23 profile image
Rishov Saha

Really cool stuff

Collapse
 
chrisgreening profile image
Chris Greening

Thank you so much Rishov 😄

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

Ayy thanks so much my friend!!