Devtools events structure and API

[alvarosabu]

Description

As a maintainer of TresJS, I would like to be able to filter devtools cb events by type from dev tools solutions, having a more structured object than just sending the tres state ctx.

Atm we send the state on useTresContextProvider like this:

window.__TRES__DEVTOOLS__.cb(state)

Also, I would like to have an API to send actions from the devtools (for example edit properties of objects from the devtools Tresjs/nuxt#73)

Suggested solution

Events are sent to de devtools.cb with the following structure:

• type: string identification of the type of event to be able to filter on the devtools
• payload: container for the data to be sent
• timestamp: performance.now for tracking

const event = {
   type: 'tres:ctx',
   payload: {
      scene,
      renderer,
      ....
   },
  timestamp: `performance.now()`
 }
window.__TRES__DEVTOOLS__.cb(event)

For the actions we could register an action hook on the core like this

window.__TRES__DEVTOOLS__.action = (event) => {
  if(event.type === 'tres:edit') {
     // logic for modifying the scene graph children
  }
}

then from the devtools

window.__TRES__DEVTOOLS__.action(
  {
     type: 'tres:edit'
     payload: {
        object: //obj uuid
        property: 'position.x'
        value: 2
     }
  }
)

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alvarosabu]

@Tresjs/core This new feature will be a breaking change (we will need the v4 at the end 😛) for the nuxt devtools but is a necessary change to have a more robust event API for devtools.

Let me know what you think.