Originally published on ZeoLearn 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 : 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 (or it’s analog) OrbitControls Animation (rendered image should be updated on each frame) react-three You may agree that it’s maybe the simplest combination of tools you may use, ** **Well, I tried to make a small , and, surprisingly, it turned that 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 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 and 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 you make things the same way you do it in , but with react-bindings, except that sometimes you may see props that are not really related to the component in Three.js, like prop of component. (OrbitControls works together with camera, not with scene itself). And I would like to see support for in future versions. react-three Three.js orbitControls <Scene /> other types of controls Documentation: https://github.com/Izzimach/react-three/blob/master/README.md Demo: https://github.com/Izzimach/r3test/ ReactWHS It was developed for a which is based on 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 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. react-whs bindings That’s fairly easy to use if you worked with 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 ( or ) to get reference to the whs instance outside of React refComponent refApp Documentation: https://github.com/WhitestormJS/react-whs/blob/master/README.md Demo: https://codepen.io/sasha240100/pen/dNqKMd?editors=1010 ReactVR 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 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 component and import <Model /> obj/mtl. Same situation with materials, you have a choice between (light-independent, ) and (light-dependent, ) . — if you want to use a custom material, you need to provide & properties inside object. MeshBasicMaterial lit = false MeshPhongMaterial lit = true vertexShader fragmentShader materialParameters They decided to have . 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 or , you have . Those are very similar to . css-like coordinate system in 3D rotation quaternion rotateX, rotateY and rotateZ 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 , an online code editor that instantly hosts and deploys for free. Alternatively, create an file and include A-Frame in the remix the starter example on Glitch .html <head> aframe-react In you get and (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 then is your 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/ 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 ( ), 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 And worth to mention this WebGL-React projects: — bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. gl-react — Embed your Unity application in your react application for writing interactive interfaces with two way Unity and react communication. react-unity-webgl Recently I’ve made an you may find some interesting webgl secrets there! “Introduction into WebGL world” course for Skillshare, click here.

CodePen

Facebook

Instantly

Mozilla

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Alexander Buzin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Alexander Buzin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES