Listen to position, rotation changes of a mesh

Questions
, ,
1

Hey all,

I’m currently working on importing a big GLB file which includes Meshes, as well as animation.
Next to the imported meshes, I have some extra features such as:

  • An outline mesh for the mesh if the mesh is “selected”
  • As well as an HTML sidebar which displays information about the currently selected model.

Within the loaded animations, there is movement encoded for the loaded meshes.

I was now wondering if there is a way I could listen to these changes on the meshes using a addEventListener such that when a mesh is moved or rotated by an animation, I could extract the translation/rotation and apply it to the outline Mesh, as well as visualize these movements live in the HTML on the sidebar.

Is there any way to listen to changes on the mesh, geometry, transformationMatrix, …?

Any help or ideas are appreciated!

Kind regards,
Emil

2

i don’t think you can do that (i think) unless you hack it into the prototype, but imo it would be the wrong approach anyway, it’s quite like putting the cart in front of the horse. the app should be a reflection of state, as deterministic as possible: state changes > view changes. the view should never mutate state, would just create race conditions and chaos.

as for the outline, you don’t have to copy geometry and translate it along, an effect pass can select meshes. for instance the “postprocessing” library. i have an implementation here, but this is still without clicks, the sidebar is treated as the state model: React-pp outlines - CodeSandbox with interaction the state model would live above the sidebar and the canvas, it would not be hard to make it.

here’s another with interaction + outlines: Selective outlines - CodeSandbox but anyway, in vanilla this is the library you would probably want to use GitHub - pmndrs/postprocessing: A post processing library that provides the means to implement image filter effects for three.js.