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!
3 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. 
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. 
1 Like
Hey, thanks for the info. You are correct, you do have to manage the size in JS. I was able to get the orientation figured out, and had to put it down for a while after that.
Though, I’m not entirely sure the Custom Element is behaving as expected. I plan on looking into in the future. Want to make sure something like 100% width and 100% height is working correctly, but it’ll probably be a while before I can get into it. Just didn’t want to leave you hanging on a response. I appreciate the input!
@fresh_imp
I always create the outermost div container inside the custom element and use it as the reference for everything. By setting its width and height to 100% and setting margin and padding to 0, you can link it to the size of the custom element as seen in the Wix Editor. You can then place the actual content inside this container.
In your case, that content would likely be something created with Three.js. To make it responsive, you can set up an event listener to detect changes in the container’s size and dynamically scale the Three.js content with JavaScript accordingly. 
1 Like
Yeah, I’ll have to tinker with it some more. I was hoping I could make the Custom Element the parent container, and while it is, it seems to have no response to the content inside of it. And then the content inside of it doesn’t seem to have an effect on the content surrounding the Custom Element. When adding Attributes to the custom element it didn’t have the expected effect. So, I think manually making the CSS of the Custom Element match that of what it’s content is doing will be the key
Indeed, achieving responsiveness with custom elements requires some expertise. If implementing responsiveness with custom elements proves difficult, I think it might be a good idea to start with an iframe element. It’s easier to implement using an iframe. 
1 Like
Hmmmmmm, maybe so. I’ll have to set some time aside to try both.
The iframe (HTML Component) makes it easier to consider responsiveness because the area visible in the Wix editor (which is a self-contained HTML space, unrelated to the Wix site) becomes the entire working environment. Essentially, you only need to think of what’s inside that frame as a separate world. In the standard Wix editor, using custom elements had advantages for making 3D content in Three.js responsive (because custom elements made it easier to respond to changes in the browser window size). However, in the Wix Studio Editor, the iframe element itself can now scale responsively as a standard feature. As long as the content inside the iframe is responsive to changes in the iframe’s size, it should behave similarly to how it would with custom elements, reacting to browser window size changes. Therefore, implementing it with an iframe should be sufficient for now! Probably! 