react-three-fiber | 🇨🇭 A React renderer for Three.js | Frontend Framework library

I have generated an avatar, In glb format. But when I render the same the hands are stretched out. The model has a skeleton. But how do I get access to the skeleton such that I can bring its hands down or make the person sit on a chair etc? The technology I am using is THREE.js with react, react-three-fiber,react-three-drei, etc

I'm trying to repeat the example, but using react-three-fiber.

Link to example: https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_sphere.html (so far only the init method, no animation)

My code:

Google's provides all the key features I need without having write a custom solution via something like react-three-fiber or directly in three.js.

I am struggling with how to properly integrate it into a Reagent (and React for that matter) structure.

In order to make it easy to use with vanilla JS, is built as a web component and is largely controlled via the attributes on its html element. Normally that wouldn't be much of a problem, but with the overhead of 3D and loading large models re-rendering this is expensive and in many cases functionality-breaking.

I've tried to naively use it inside a component and trying to eliminate the possibility of re-rendering. Using a ref to mutate it directly.

I have also tried setting it up as a manually created html element from the Reagent/React controlled application and reference it in various events via its dom element.

Both of these options introduced a lot of hacks and were not ideal in a single page application.

I am wondering if anyone has any tips on how to best wrap this in a React/Reagent shell, while still having access to the core element to use their underlying JS api.

Answers don't have to be in ClojureScript.

Here is the example of its usage from their page:

In this minimal react-three-fiber App I am trying to load and include the same GLTF model twice:

react-three-fiber provides useLoader to load models. The examples show how to load models from a path/url. I've saved the binary representation of my model in the IndexDB of the browser.

I added this sandbox. It shows how the models are loaded via path/URL (like described in the docs). Also it shows how I need to read the binary from the localStorage into binaryFromLocalStorage.

How would I load/parse binaryFromLocalStorage with react-three-fiber?

I have been trying to instance some tree meshes in react-three-fiber and threejs, this is what i have got so far: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js

The trees from one angle look see through, I am able to see the barks of ALL trees.

but the behavior is normal from the opposite angle.

To me it seems to be some issue with render order or meshes or the shader, not able to wrap my head around it. I need the see-through thing to not happen and the set should look like how it looks like in the second picture from all angles

I'm using the react hook "UseFrame" from react-three-fiber. However, this function is being called at every single frame. Is there a way of calling this callback function only if the react element is within the view port? Should I use a different hook?? I don't want this "UseFrame" hook being called at every frame for those react elements which aren't being showed on the screen.

Using react-three-fiber often requires using refs to manipulate objects in the scene. For example, we might want to move a mesh's position on every frame render (see code below).

However, refs in typescript are always potentially undefined. So we have to check if our meshRef is current before we manipulate it:

I am rendering textured objects in react-three-fiber using Suspense: