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

Useful links:
Code template used : github.com/samuelOsborne/reac...
Macbook model: market.pmnd.rs/model/macbook
Drei: github.com/pmndrs/drei
Henry Heffernan's portfolio website : henryheffernan.com/
Say hi! 👋
My socials:
TikTok: / sams.code
Discord: / discord
Twitter: / osb_sam
Instagram: / sams.code
Chapters:
00:00 Intro
00:30 Starting the project
01:38 Creating the laptop
03:10 Adding controls
05:25 Adding the iframe
06:30 Adding CSS
07:15 Adding parameters to the iframe
09:40 Finished project
10:00 Outro
#developer #sideproject #javascript #dev #opensource #threejs #cgi #3dmodelling #threejsdev #retrocomputing #webdev

[@TYDHESIGANL]

Awesome video that i looking for long time . thank you bro !!

[@user-lw9hx6kk8q]

Exactly what I was looking for, thank you very much !

[@absherstudy2850]

So much valuable and useful information in a short, concise video! Thank you so much for this!

[@mkribakarthik75]

Amazing 🤩 Keep rocking 🥰

[@valentinkrajzelman4649]

pretty cool dude!

[@dariuspop3677]

respect brother for using arc

[@luniacllama8373]

Who thought that was bill gates in the beginning? 🤣 Cool content ,thank you!

[@ahmedsyed671]

as soon as you add occlusion="blending" it will create white background do you know how to remove it ? (try to add border radius to your ")

[@edmund0dao]

How would you do this without hardcoding rotation and position of the ?

[@danneytee]

Thank you so much for this man. I have a question, i have a tree in front of my laptop, and the Html is visible even when i have the tree as closest distance to my camera. How can i fix this issue?

[@kriscollins1541]

i had the same issue with the Html being visible on top of my navbar, i played around with the zIndexRange={[0,1]} and managed to get it to the behind the navbar, maybe this will help?

[@Fanaro]

Share the code in its finished for as well...

[@ilya_evtushenko3141]

Cool video! But can you tell me how it would be possible to implement such a solution on vanilla JavaScript and Three js? I would be very grateful if I could help!

[@samosborne]

Hi, that would be quiet a lot of code, Im not going to be making that tutorial anytime soon, perhaps you can get around it by using Spline and some crafty JS

[@evilcandybar1]

looks like it can be done with CSS3DRenderer and CSS3DObject. checkout three/examples/jsm/renderers/CSS3DRenderer

[@user-tr9jx4sx1l]

Thank you for this video. I want the complete code files from you and an explanation of how to download and work. Also, if you add the office, coffee and others, it will look similar to it, but the laptop will be great. Thank you again ,,

[@markopolo2224]

i cant see the text bro its so small
make it bigger please

[@samosborne]

Will do for next videos, sorry about that

[@codingawarenes]

the starter code in typescript man ..🙄🙄