Originally published on ZeoLearn ZeoLearn http://www.larsberg.net/#triboids by Lars Berg http://www.larsberg.net/#triboids 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. 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. TL;DR 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) Use react for hierarchy Add OrbitControls (or it’s analog) OrbitControls Animation (rendered image should be updated on each frame) react-three 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. Browser limitation. and probably the easiest way to make it work? Ugh… codepen example react-three react-three.js 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”. ReactVR Aframe-react 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. react-three Three.js orbitControls <Scene /> other types of controls Documentation: https://github.com/Izzimach/react-three/blob/master/README.md Documentation: https://github.com/Izzimach/react-three/blob/master/README.md Demo: https://github.com/Izzimach/r3test/ Demo: https://github.com/Izzimach/r3test/ ReactWHS 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). That’s the tool created by me:) WhitestormJS framework Three.js WhitestormJS implements a core with component system and plugin support for fast development of 3D scene with physics. WhitestormJS implements a core with component system and plugin support for fast development of 3D scene with physics. WhitestormJS 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. 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: react-whs whs 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 refComponent refApp Documentation: https://github.com/WhitestormJS/react-whs/blob/master/README.md Documentation: https://github.com/WhitestormJS/react-whs/blob/master/README.md Demo: https://codepen.io/sasha240100/pen/dNqKMd?editors=1010 Demo: https://codepen.io/sasha240100/pen/dNqKMd?editors=1010 ReactVR 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. 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. React VR From ReactVR website From ReactVR website ReactVR website ReactVR is a good and perspective project made by Facebook React team. Like most 3D frameworks, it is based on Three.js. 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. <Model /> 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. MeshBasicMaterial lit = false MeshPhongMaterial lit = true vertexShader fragmentShader materialParameters 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. css-like coordinate system in 3D rotation quaternion rotateX, rotateY and rotateZ css transforms Aframe-react 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> 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> remix the starter example on Glitch .html <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. aframe-react Scene Entity <a-sky color="#000000"></a-sky> a-sky primitive Documentation: https://aframe.io/docs/0.7.0/introduction/ 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). not advanced features 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. 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. gl-react — bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. gl-react gl-react react-unity-webgl — Embed your Unity application in your react application for writing interactive interfaces with two way Unity and react communication. react-unity-webgl react-unity-webgl Recently I’ve made an “Introduction into WebGL world” course for Skillshare, you may find some interesting webgl secrets there! click here. Recently I’ve made an “Introduction into WebGL world” course for Skillshare, you may find some interesting webgl secrets there! click here. “Introduction into WebGL world” course for Skillshare, click here.
