How To Use iframes With Threejs (React-fiber + drei)

hey everyone how's it going in this video I want to show you how to create this technique you're seeing right now having an iframe inside of a monitor or laptop model using 3js react fiber and Dre I discovered this technique from a portfolio website [Music] and I wanted to learn how to recreate it myself and then teach you guys how to do it as well so that's what I've done this is what this video is for let's get started so I'm going to start off in my rack 3 fiber and Dre boilerplate code and you can go ahead and download that from the GitHub repository link will be in the description head into the project npm install and npm run Dev and inside the index HTML we've got our index.jsx module in here we're linking to some CSS including react Dom reactive fiber and our component code so the laptop which we're going to be making and we're going to have a canvas 45 fov value file value position and our laptop that's important as well if you want to see what you're writing to appear so we're going to head into the laptop component and I'm exporting it and let's go ahead and start off with importing our model so I'm going to write component's computer actually let's call it laptop laptop is use gltf and let's pass a URL so for my model I'm going to head over to PM men DRS market and grab this MacBook model and copy the direct link so I'm going to paste that we can then return and let's add an environment for the preset I'm going to use the warehouse preset because I like how the lighting is in it and let's at uh laptop so primitive object laptop dot scene oops that top dot scene close that off head over to localhost we've got our laptop and we've got some some Warehouse lights let's position it on the Y and bring it down a bit try that that's a bit much minus 1.2 that's great at the moment it's static we can't really it's not moving it's not doing anything it's just loading the object and the warehouse environment map um so let's change that up let's wrap our primitive object inside some presentation controls this is coming from from Dre and let's go and see how that looks presentation controls okay so yeah so now we can spin our model there we go that's nice [Music] um yeah so if you if you want to limit it you could add uh some some rotation you can even add some polar and azimut parameters which we're going to be doing just in a sec but as you can see if I click outside the laptop we can't rotate it so if you pass Global you should be able to rotate it all over the screen now that's good and you can add polar so this is going to sort of um block it on the on the vertical axis so you can't do stuff like this um or as far so let's try that out so there you go I can't sort of rotate it up and down as much and if you want the same um the same effect sort of dragging it left and right you can add as you moved with the same values and that sort of locks it in place as well so that's not bad uh you know a few lines of code we've already got that up that's pretty good going let's um go ahead and start adding our our actual website inside it so I'm going to open up this primitive I'm going to include the HTML component and inside my HTML an iframe and this is going to link to your portfolio website I'm just going to link it to one of my websites go and there's a problem HTML is not defined and Okay so the Auto Import didn't work there we go Okay so there is my website um yeah it's uh stuck in the middle of the page and it's very small so let's go ahead and try and try and figure this out so inside of our CSS which is included uh in the index.jsx don't forget to change that if you change the the file name um we are going to add some CSS so I'll get a cooler class laptop and then Target the iframe so uh let me just double check where you add it so okay so on the HTML component it's called wrapper class and let's call it laptop and laptop inside of here we can set the width and the height of our iframe go ahead and do that so has that worked out okay so we've got a big website however it's not very well positioned so this is where you have to then change the position attributes of the actual HTML so position [Music] and you'll have to play around uh with these values depending on your project so let's do that XYZ and let's do transform so that it's oh my gosh so it's actually transforming with the laptop model um let's see what else we can do okay uh uh okay so one thing I forgot was to add the distance Factor and this is important to stop having it blow up in our faces there we go okay that's better lovely and yeah I can see some white bordering down there but I can still scroll so this could be usable in your project if you'd like um but if you want rounded borders let's go ahead and add all the none border radius let's do 20px got rounded borders that's pretty good um okay let's just maybe 75 970 just playing around with the uh the position so it's very small values you need to to be using 57 got a bit more with bezel down there it's looking pretty good and yeah that's really the um the most of it you can customize this further um as I showed in the intro this is the portfolio website [Music] um so yeah as you see as you can zoom in as you hover over the screen so that's pretty cool and then um it's this sort of Windows 98 theme to it which I think is pretty awesome you can find react libraries or css libraries to to achieve this um so if you want to go that direction he's also got some smudging on the screen which is pretty cool so yeah but this is the uh sort of the basic building block of it and you can take it a lot further as you saw with the the portfolio um so yeah I hope this video helped you out if it did don't forget to like And subscribe for more 3DS builds coming out soon and I will see you in the next one cheers foreign

Channel: Sam Osborne

Views: 7,625

Keywords: developer, sideproject, javascript, dev, opensource

Id: SQRqU3N3ehs

Length: 11min 0sec (660 seconds)

Published: Mon Feb 13 2023