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
this is possible using drei/Html. some impressions:
https://twitter.com/0xca0a/status/1398633764931178498
https://twitter.com/0xca0a/status/1407758860203573251
Related
I'm sure this has probably been asked before, but I'm fairly new to threejs (and React Fiber), so part of my problem here is not really knowing how to phrase what I need..
I know what I want to do must be possible, because it is possible to drag and drop any gltf file here: https://gltf-viewer.donmccurdy.com/ and see it rendered correctly.
So, what I want to do, is create a loop which will traverse all parts (nodes?) of a gltf model with/without animations (such as this one) and output it as part of a webpage.
Currently, I find myself tediously trying to add a <mesh> for each and every part of a model, and I know there must be an easier way.
I have found the source-code for the viewer here, but as mentioned, I'm still quite new to this library, so any help (or link to a similar question), would be appreciated.
I just recently started out with converting my web3 apps in NodeJS into web based apps using React and the Web3UIkit. But have a hard time getting into the flow of how React works and thinks with this states, rendering etc. I checked out the reactjs standard tutorials numerous times, and it all makes sense then, but in my particular use-case I cant seem to achieve what I want. Even not after trying numerous array examples from here.
The case:
I fetch all Ethereum mainnet transaction from block x until block y and filter/sort these into a Array. Then I count all transfer made on the same contract address to filter out hot/trending contracts only, and save the stats of it in a new Array with all the contractinfo like tokenname, counted transfers etc. Which all goes fine and I get the result I want whenever I console.log the array (see screen).
But now, I want to display the contents of this array organized and visually appealing trough React/Web3UIkit and let it update in realtime (or like each 5 seconds), but I cant seem to find a way in doing this properly. In fact, I cant even get any of the info from the array onto my screen.
I attached a screenshot to show what my console.log currently shows when I output, to give an idea how the information is stored and the array is structed. Anyone has any solutions which helps me to make sense of this? Hope so! Since I feel like I'm missing a piece in the puzzle, but cant find it.
I am in the process of learning ReactJS (NextJS) with Material UI. Currently i am trying to figure out, the best way to implement "interconnected lists". My idea is, to represent a hierarchy with n levels in n different lists side by side.
What would be the best approach for something like this? All i can think of is a huge mess off callbacks all over the place in one main file which coordinates everything, with one callback to the 1st list rendering the second list and the 2nd list rendering the 3rd list etc.
Note that i am new to JavaScript and to WebDev in general. I would only like to know, if that's the way to go or if there is an easier, simpler way.
I've got this sort of general question when it comes to requiring images in React Native. I've got this application that uses the same little red x and green check mark for form validation 6-8 times in a single form component. How it stands right now, I have a require in every 'source' prop when used.
Is it best practice to require the image once at the top of the component as a variable and just use the variable 6-8 times instead of the calling require for each one of them?
Yes, requiring it once at the top is far superior.
But hey, you can go even further. If this is an icon you need to use across the app, it might be worth making a very very simplistic component that renders this image. It's easier to reference <GreenCheck/> than to require an image and stick it into an img tag repeatedly.
my premise was wrong. while AngularJS was certainly slowing things down, it was not due to the problem I describe below. however, it was flim's answer to my question - how to exclude an element from an Angular scope - that was able to prove this.
I'm building a site that generates graphs using d3+Raphael from AJAX-fetched data. this results in a LOT of SVG or VML elements in the DOM, depending on what type of chart the user chooses to render (pie has few, line and stacked bar have many, for example).
I'm running into a problem where entering text into text fields controlled by AngularJS brings Firefox to a crawl. I type a few characters, then wait 2-3 seconds for them to suddenly appear, then type a few more, etc. (Chrome seems to handle this a bit better.)
when there is no graph on the page (the user has not provided enough data for one to be generated), editing the contents of these text fields is fine. I assume AngularJS is having trouble when it tries to update the DOM and there's hundreds SVG or VML elements it has to look through.
the graph, however, contains nothing that AngularJS need worry itself with. (there are, however, UI elements both before and after the graph that it DOES need to pay attention to.)
I can think of two solutions:
put the graph's DIV outside the AngularJS controller, and use CSS to position it where it's actually wanted
tell AngularJS - somehow - to nevermind the graph's DIV; to skip it over when keeping the view and model in-sync
the second option seems preferable to me, since it keeps the document layout sane/semantic. is there any way to do this? (or some, even-better solution I have not thought of?)
Have you tried ng-non-bindable? http://docs.angularjs.org/api/ng.directive:ngNonBindable
<ANY ng-non-bindable>
...
</ANY>