Introducing Universal AR for React + three.js

5 min read
Blog Author

Introducing Universal AR for React + three.js

Blog Author
5 min read
We're delighted to release our Universal AR for React+three.js SDK, offering web developers the ability to create AR content using the power of the React JavaScript library and three.js.

Today I’m delighted to announce a brand new SDK to join our Universal AR suite of libraries - Universal AR for React + three.js.

It’s the next step in our mission to unlock new and exciting ways to build WebAR content and deploy it directly to the web browsers already installed on your users' phones.

With Universal AR for React + three.js you can create AR content featuring Zappar’s comprehensive suite of computer vision algorithms, including face, image and instant world tracking, using the power of the React JavaScript library, and the 3D rendering platform three.js.

 


 

Why React?

In its own words, React is a JavaScript library for building user interfaces. It provides a fantastic paradigm for creating the modern, single-page web applications that have transformed the way we use the Internet. There are a host of reasons why React is the go-to library for many web developers embarking on their next project, but I’d like to highlight three:

 

Composability

React structures a web page as a hierarchy of components - self-contained fragments of user interface. Components have a strict yet highly expressive format, encapsulating both properties and state. This means that React components are highly shareable between projects, and reusable throughout a project.

 

Fantastic Tooling

There are some great tools out there for building pages with React, including browser extensions to help with debugging, hot-reloading pages as they’re written, and many more.

 

Huge Ecosystem

There are a large number of components and libraries built for React that can be leveraged when creating content, including tools like Redux that help manage application state in large projects.

 

What does this mean for AR?

With our new SDK and React, you can craft your 3D world and AR trackers directly in JSX, just as you would with HTML if you were building a traditional web page. You can form components from the elements of your AR experience, to encapsulate content or even user experience mechanics.

Here’s an example of just how simple an AR component can be, in this case a face-tracked 3D helmet:

function Helmet() {
  const { nodes, materials } = useGLTF('helmet_model.gltf')
  return (
    <FaceTracker>
      <mesh geometry={nodes.Helmet.geometry} material={materials.base} />
    </FaceTracker>
  );
}

 

Getting Started

To get started straight away with Universal AR for React + three.js head on over to our brand new Downloads & SDKs hub in your ZapWorks account

(Download the SDK of your choice from our new Downloads & SDKs hub)


Our documentation site shows how to get up and running, with the various tracking types and technologies available in the SDK.

We’ve prepared a set of bootstrap projects that you can use as the foundation of your next WebAR experience.

Check out our repository of examples over on GitHub:
https://github.com/zappar-xr/zappar-react-three-fiber-examples

And finally be sure to investigate the fantastic React, react-three-fiber, and three.js communities and resources.

 

Onwards

While it’s only been six months since we announced and released our first set of Universal AR SDKs, we’re honoured to see the fantastic response from the AR community and the stunning content that’s been produced so far. Universal AR for React + three.js offers a modern and expressive paradigm for building AR content for the web and we couldn’t be more excited to see what you build with it! :-)