Room DOM.md

Room DOM

Because Aframe uses direct DOM elements as a source of truth and the Room page uses Aframe for its 3D environment, we must manage direct DOM interactions in our React code.

We tried Aframe-React but ran into severe issues (#5; #7; networked-aframe#226).

Static HTML

We use a Next.js custom Document to include:

• Static Aframe library scripts:

  • When on the /room page, these are executed synchronously in a proper order.
  • When on any other page, they are loaded as async as a prefetching technique.

• Raw Aframe elements on the page:

  • Placing then in the raw HTML ensures they already exist on the page by the time our scripts need them.
  • Our Aframe DOM template is stored in a template.html and loaded via Webpack's html-loader.

DOM Interactions

Room DOM interactions are initialized by RoomEvents, a null-returning component that sets React effect hooks to initialize DOM event listeners. Those listeners generally use react-use's useEvent to be automatically disposed when needed.

See Client Room Context for how those listeners interact with room state.