Hi coding wizards community. It's my first experience with react-tree-fiber. I have 3d skinned model which i have placed on canvas. Here is the sandbox. What I want to achieve is being able to place multiple character in the scene based on some event like a button press etc. So far, I could not find anything that could help me achieve my goal. Here is something that could have helped but I am unable to incorporate it in my code. Any help would be highly appreciated!
useLoader caches the data, so both instances are trying to run on the same model. that may work on geometries, but i don't think you can have two skinned meshes reference the same skeleton. not even sure if you can clone it, it looks like that's not possible in threejs.
so the solution is simple. just do it like you would in plain threejs. instead of useLoader load the gltf with the GLTFLoader. it executes two fetch requests, pulls and parses the model two times.
const [model, set] = useState()
useEffect(() => new GLTFLoader().load(url, set), [url])
return model ? <primitive object={model.scene} /> : null
demo: https://codesandbox.io/s/r3f-bones-7zw1c?file=/src/Stacy.js
otherwise i would pose the question differently or make a new one. try to clone the object in a useMemo and find out why it doesn't work. it should, so that could be a bug in threejs.
I’m not sure that the loader is the issue. The loaders work with static models but skinned meshes specifically seem to be the issue. I have tried replicating this approach without success. Also the example code sandbox crashes so a working example can’t be verified
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 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
How do I select option in ant design Select component with any e2e automation framework? (I will be able to rewrite your solution to playwright which I am personally using)
I know the question might seem simple so you might be tempted to suggest something like await click('#option-id') I really wish it would be that easy. I have tried almost everything from simple clicking, absolute mouse positioning, virtual={false}, dispatching custom mouse and keyboard events, combinations of timeouts/hoovers/force clicks and everything else stated in this list unfortunately nothing works.
I believe this question could be answered only by somebody who has this option selection logic in his currently maintained code because the component is constantly updated and any assumptions you make now are going to be different after a year or so.
I also read every issue about this problem and maintainers/developers doesn't seem to care much because they are not using such tests.
I don't want to discourage anyone from answering just so you know I have tried.
The Playwright Element Handle has the Query All Selector. If at least a part of the xpath stays the same, you can use the $$ selector.
The function will return <Promise<Array<ElementHandle>>> which you may then resolve and hook onto the index of the selection you want to make.
For instance -
const selector = "//div[contains(#attribute, 'selection-options-partial-id-text')]"
const allSelectionOptions = await page.$$(selector);
await allSelectionOptions[index].click();
This will work, assuming that all the options under Select must have a common portion in their xpath, or if defined, their data-test-id.
I'm developing a software which is drawing some elements on the screen which is using by mechanical engineers.
I'm string my project data in reducer store. This project data has tons of objects, arrays etc. I mean for each element on the screen, there is a data stored in project.
When user makes an action, I must recalculate project and set it to redux store again for example;
...
case SET_ACTIVE_UNIT:
let unit = action.unit;
project = state.get('project').toJS(); //I'm using immutable
project = ProjectLogic.addActiveUnit(project, unit, action.shiftKey);
return state.set('project', fromJS(project));
...
Ok, you will say that this kind of usage is not right. Because I'm reading all data and reseting it to reducer whole data. You will advice me to use state.setIn but it is really imposible. Beacuse in addActiveUnit function will recalculate project, %20 of project data will be changed. So, I can't handle this change state.setIn
My problem starts here; if there is 60-80 elements drawing on the screen after return state.set('project', fromJS(project)); rendering performance slows down. Every new items gets it worse.
How can I handle this problem?
Thanks all
As a general observation, toJS() is considered to be the most expensive API in Immutable.js, and should be avoided as much as possible.
My initial advice would be to not use Immutable.js.
Instead, you might want to look at using immer to handle the immutable update logic.
Also, our new redux-starter-kit package uses Immer internally.
Beyond that, I'd suggest doing some profiling to see where exactly the perf bottlenecks actually are.
First of all, I don't have any code yet, as I'd like to understand if what i'm trying to do it's actually possible or not before even try to code it.
Basically, I'm developing an angularjs application, and I need to display some data into charts.
I say charts, because the data is different and I need to display my data using different chart types (bars, lines, area)
So, my idea was to create a directive structured like this:
<my-chart>
<line-chart data="[data]" ...></line-chart>
<line-chart data="[data]" ...></line-chart>
<bar-chart data="[data]" ...></bar-chart>
<area-chart data="[data]" ...></area-chart>
</my-chart>
all the child directives will require the parent directive in order to work.
With this method, I should be able to easily show/hide specific chart based on user selection, but honestly, since I've never developed anything with D3, but i'm learning it now, I don't know if this is even possible or not, or if there's already something that allows my to achieve something like above.
Thanks for any help and sorry if the question is not purely code-related.
There is already an angular library which does something similar to what you want to achieve.
Demo here