Aframe

We are currently using Aframe (with 8th Wall for SLAM) for most AR experiences. Here are some notes on using Aframe

The Aframe docs are quite good, and are worth looking through for specific components, and an overview of how Aframe works.

One difference from standard Aframe is that we are using aframe-typescript-class-components to write TypeScript class-based Aframe components and systems. To make and register a component, you will want to use the @component(attr-name) decorator above the class, and extend BaseComponent<SchemaDataType> to bring in types for the default methods and attributes injected by Aframe.

In general, programming with Aframe is more imperative (like jQuery) than programming with declarative React. That means using document.createElement("a-entity") to create elements, using query selectors to find them, and using events to pass data around.

If you want to pass a complex javascript object as a prop to a component, you can use [jsonPropertyType](/packages/webar/src/aframe/properties/json-property-type.ts] in the component's schema to handle objects. If you use el.setAttribute('component-name', {value: someJson}), then the someJson will be directly sent as a prop to the component without encoding/decoding. A change to a prop will trigger the update method on the component.

Also for Aframe, remember that the overall structure of the app is set up in the HTML file with a set of entities and components. Then the custom components can be registered as typescript files (loaded in the entrypoint index.ts file that's configured in webpack) .