Hello!
I am trying to create a 3D interactive model of a computer. Basically, its a portfolio website and I want the user to be able to browse through different screens INSIDE the 3D rendered computer screen. I have used ThreeJS to import a 3D Computer model, added the lightings and will use GSAP for smooth camera movements. I’m stuck on how I can make the Computer’s screen interactive, and what needs to be done. Is it something related to Blender?
So I design the whole website in the JSX file itself, change my renderer and thats it?
Thanks!
if you use jsx you have tools that do it, css3d imo can’t occlude but drei/html can.
interactive html inside three (computer + screen) Mixing HTML and WebGL w/ occlusion - CodeSandbox
a scene rendered into a screen Monitors - CodeSandbox
portals https://codesandbox.io/p/sandbox/enter-portals-9m4tpc?file=%2Fsrc%2FApp.js
ps is more box, but simpler
rendering a scene into a texture https://codesandbox.io/p/sandbox/drei-rendertexture-0z8i2c
that’s just a link to an example though. how will that help with learning how to put a working screen into a 3d model?
If you click the <> in the lower right it shows you the source code.
You could have a css renderer with an iframe to a website as the “screen” and then a webgl renderer in front of it, with your 3d monitor model, and the screen rendering transparent to the cssrenderer behind it.