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).
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.
- When on the
-
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'shtml-loader
.
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.