Viewer & React

The HTML3DElement (<babylon-viewer>) is an HTML custom element that is most easily used directly in HTML. There are many popular frameworks that layer on top of HTML, though, and React is one of the most widely used.

There are a couple of ways to use the Babylon Viewer in these types of frameworks, particularly with React.

1. Use the CreateViewerForCanvas function to build a framework-specific layer on top of the low-level Viewer (e.g. a sibling of the HTML3DElement that is framework-specific). If there is enough community interest in this, the Babylon team may provide an implementation.
2. Use the HTML3DElement (<babylon-viewer>) directly in React. There are some limitations with this approach that do not fit very well with the React component model, particularly the fact that properties map to element attributes and attributes can only be strings. This can be awkward in React, where developers are used to passing objects, callbacks, etc. as property values. If you want to try this option and you are using TypeScript, you'll need to add JSX type declarations for the HTML3DElement (<babylon-viewer>). For example, here is a partial type declaration that only includes the source and environment attributes:

interface HTML3DElementAttributes
  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
  source?: string;
  environment?: string;
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'babylon-viewer': HTML3DElementAttributes;
    }
  }
}

Further reading

Viewer Migration (V1 -> V2)

Migrating from the V1 Babylon Viewer to V2