How to show dynamic position of instance with react + cannon?

Questions
, ,
1

Hi,

I’d really like to be able to use react for its conciseness, but I’m starting to get fed up with its complexity with cannon.js :frowning:

How can I display via Useframe the dynamic position of instances that are moved via other support instances? I’m lost since 3 days.

This concerns lines 99 to 105 of the codesandbox.

https://codesandbox.io/p/sandbox/2023-v14-minimal-test-instance-physics-x56wt7?file=%2Fsrc%2FApp.js%3A107%2C11

Thanks for your help.

2
  1. To use instances, you need to update instanceMatrix. For what I see in r3f repo - you have to do it manually via vanilla Three.js API. InstancedMesh.position will not return you anything meaningful, since all per-instance transformations are done within instanceMatrix. You can retrieve transformation matrix for a specific instance by using InstancedMesh.getMatrixAt - from that you can decompose the position / rotation / scale.
  2. All things mentioned in point (1) are vanilla three.js API - so no reason to be angy at r3f.
  3. There’s really no reason to use instancing in your case btw. If it blocks you for 3 days - just skip it until you render enough draw calls to see the FPS drop :blush: Using instancing is not super trivial on it’s own, using instancing with physics will be even more annoying and blocking unless you’re already familiar with using instancing without physics.