pmndrs / gltfjsx

🎮 Turns GLTFs into JSX components
https://gltf.pmnd.rs
MIT License
4.45k stars 290 forks source link

Skinned model workflow #124

Closed mortocks closed 2 years ago

mortocks commented 2 years ago

I don't think this is really a bug but I'm lost as to the correct workflow / solution to solve the issue. When you follow the recommended workflow with a skinned model with animation, having multiple component instances in your scene does not work.

According to google, this is more an issue with Three.js skeletons not being able to be cloned, but if that's the case I'm not sure as to the workflow with gltfjsx or react-three-fibre

Steps to reproduce

Full sandbox demo of issue here

  1. Create animation with bones containing at least 2 animations (I used blender with 2 actions Jump and Dance) and export as model.gltf
  2. Use Gltfjsx npx gltfjsx model.gltf
  3. Add a useEffect to the model.js so that it plays one of the animations on mount
...
const { actions } = useAnimations(animations, group)

useEffect(() => {
    actions.Jump.play();
}, [actions])
  1. In the root scene, add 2 instances of the model element but offset their positions
const App = () => (
  <Canvas style={{ height: 400, width: 800 }}>
    <Suspense fallback={null}>
      <Model />
      <Model position={[0.5, -2, 0]} />
    </Suspense>
    <Stats />
  </Canvas>
);

Expected results

See 2 instances of the mesh/animation playing offset based in the position passed to the model

Actual result

Only one model is in the scene but with the properties of the second model.

I don't know if this is because both meshes are loading but being applied to the same skeleton, or some caching issue with useGLTF (according to google). I've also tried with the -I flag of gltfjsx. The result of this is 2 meshes appearing in the scene because the meshes are instanced but I can't see how you then apply the animations to the combined model.

Any help, examples or updates to the docs would be greatly appreciated. Use case for this would be something like having multiple "enemies" in a game scene all using their own animations and skeletons.

mortocks commented 2 years ago

As soon as I posted this I found the example in the discussion area. This shows an example on how to prep the model by cloning the skeleton. This solves the issue

laurentlubino commented 2 years ago

Hi, I haven't yet tried the solution, but it seems to solve exactly the issue I'm facing, thank you! I'm wondering if having a flag for skinned model in the cli wouldn't be a better way to solve the issue? So that it directly exports a File that look like the example instead of doing it manually on top of the generated (as described)