Interactive Music Video with THREE.js

Hey all! What do you think of this music video using THREE.js?

It pays homage to iconic ladies of the 1970s. Source code here:

A rendering of the animation:

A making-of video:

7 Likes

Thanks for that important contribution, Brian.

I have some feedback. When I run your girls under Windows+XAMPP+Chrome, I get the whole experience … except for sound, that is.

In your website, everything is groovie.

http://splicy.com/

All evidence points to the sound in Three.js being broken.

Can you folks out there confirm/refute my finding?

TIA,

-Ramon
JFK Numbers

ps: Problem fixed. The MP3 file was missing. See it below.

I think some of the images are blocked by my ad blocker:

ssss

Haha, so for future reference I should never have an image file name start with “ad”. Did the animation load at all? I actually don’t think those images are used, so it should be fine.

Apparently haha.

Everything appeared to work until I got to the “click/space to start” screen but then clicking did nothing.
Tested again with adblock off and it loads ok. However, the music pauses for 1 seconds every 5 seconds or so. Otherwise, it’s great though.

What’s your browser/system?

Chrome on windows.

Nice!

Definitely not the first JavaScript music video ever though…

Here are a couple I worked on a decade ago:


6 Likes

Can’t wait to see more though! :grinning:

Dang – great job! The coding of the ROME song is fantastic. Inspiring.

2 Likes

@mrdoob didn’t you make a Chemical Brothers video too? Is that still up somewhere?

I ended up going on a JavaScript music video tour - there are loads of good ones. Although someone really needs to clean up the dead links from this page.

1 Like

wow, just as I posted my own, I find yu doing something similar :smiley:
I chose to build a world into which I place the music video created by my friend who is a film maker… he did not wat to show a house of cards in the video, so I decided to build one my own :wink:

As for yours, it seems to be loading veeery slowly… is your server throttled?

1 Like

Please find attached the audio track that is missing from the GitHub distro. You need to put it inside a folder aptly named “music”

-RFH

Yes!

Here you have:
https://within-unlimited.github.io/neon-lights/release/

2 Likes

BTW I’ve pushed some minor changes to github – one was removing those images with “ad” in the title. Thanks for the catch!

1 Like