Load animation from separate GLB file

[hopewise]

How can I load animation for a separate file, and load the 3D model from another file? My current implementation is as:

  return (
    <SafeAreaView style={styles.container}>
      <View {...panResponder.panHandlers} style={styles.container}>
        <FilamentScene>
          <FilamentView style={styles.view}>
            <DefaultLight />
            <Model
              source={require("../assets/deafultCharIII-decompressed.glb")}
              scale={[scale, scale, scale]}
              translate={[0, 0, 0]}
            >
              <Animator
                source={require("../assets/SLAplhabet-decompressed.glb")}
                playing={true}
                onError={(error) => console.error('Animation loading error:', error)}
                animationIndex={1}
                
              />
            </Model>
            <Camera 
            
            />
          </FilamentView>
        </FilamentScene>
      </View>
    </SafeAreaView>
  )
}

getting error:

 (NOBRIDGE) ERROR  Filament Error: Exception in HostFunction: Animation index out of range! Expected <0, received 1, js engine: Filament

Is there any example I can use for my case? all examples has the animation and model within the same GLB file.

[hannojg]

Yeah, I think it's currently only possible with the imperative api, here is a rough example. I haven't tested it, but it should outline all the APIs necessary to make it work (you might want to peak into the Model and Animator tsx files to see how some of the internals are working):

const model = useModel(
	{
		uri: assetPath,
	},
)
const assetModel = getAssetFromModel(model)

const modelAnimations = useModel(
	{
		uri: path,
	},
)

const animator = useAnimator(modelAnimations)

// Sync your model with the external animations:
useEffect(() => {

  const instance = assetModel.getInstance();
  const id = animator.addToSyncList(assetModel) // this is the key API you want to use

  return () => {
    animator.removeFromSyncList(id)
  }

}, [animator, assetModel])

keep in mind that as you're using now the useAnimator hook you have to schedule the animation rendering yourself, see:

react-native-filament/package/src/react/Animator.tsx

Lines 72 to 104 in 0aa6ab7

	RenderCallbackContext.useRenderCallback(
	({ passedSeconds }) => {
	'worklet'
	if (animator == null) {
	return
	}
	const animationIndex = typeof animationIndexProp === 'number' ? animationIndexProp : animationIndexProp.value
	animator.applyAnimation(animationIndex, passedSeconds)
	// Eventually apply a cross fade
	if (prevAnimationIndex.value != null && transitionDuration > 0) {
	if (prevAnimationStarted.value == null) {
	prevAnimationStarted.value = passedSeconds
	}
	animationInterpolation.value += passedSeconds - prevAnimationStarted.value!
	const alpha = animationInterpolation.value / transitionDuration
	// Blend animations using a cross fade
	animator.applyCrossFade(prevAnimationIndex.value, prevAnimationStarted.value!, alpha)
	// Reset the prev animation once the transition is completed
	if (alpha >= 1) {
	prevAnimationIndex.value = undefined
	prevAnimationStarted.value = undefined
	animationInterpolation.value = 0
	}
	}
	animator.updateBoneMatrices()
	},
	[animator, animationIndexProp]

In case you got something working, we would appreciate if you create a PR to update the declarative API (react API) to make this work (ie. I see you passed source to Animator, which is a prop that doesn't exist yet, but this could actually be a nice API!)

[hannojg]

Also see: https://margelo.github.io/react-native-filament/docs/api/interfaces/FilamentAnimator#addtosynclist