Three.js mini-game, pong

So, I wanted to see about getting three.js and some other things flowing in Wix Studio. I ended up vibe coding a little pong game.

https://www.mrtipton.com/three-js-mini-game

three.js seems to work just fine. I’m having some issue really controlling the Custom Element size and making the contents responsive. So, I still have to figure that out… if anybody has any input on that, let me know. Probably need to overwrite some CSS or something…

But, I just thought it was cool to be spinning up three.js in Wix Studio!

Enjoy!

2 Likes

Hi, @fresh_imp !!

I’m not sure if simply adjusting the CSS would make something created with Three.js fully responsive, but in general, custom elements can be made responsive just by modifying the CSS. However, when I used Three.js before, I remember that the rendering area needed JavaScript to resize while maintaining the aspect ratio. :upside_down_face:

Therefore, it seems better to handle the entire responsiveness with JavaScript. Specifically, by detecting resize events and adjusting the size of the custom element accordingly, both the custom element and the Three.js rendering area can be smoothly adapted for responsiveness. :raised_hands: