Building a Game with Three.js, ReactJS and WebGL

I’m making a game titled “Charisma The Chameleon.” It’s built with React, Three.js and WebGL. This is an introduction to how these technologies work together using react-three-renderer (abbreviated R3R).

Check out A Beginner’s Guide to WebGL and Getting Started with React and JSX here on SitePoint for introductions to React and WebGL. This article and accompanying code use ES6 Syntax.

How It All Began

Some time ago Pete Hunt made a joke about building a game using React in the #reactjs IRC channel:

“I bet we could make a first person shooter with React!
Enemy has <Head /> <Body> <Legs> etc.”

I laughed. He laughed. Everyone had a great time. “Who on earth would do that?” I wondered.

Years later, that’s exactly what I’m doing.

Charisma The Chameleon is a game where you collect power-ups that make you shrink to solve an infinite fractal maze. I’ve been a React developer for a few years, and I was curious if there was a way to drive Three.js using React. That’s when R3R caught my eye.

Why React?

I know what you’re thinking: why? Humor me for a moment. Here’s some reasons to consider using React to drive your 3D scene:

“Declarative” views let you cleanly separate your scene rendering from your game logic.
Design easy to reason about components, like <Player />, <Wall />, <Level />, etc.
“Hot” (live) reloading of game assets. Change textures and models and see them update live in your scene!
Inspect and debug your 3D scene as markup with native browser tools, like the Chrome inspector.
Manage game assets in a dependency graph using Webpack, eg <Texture src={ require('../assets/image.png') } />

Let’s set up a scene to get an understanding of how this all works.

React and WebGL

I’ve created a sample Github repository to accompany this article. Clone the repository and follow the instructions in the README to run the code and follow along. It stars SitePointy: The 3D Robot!

SitePointy the 3D robot screenshot

Warning: R3R is still in beta. Its API is volatile and may change in the future. It only handles a subset of Three.js at the moment. I’ve found it complete enough to build a full game, but your mileage may vary.

Organizing View Code

The main benefit of using React to drive WebGL is our view code is decoupled from our game logic. That means our rendered entities are small components that are easy to reason about.

R3R exposes a declarative API that wraps Three.js. For example, we can write:

<scene>
    <perspectiveCamera
        position={ new THREE.Vector3( 1, 1, 1 )
    />
</scene>

Continue reading %Building a Game with Three.js, ReactJS and WebGL%

You must be logged in to post a comment.

blog