evergreen

Building VR Apps with React360

Illustrated notes on building VR web apps with React360

Planted almost 6 years ago

Turns out you can build almost anything in React now… including VR and AR apps inside a web browser. There’s a version of React called React 360 that simplifies the otherwise niche and overly-complex challenge of making things fly around in virtual 3D space.

3D objects flying out of a browser

Tomasz Lakomy made an entire egghead course that walks you through building VR Applications Using React 360 .

Course illustration of objects in 3D space

Here’s all my illustrated notes on the material.

VR apps with React 360

Let's us build 3D and VR apps on the web - without needing to learn crazy complex tools like WebGL. Instead we can just use React

Uses flexbox for layouts. On the web it flexes across rows by default. But in VR it flexes downwards in a stacked columns. To add CSS styles to our views, we make a special React 360 stylesheet and then we pass them to the style tag

Add 3D models to your components with the Entity tag. We can apply CSS transforms to these

The full React 360 illustrated note

Want more illustrated notes on web development?

Take a look at Building Custom React Hooks , Speaking the GraphQL Query Language or What the Fork is React Suspense?

2 Backlinks

Building Custom React Hooks

Illustrated notes on building custom React hooks

What the Fork is xState?

Illustrated notes on how to build state machines with the xState library