'Difficulties rendering 3D avatar with react-three-fiber and React
I'm trying to render a 3D avatar using react-three-fiber and React, but I'm experiencing some difficulties with positioning the avatar. As you can see from from the following CodeSandbox https://codesandbox.io/s/vigorous-ardinghelli-ypwjsb?file=/pages/index.js, the top of the avatar's head is not visible when you first render the page. However, if you change the position of the model (e.g. from [0.025, -0.9, 1] to [0.025, -1, 1]) and re-render the page, suddenly the avatar is showing correctly. Why is that?
Solution 1:[1]
Reposting the solution I got from a Reddit user:
it looks like the keyframe track actions["Armature|mixamo.com|Layer0"].play() pushes the model up and down.
i reexported the model
npx gltfjsx model.glb --keepnames
https://codesandbox.io/s/interesting-lewin-rnq66m?file=/pages/index.js and that seems to do it. it should preserve names by default when animations are present, i don't get why it's omitting them. but either way, it works.
should be fixed upstream (gltfjsx) as well now. another export should include names
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | procul |