I have laptop model and i try to apply iframe into the screen, how do i do it?

Questions
1

I have laptop model and i try to apply iframe into the screen, how do i do it?
I found a tutorial but it’s only apply with react fiber and my whole project is base on JS and I cant transfer it now to fiber react, I tried but its too much of a mess.

i need exactlly this - https://www.youtube.com/watch?v=SQRqU3N3ehs but for vanilla js

2

Do you allow the users rotate around the laptop in a way that the screen at any given point would be obstructed by anything or facing back to the camera?

If no - you can use CSS3DRenderer (code in the bottom-right. Keep in mind - iframe contents like that YT video can overlap one another, but they will not interact with any 3D models or parts of the 3D world in three.js. It’s a separate DOM layer rendered above the 3D, iframe HTML will always render above 3D, hence the question at the top.)

If yes - start over, with react-three-fiber. Writing that CSS-occlusion will likely take you more time than doing the project from scratch in r3f. Don’t port - just start over, it’s always a bit annoying, but usually way quicker and cleaner than porting.

3

the problem you will face pretty much all the time in vanilla

  • there is little to no re-usable code anywhere due to limitations with OOP
  • doing things yourself is very, very complex, you need to be well versed in math
  • you will need a lot of code
  • the code will be unprincipled (mutation, traversal, race conditions are common)

in this case for instance there’s css3drenderer, but it can’t hide behind geometry. if you turn the laptop it will be visible on the back. to fix this will cost you an arm and a leg — i’ve seen tutorials adding raycast towards the camera to it, making it invisible if anything in between hits the view. but that would be expensive, and hard to implement.

learn react, pair it to threejs. your threejs experience will be better. this is the only eco system you have in this space, people can share their solutions as re-usables.

all we’re using to do what you want to do is this

<mesh geometry={screen}>
  <Html transform occlude="blending">
    <iframe title="embed" width={700} height={500} src="https://threejs.org/" frameBorder={0} />
  </Html>
</mesh>

laptop with html https://codesandbox.io/p/sandbox/mixing-html-and-webgl-w-occlusion-9keg6?
html annotations that are part of the 3d scene and obstruct geometry https://codesandbox.io/p/sandbox/the-three-graces-0n9it?file=%2Fsrc%2FApp.js
meshes in front and behind an iframe Occluded HTML (forked) - CodeSandbox

4

ps you could check out https://threejs-journey.com it’s an incredible resource. it leads you to threejs and then introduces you to react from scratch, and pivots threejs towards it. the iframe monitor scene is one lesson of it: Fun and Simple Portfolio with R3F — Three.js Journey

5

Not sure how the answer above serves your question, probably quite frustrating trying to get answers at the end of a project and being told “forget learning and throw your hard work in the bin” basically, anyway here’s a great thread and resolve from @trusktr on how to achieve exactly what you require in plain three.js.

Hope this helps…

1 Like