Search code examples
three.jsgeometry-instancing

access instancedMesh's sub-instance origin and tranform with pivot in three.js?


I'm working on a scene that may needs large amount of animating models.So I have to use instancedMesh.But i've encountered some transforming issues.Below is a instancing ferrari demo, i tried to make the wheel rotating normally( around it's center) but failed.since the meshes are already instanced, it's origin is already setted to the scene's origin.Is there any chance to use "pivot transformation" to the sub-instances and solve this problem? Thanks!.

Instancing Ferrari Demo

make the wheel rotating normally( around it's center)


Solution

  • I solved this from this three.js forum post.

    The instancedMesh's sub-instance is already "pivoted", so the solution is to "unPivot". Based on some souce code in InstancedMesh: Add bounding volumes. by Mugen87 · Pull Request #21507 · mrdoob/three.js · GitHub that it is possible to get the sub-instance's volume center as offset.And the "unpivot" way is adding a parent pivot to the dummy object,and:

    1. sub the dummy's position with offset
    2. add the parentDummy's position with offset
    3. update parentDummy's rotation in the loop
    4. updating instanceMatrix with dummy's matrixWorld here is a working example:

    Instancing Ferrari Demo Justified It would be nice if anyone has other better solution..