Immersive AI Worlds 🌎 on your Website in Seconds

Key Takeaways

what if I told you that this here is a completely AI generated world that you can integrate as a section perhaps on your website or your portfolio and that the users can explore by simply moving their Mouse well today I'm going to show you exactly how to do just that in addition I'll show you how you can utilize 3js to actually integrate it and get it working on your website so let's get started first you want to visit this website address skybox.blockadelabs.com now what's great is no accounts required and it doesn't cost a penny which is amazing in the current ERA of AI so let's give it a prompt Snowy Mountains during night time now next we have to choose a category let's choose realistic [Music] and would you look at that it's not quite night time but there are stars in the sky in mountains or indeed snowy next to generate click the download icon now if you open up that JPG file in Photoshop it's quite large at over 500 kilobytes so you could always reduce both the width and the height as well as the quality to reduce that to a more suitable number next the HTML is super simple just specify development for the 3js scene and import a Javascript file now if you know anything about 3js you know there's a lot of boilerplate code which we'll go ahead and omit here if you want access to the full project files check the link in the YouTube description but to focus on how this effect works we simply load the material we create a sphere and then we flip the geometry of the sphere inside out so that we can see the texture from the inside we map the material to the text and add a sphere to the scene and after adding 3js orbit controls and a little bit of idle animation here we go this is the result very cool stuff and potentially very cool use cases for use on Creative Web projects like on your portfolio for instance for the fun of it here's a few more prompt demos floating Balloons with surreal Style [Music] thank you let's change it to dreamlike and then specify jungle scene with cats [Music] foreign ly let's choose nebula and then specify outer space spaceship if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy