DEV Community

Discussion on: How to Use Three.js And React to Render a 3D Model of Your Self

Collapse
 
martinlundqvist profile image
MartinLundqvist • Edited

Nice one! Only issue I have is that I lose the textures when exporting the fbx animation to glb from Blender in the final step.

  • I can see the textures in Mixamo and in Blender, so they are "there" so to speak.
  • Also, if I just use the ReadyPlayerMe model without adding any animations to it, then the textures also show.

Any advice?

Collapse
 
jhonrios85 profile image
jhonrios85 • Edited

I had the same problem, when I exported from Blender to FBX I lost the textures, what I did is:

  • Export the to FBX using blender
  • Add the animation in Mixamo and export the "Animated Version FBX" (Doesn't matter that the FBX have not textures, this is only to generate the animation)
  • Import the "Animated Version FBX" and the original GLB (with textures) to Blender
  • And follow these instructions to copy the animation from "Animated Version FBX" to "Original GLB with textures" gachokistudios.com/how-to-copy-ani...
  • Once you copy the animation, you can delete the "Animated Version FBX" from blender and export the original one (animated) to GLB and continue with the tutorial to include it to the project
Collapse
 
nourdinelabib profile image
Nourdine Labib

When you export the model as glb make sure you use this configurations.


I hope this fixes the problem.

Collapse
 
martinlundqvist profile image
MartinLundqvist

Indeed it did. The only config that differed was "Selected Objects". When I checked this option, it started working.

Thanks!

Collapse
 
martinlundqvist profile image
MartinLundqvist

Now only one problem remains.. the "position" property of the Model component doesn't seem to affect the position once the model is animating. Whenever I reload the app, the position will go back to the bottom of the model being in the center of the canvas.

Thread Thread
 
nourdinelabib profile image
Nourdine Labib

I'm sorry I didn't understand what problem you are having with the Model position, If you still didn't figure it out, provide me with some more feedback, and I will try my best to help.

Thread Thread
 
martinlundqvist profile image
MartinLundqvist • Edited

The "Model position={[0.2, -0.9, 0]}" positions the model as it should, when the model is not animating. However, as soon as I replace with the animated model, the position is somehow overridden and becomes [0,0,0]. I can see this behavior when I console.log(group.current.position).

Thread Thread
 
martinlundqvist profile image
MartinLundqvist

Problem solved. By wrapping the group in a new parent group, and setting the position on the parent - I could solve the problem. The animation clearly reset the position of its group.

Thread Thread
 
nourdinelabib profile image
Nourdine Labib

I never had a problem like that before, glad you solved it.