
This allows you to code from your desktop and automatically deploy to the web. You will start by setting up a website with a single static HTML page.

The first three instructions below are excerpted from my previous article. To get started, let’s take a look at how we can set up a simple scene with a ground: You will use A-Frame VR and several A-Frame extensions. This first part will conclude with a clickable orb that turns on and off (as pictured below).

In this first part of the tutorial, we will build the environment and add the design elements for our VR game. This forces both players to collaborate to solve the puzzle. Only player 2 can control the dominant orbs while only player 1 can control non-dominant orbs. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright.

At the end of this tutorial, you will have a fully functioning demo online that anyone can play.Įach pair of players is given a ring of orbs. We will use A-Frame for VR modeling, MirrorVR for cross-device real-time synchronization, and A-Frame Low Poly for low-poly aesthetics. In this tutorial series, we will build a web-based multiplayer virtual reality game in which players will need to collaborate to solve a puzzle.

This tutorial leverages your familiarity with web development to get started with VR development. Despite its novelty, VR doesn’t require a drastically different toolset to design for - the same tools we use for web game development, 3D modeling, and others are all still applicable. Virtual reality is a new immersive medium for exploring content, whether that content is a film ( Life of Pi), a game ( Beat Saber) or a social experience (as depicted in Ready Player One).
