React + WebGL. Different ways of creating 3D apps with React.

Originally published on ZeoLearn

http://www.larsberg.net/#triboids by Lars Berg

In this article I’ll describe some libraries/frameworks that are used to create 3D online games and websites with React. This article is not about disadvantages of each way, it explains possibilities and features that may be useful to complete your goals.

When to use React with WebGL and how?

React’s most common and popular feature is “Components” — my advice is to USE this pattern in 3D, you can read more about components in 3D in this article.

TL;DR: Use react with small 3D web applications (no post-processing, not much interactivity), that’s not a strict rule, bit when it comes to making a 3D game, putting all your 3D stuff inside React components will result in a bottleneck for your further development and limit your possibilities.

Frameworks, Libraries, Tools

So let’s compare all those by writing a basic 3D app with this rules:

• Use react for hierarchy
• Add OrbitControls (or it’s analog)
• Animation (rendered image should be updated on each frame)

react-three

Browser limitation. You may agree that it’s maybe the simplest combination of tools you may use, **and probably the easiest way to make it work? Ugh…**Well, I tried to make a small codepen example, and, surprisingly, it turned that react-three doesn’t provide a UMD version of their react bindings library that I could use in browser, instead they only have a Commonjs2 version, which isn’t working when you use it on codepen (sure, because it’s a module yet, not a library). If you’re using a tool like webpack or browserify — it shouldn’t be a problem for you, and that’s what you go with when there’s also a React mentioned, but I can’t do a codepen that way. So I compiled my own hacky react-three.js to make everything work.

Same happened to me with ReactVR and Aframe-react too. Is it a problem? For me — yes, but probably not for you, because my task was to show all the code on the CodePen, and you’ll probably use it “the right way”.

react-three bindings

In react-three you make things the same way you do it in Three.js, but with react-bindings, except that sometimes you may see props that are not really related to the component in Three.js, like orbitControls prop of <Scene /> component. (OrbitControls works together with camera, not with scene itself). And I would like to see support for other types of controls in future versions.

Documentation: https://github.com/Izzimach/react-three/blob/master/README.md

Demo: https://github.com/Izzimach/r3test/

ReactWHS

That’s the tool created by me:) It was developed for a WhitestormJS framework which is based on Three.js library and lets you work with re-usable components & modules in the world of 3D (WebGL).

WhitestormJS implements a core with component system and plugin support for fast development of 3D scene with physics.

Automizing your web app with whitestorm is fast and comfortable. This engine has physics support implemented by custom Physi.js library, which is much faster than others. Framework provides extended component control and high frame rate, because it uses WebWorkers technology for multithreading.

react-whs bindings

That’s fairly easy to use react-whs if you worked with whs before, that’s because you don’t need to guess which props exist for specific component as it automatically converts params {} object into react’s props. Just compare both:

whs.js

react-whs

Another good feature I want to showcase is that WHS Component can be simply converted into React Component:

And you can pass a callback (refComponent or refApp ) to get reference to the whs instance outside of React

Documentation: https://github.com/WhitestormJS/react-whs/blob/master/README.md

Demo: https://codepen.io/sasha240100/pen/dNqKMd?editors=1010

ReactVR

React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components.

From ReactVR website

ReactVR is a good and perspective project made by Facebook React team. Like most 3D frameworks, it is based on Three.js.

At the moment of writing this article, there are only a few geometries available (Sphere, Box, Cylinder) — for any other shape you need to use <Model /> component and import obj/mtl.

Same situation with materials, you have a choice between MeshBasicMaterial (light-independent, lit = false) and MeshPhongMaterial (light-dependent, lit = true) . — if you want to use a custom material, you need to provide vertexShader & fragmentShader properties inside materialParameters object.

They decided to have css-like coordinate system in 3D. Three.js “position” is named as “translation” which means that the object was moved from it’s pivot with translate vector. And instead of having rotation or quaternion , you have rotateX, rotateY and rotateZ . Those are very similar to css transforms.

Aframe-react

A-frame is a cool Three.js framework made by Mozilla WebVR team.

A-Frame can be developed from a plain HTML file without having to install anything. A great way to try out A-Frame is to remix the starter example on Glitch, an online code editor that instantly hosts and deploys for free. Alternatively, create an .html file and include A-Frame in the <head>

aframe-react

In aframe-react you get Scene and Entity (anything that is not Scene, Entity = 3D Object) React components. And here’s how to turn ANY a-frame custom html tag into a React component: let’s say you have <a-sky color="#000000"></a-sky> then a-sky is your primitive prop, and attributes you turn into props.

Documentation: https://aframe.io/docs/0.7.0/introduction/

Conclusion

WebGL is growing fast, and there are already many big projects that cover webgl (in our case — Three.js) in React.

Those are wrappers around three.js functionality, which give you access only to common options (not advanced features), and that’s because you will never use WebGL in React to build something advanced (a complex 3D game or a Creative website).

React+WebGL as the way of creating content is good for simple intuitive 3D web apps that handle basic functions, such as 3D model viewing or a simple VR experience like this.

And worth to mention this WebGL-React projects:

• gl-react — bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.
• react-unity-webgl — Embed your Unity application in your react application for writing interactive interfaces with two way Unity and react communication.

Recently I’ve made an “Introduction into WebGL world” course for Skillshare, you may find some interesting webgl secrets there! click here.