<Anim> Component not working as described

[djfarly]

Hej :)

I was playing around loading a glb file and playing an animation but I could not get the component to work.

There are two examples found throughout the docs. One where Anim is a child of the entity, one where it is a child of render.

    return (<Entity {...props}>
        <Render type="asset" asset={asset} />
        <Anim asset={asset} clip="Walk" loop />
    </Entity>)

https://playcanvas-react.vercel.app/docs/api/components/anim

    {/* render the asset */}
    <Render type='asset' asset={asset} >
        <Anim asset={asset} />
    </Render>

https://github.com/playcanvas/react/blob/main/packages/docs/content/examples/load-a-3D-model.mdx

---

Here is what I can observe:

Typescript is not happy with the clip or loop props

Type '{ asset: Asset; clip: string; loop: true; }' is not assignable to type 'IntrinsicAttributes & AnimProps'.
  Property 'clip' does not exist on type 'IntrinsicAttributes & AnimProps'.ts(2322)
…
  Property 'loop' does not exist on type 'IntrinsicAttributes & AnimProps'.ts(2322)

Using it (no matter which way, even ts-expect-ing the errors), I get this error in the browser:

An error occurred in the <Anim> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
react-dom-client.development.js:8283:15

Uncaught TypeError: setting getter-only property "playable"
    applyProps validation.ts:229
    applyProps validation.ts:221
    useComponent use-component.tsx:56
    React 60
    performWorkUntilDeadline scheduler.development.js:45
    js scheduler.development.js:223
    js scheduler.development.js:364
    __require chunk-G3PMV62Z.js:8
    js index.js:6
    __require chunk-G3PMV62Z.js:8
    React 2
    __require chunk-G3PMV62Z.js:8
    js React
    __require chunk-G3PMV62Z.js:8
    <anonymous> react-dom_client.js:18083
validation.ts:229:22

Help is greatly appreciated… 🫶

[marklundin]

Thanks for the report @djfarly! Looking into this now.

[marklundin]

Just a heads up - I'm introducing a new API for managing GLB's and animations which will fix this #282

[Maclay74]

Hey @marklundin I have a problem using Anim + Gltf component. Here is my code:

<Entity name={"player"}>
 <Gltf asset={playerModel} key={playerModel.id}>
   <Modify.Node path={"Armature.mixamorig:Hips"}>
    <Anim asset={playerModel} clip={"mixamo.com.001"} loop playing />
   </Modify.Node>
  </Gltf>
</Entity>

It gives an error saying that "playable" has only getter. It happens in validation, so I had to fix it this way:

export function applyProps(instance, schema, props) {
    Object.entries(props).forEach(([key, value]) => {
        if (key in schema) {
            const propDef = schema[key];
            if (propDef) {
                if (propDef.apply) {

                    if (key === "stateGraphAsset") return; // I had to add this or animation won't play

                    // Use type assertion to satisfy the type checker
                    try {
                        propDef.apply(instance, props, key); // I had wrap it to try-catch for errors with no setter for property
                    } catch(e) {
                        console.error(e);
                    }
                }
                else {
                    try {
                        instance[key] = value;
                    }
                    catch (error) {
                        console.error(`Error applying prop ${key}: ${error}`);
                    }
                }
            }
        }
    });
}

Exact errors I get:
Error applying prop playable: TypeError: Cannot set property playable of #<AnimComponent> which has only a getter
TypeError: Cannot set property baseLayer of #<AnimComponent> which has only a getter