Unexpected behavior with multiple gltfjsx models

[SebastianDeuss]

I got a scrolling page, where I use <View/> to display the same gltfjsx component three times.
Depending on the scrolling position, the models transition to a predefined pose (using spring) e.g.:

[
    {
        position: [0, 0, 1],
        rotation: [-0.1,0, 0],
    },
    {
        position: [0, 2, 0],
        rotation: [0, Math.PI / 2, 0],
    },
    {
        position: [-2, 0, 0],
        rotation: [0, 0, -0.5],
    }
 ]

the position is provided in a prop pose={currentSlide}
When I replace currentSlide with a number like 0, all models pick their pose by that number.

<Canvas>
    <Suspense r3f>
        <View index={0} track={scene0}>
            <Model pose={currentSlide} />
        </View>
        <View index={1} track={scene1}>
            <Model pose={currentSlide} />
        </View>
        <View index={2} track={scene2}>
            <Model pose={0} />
        </View>
   </Suspense>
</Canvas>

pose={0} is now applied to all models

Is this expected? I would like to use one component and different props to change position and rotation like in https://codesandbox.io/s/re-using-gltfs-dix1y?file=/src/App.js

What could cause this behavior?

[drcmda]

you have a side effect, something that's bleeding over to the rest. i would expect each component to be self contained and isolated, component c receiving a prop shouldn't affect component a and b. we need to see the model components code.

[SebastianDeuss]

Hi drcmda,

Thank you for your input! Based on it, I went on investigating for the bleeding and found that the .glb file was causing trouble for the THREE.GLTFLoader. The console warning was THREE.GLTFLoader: Custom UV set 1 for texture map not yet supported.. I didn't think much about it , but changing the model solved my problem .

I guess the texture problem was caused by faulty export settings in blender.

Thanks again ✌️

[SebastianDeuss]

After switching the model my setup worked well enough, so I inspected it a little further.
It had a <skinnedMesh/> in it and I found out, that Three has had problems with cloning skinned meshes before mrdoob/three.js#17370 (comment)

I'm wondering what could go wrong in a model to prevent it from being used multiple times. Are there known limitations?