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

24 points by mackopes 11 months ago | 11 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

  • genezeta 11 months ago
    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."

    • mackopes 11 months ago
      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!

      • genezeta 11 months ago
        > 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.

        • ezekg 11 months ago
          Doing a black hole would be pretty neat if it looked like Interstellar. Lots of possibilities i.r.t. color.
      • AliMammadli 11 months ago
        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

        • dole 11 months ago
          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.
          • mackopes 11 months ago
            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.

            • username923409 11 months ago
              Luca Francini - Solitude

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

            • hollowcrown 11 months ago
              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.
              • mackopes 11 months ago
                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.
              • shove 11 months ago
                I have one of these :)