Animate scaling an instance of instancedMesh

[marcelpi]

Hi guys,

I've got a question: Is it possible to animate the scaling of a particular instance in an instancedMesh?

I can't just scale the whole mesh since that affects all instances. I know the transforms of all instances are found in instanceMatrix.

Right now I've managed to change the scale by using .setMatrixAt() and updating the transform matrix for that instance, but that increases the size instantly.
Is there any way to animate the scaling? Ideally using useSpring?

Check out the example here: https://codesandbox.io/s/instance-scale-gk5k8?file=/src/App.js

[drcmda]

of course. you can use lerp. for this to work you need useframe and you need a mutable data representation.

here's an example: https://codesandbox.io/s/instanced-vertex-colors-8fo01?file=/src/index.js

your code seems way too complex. you dont need to raycast, events are inbuilt in r3f and you can have them on instanced meshes as well. you get the INDEX of the instance in the event data as "instanceId"

[marcelpi]

Thanks a lot for this! Very useful example, I'm updating/simplifying my code to use lerp instead.

One question: isn't it an overkill to update 1000 instance matrices every frame in terms of performance?
could this be done by saving the items hovered in an array and them scaling down just those?

Thanks again, much appreciated. Will post the final result when ready.

[drcmda]

sure, im only updating them because they're spinning.

[marcelpi]

I managed to save the hovered items in a list and then go and resize back down only the hovered instances.
This should prevent going through 1000 loops each frame and hopefully be more efficient.

For anyone interested, here is the code: https://codesandbox.io/s/instance-scale-forked-l7uzu?file=/src/App.js

Thanks again, drcmda. Much appreciated.