Show HN: Three.js mirror cube that stays in sync | Hacker News Reader

Show HN: Three.js mirror cube that stays in sync

mirror-cube.martinpiala.com

24 pointsmackopes11 comments

Hello HN,

Mirror Cube is a Three.js based 3D model of a Rubiks cube variant. It keeps unscrambling itself doing random moves, but the moves are (ehm.. should be) synced across all devices.

I built this over one week and I thought you might find it interesting.

Let me know what you think and if you find any bugs!

Martin

Open articleView on HN

It's nice, pretty. Maybe the background is not the best to appreciate the mirror-ness of the cube. I mean, you can see the reflections but there's not much to notice other than the pink and white lines.

It doesn't work on Firefox (128.0.3 on Win10), though. I only get a black screen with the countdown and the info button. There are no hard errors on the console but there are various warnings. In particular there are some warnings about not being able to reconstruct an HDR from hdri1.jpg ("Gain map metadata not found in the file, HDRJPGLoader will render the SDR jpeg") and about some image being too large for a texture ("WebGL warning: texImage: Requested size at this level is unsupported.") or buffers exceeding maximum size ("renderbufferStorage(Multisample)?: Width or height exceeds maximum renderbuffer size."). And from there on a lot of warnings about "drawElementsInstanced: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0: Attachment has no width or height."

Thanks for checking it out! Do you have some suggestions for a more interesting background? I was thinking about adding some planets/galaxies to keep it in the sci-fi and space theme.

And thanks for the bug report. I'll take a look at it this weekend!

> I was thinking about adding some planets/galaxies

That would probably be nice. Make sure there's a nice bright/dark contrast. Right now, with the lines, it works nicely. The only thing is that there's too few things to be reflected.

Doing a black hole would be pretty neat if it looked like Interstellar. Lots of possibilities i.r.t. color.

Nice work! It's hard to make project optimal when working with mirror in Three.js. I use it in my workout demo project that there is big mirror in the gym.

https://workoutme.netlify.app

I like the music, Burial - Archangel vibes from one track. Have it play the next song after it plays the first otherwise it just goes silent, unless it's intentional.

Luca Francini - Solitude

https://www.youtube.com/watch?v=l8fmxHrIt1k

I'll defo take a look at playing the next song after the first one ends. I had this functionality at some point, so if it is not working it's defo a regression. Will fix it.

Btw, I am happy you love the music! It's royalty free music I added there, but I should add some credits as it seems many people listen to it. Since I published this last week it used up all my 100GB Vercel allowance and I had to move it to Google Storage.

Really cool! Love your solution for achieving synchronisation, so nice to have the site open on both laptop and phone and see the same movements on both devices.

Thanks! I was initially pondering calculating the moves on the server and storing the state regularly in the DB, so the animation can run forever. But in the end simplicity won and I just reset the animation every 24h. The cube is usually "as scrambled as it gets" after 20-30 moves anyway.

I have one of these :)

Reply on news.ycombinator.com