-1

I would like to render DOM elements (which im otherwise using React for) onto (for example) a plane in a 3D (WebGL -> Three.js -> Three Fiber (??? so far best way to go about it as im figuring?)) environment. So basically Id have my containing my entire app lets say rendered, as is traditional, into "root" element. Except I want to inject a layer in that utilizes Three Fiber to render and everything I might want my site (or even just a particular component) to contain onto this plane. Allowing one to make a react site as normal and behind the scenes (probably in index.js or intermediate file) would instead of being rendered "flat" against the screen i could "tilt" the entire site, give it opacity, maybe have multiple webpages all able to be shuffled like cards, sides of a dice, w/e tf. If anybody has any suggestions im struggling with how one could go about this. Im worried i might have to get kind of low-level (which im not totally against), but was hopeful there was some support for something of this nature. So far ive tried even having simple elements like an image element inside a material (element - via three fiber) or inside the mesh element (where the material would go) to no avail. Im just beginning to get my hands dirty but google hasnt availed me much for this project, so I turned to good ol' stack overflow for my first personal request! !

Thanks in advance so much for your time and consideration - cheers, John Thummel

  • That is a **lot** of requirements, Dont ask for too much at a time, please just ask one specific question/problem at a time and Please read the [How do i ask a good question?](https://stackoverflow.com/help/how-to-ask) and the [What questions are suitable?](https://stackoverflow.com/help/on-topic) section of Stackoverflow before asking, regards – I_love_vegetables Aug 04 '21 at 02:00

1 Answers1

1

this is possible using drei/Html. some impressions:

https://twitter.com/0xca0a/status/1398633764931178498

https://twitter.com/0xca0a/status/1407758860203573251

hpalu
  • 1,357
  • 7
  • 12