Building a Game with Three.js, React and WebGL — SitePoint I’m making a game titled “Charisma The Chameleon.” It’s built with Three.js, React 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 the 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! I laughed. 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. Why React? I know what you’re thinking: why? “Declarative” views let you cleanly separate your scene rendering from your game logic.Design easy to reason about components, like <Player />, <Wall />, <Level />, etc. Recommended Courses Wes Bos React and WebGL Debugging
ECMAScript 5 Strict Mode, JSON, and More Previously I analyzed ECMAScript 5’s Object and Property system. This is a huge new aspect of the language and deserved its special consideration. There are a number of other new features and APIs that need attention, as well. The largest of which are Strict Mode and native JSON support. Strict Mode Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. Since ECMAScript 5 is backwards-compatible with ECMAScript 3, all of the “features” that were in ECMAScript 3 that were “deprecated” are just disabled (or throw errors) in strict mode, instead. Strict mode helps out in a couple ways: It catches some common coding bloopers, throwing exceptions.It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).It disables features that are confusing or poorly thought out. Most of the information about strict mode can be found in the ES5 specification [PDF] on page #235.