Sexy Valentine’s Day gifts: R-rated ideas for couples in the UK

Heads up: All products featured here are selected by Mashable's commerce team and meet our rigorous standards for awesomeness. If you buy something, Mashable may earn an affiliate commission. By

PSA: Noah Centineo will absolutely destroy you in a water fight

There are certain things we all know to be good advice: Never work with children or animals, never get involved in a land war in Asia, and never start a

Inside Pwn2Own’s High-Stakes Industrial Software Hacking Contest

On a small, blue-lit stage in a dim side room of the Fillmore Theater in Miami on Tuesday, three men sat behind laptops in front of a small crowd. Two

A Biotech Takeover Target

Investors in biotech stocks need to wrestle with the volatile nature of share prices which can spike or dive, depending on the latest news developments. The strict clinical protocols and

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 1)

About The Author

PhD in artificial intelligence at UC Berkeley, with a focus on small neural networks in perception, for autonomous vehicles. Big fan of cheesecake, corgis, and …
More about

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 inReady Player One). 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. This tutorial leverages your familiarity with web development to get started with VR development.

In this tutorial series, we will build a web-based multiplayervirtual realitygame in which players will need to collaborate to solve a puzzle. We will useA-Framefor VR modeling,MirrorVRfor cross-device real-time synchronization, andA-Frame Low Polyfor low-poly aesthetics. At the end of this tutorial, you will have a fully functioning demo online that anyone can play.

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

The seven steps in this tutorial are grouped into three sections:

  1. Setting Up The Scene(Steps 1–2)
  2. Creating The Orbs(Steps 3–5)
  3. Making The Orbs Interactive(Steps 6–7)

This first part will conclude with a clickable orb that turns on and off (as pictured below). You will use A-Frame VR and several A-Frame extensions.

(Large preview)

Setting Up The Scene

1. Let’s Go With A Basic Scene

To get started, let’s take a look at how we can set up a simple scene with a ground:

Creating a simple scene
Creating a simple scene (Large preview)

The first three instructions below are excerpted from myprevious article. You will start by setting up a website with a single static HTML page. This allows you to code from your desktop and automatically deploy to the web. The deployed website can then be loaded on your mobile phone and placed inside a VR headset. Alternatively, the deployed website can be loaded by a standalone VR headset.

Get started by navigating Then, do the following:

  1. Click on “New Project” in the top right,
  2. Click on “hello-webpage” in the drop-down,
  3. Next, click onindex.htmlin the left sidebar. We will refer to this as your “editor”.

You should now see the following Glitch screen with a default HTML file.

Glitch project: the file
Glitch project: the index.html file (Large preview)

As with the linked tutorial above, start by deleting all existing code in the currentindex.htmlfile. Then, type in the following for a basic webVR project, using A-Frame VR. This creates an empty scene by using A-Frame’s default lighting and camera.


Raise the camera to standing height. Per A-Frame VR recommendations (Github issue), wrap the camera with a new entity and move the parent entity instead of the camera directly. Between youra-scenetags on lines 8 and 9, add the following.

Next, add a large box to denote the ground, usinga-box. Place this directly beneath your camera from the previous instruction.

Yourindex.htmlfile should now match the following exactly. You can find the full source codehere, on Github.


This concludes setup. Next, we will customize lighting for a more mysterious atmosphere.

2. Add Atmosphere

In this step, we will set up the fog and custom lighting.

A preview of a simple scene with a dark mood
A preview of a simple scene with a dark mood (Large preview)

Add a fog, which will obscure objects far away for us. Modify thea-scenetag on line 8. Here, we will add a dark fog that quickly obscures the edges of the ground, giving the effect of a distant horizon.

The dark gray#111fades in linearly from a distance of 10 to a distance of 15. All objects more than 15 units away are completely obscured, and all objects fewer than 10 units away are completely visible. Any object in between is partially obscured.

Add one ambient light to lighten in-game objects and one-directional light to accentuate reflective surfaces you will add later. Place this directly after thea-scenetag you modified in the previous instruction.

Directly beneath the lights in the previous instruction, add a dark sky. Notice the dark gray#111matches that of the distant fog.

This concludes basic modifications to the mood and more broadly, scene setup. Check that your code matches thesource code for Step 2on Github, exactly. Next, we will add a low-poly orb and begin customizing the orb’s aesthetics.

Creating The Orbs

3. Create A Low-Poly Orb

In this step, we will create a rotating, reflective orb as pictured below. The orb is composed of two stylized low-poly spheres with a few tricks to suggest reflective material.

Rotating, reflective orb
(Large preview)

Start by importing the low-poly library in yourheadtag. Insert the following between lines 4 and 5.

Create a carousel, wrapper, and orb container. Thecarouselwill contain multiple orbs, thewrapperwill allow us to rotate all orbs around a center axis without rotating each orb individually, and thecontainerwill — as the name suggests — contain all orb components.

Inside the orb container, add the orb itself: one sphere is slightly translucent and offset, and the other is completely solid. The two combined mimic reflective surfaces.

Finally, rotate the sphere indefinitely by adding the followinga-animationtag immediately after thelp-sphereinside the.orbentity in the last instruction.

Your source code for the orb wrappers and the orb itself should match the following exactly.

Check that your source code matches the fullsource code for step 3on Github. Your preview should now match the following.

Rotating, reflective orb
(Large preview)

Next, we will add more lighting to the orb for a golden hue.

4. Light Up The Orb

In this step, we will add two lights, one colored and one white. This produces the following effect.

Orb lit with point lights
(Large preview)

Start by adding the white light to illuminate the object from below. We will use a point light. Directly before#orb0but within#container-orb0, add the following offset point light.

In your preview, you will see the following.

Orb lit with white point light
(Large preview)

By default, lights do not decay with distance. By addingdistance="8", we ensure that the light fully decays with a distance of 8 units, to prevent the point light from illuminating the entire scene. Next, add the golden light. Add the following directly above the last light.

Check that your code matches thesource code for step 4exactly. Your preview will now match the following.

Orb lit with point lights
(Large preview)

Next, you will make your final aesthetic modification to the orb and add rotating rings.

5. Add Rings

In this step, you will produce the final orb, as pictured below.

Golden orb with multiple rings
(Large preview)

Add a ring in#container-orb0directly before#orb0.

Notice the ring itself does not contain color, as the color will be imbued by the point light in the previous step. Furthermore, thematerial="side:double"is important as, without it, the ring’s backside would not be rendered; this means the ring would disappear for half of its rotation.

However, the preview with only the above code will not look any different. This is because the ring is currently perpendicular to the screen. Thus, only the ring’s “side” (which has 0 thickness) is visible. Place the following animation in between thea-ringtags in the previous instruction.

Your preview should now match the following:

Golden orb with ring
(Large preview)

Create a variable number of rings with different rotation axes, speeds, and sizes. You can use the following example rings. Any new rings should be placed underneath the lasta-ring.

Your preview will now match the following.

Golden orb with multiple rings
(Large preview)

Check that your code matches thesource code for step 5on Github. This concludes decor for the orb. With the orb finished, we will next add interactivity to the orb. In the next step, we will specifically add a visible cursor with a clicking animation when pointed at clickable objects.

Making The Orbs Interactive

6. Add A Cursor

In this step, we will add a white cursor that can trigger clickable objects. The cursor is pictured below.

clicking on orb
(Large preview)

In youra-cameratag, add the following entity. Thefuseattribute allows this entity the ability to trigger click events. Theraycasterattribute determines how often and how far to check for clickable objects. Theobjectsattribute accepts a selector to determine which entities are clickable. In this case, all objects of classclickableare clickable.

Next, add cursor animation and an extra ring for aesthetics. Place the following inside the entity cursor object above. This adds animation to the cursor object so that clicks are visible.

Next, add theclickableclass to the#orb0to match the following.

Check that your code matches thesource code for Step 6on Github. In your preview, drag your cursor off of them onto the orb to see the click animation in action. This is pictured below.

clicking on orb
(Large preview)

Note the clickable attribute was added to the orb itself and not the orb container. This is to prevent the rings from becoming clickable objects. This way, the user must click on the spheres that make up the orb itself.

In our final step for this part, you will add animation to control the on and off states for the orb.

7. Add Orb States

In this step, you will animate the orb in and out of an off state on click. This is pictured below.

Interactive orb responding to clicks
(Large preview)

To start, you will shrink and lower the orb to the ground. Adda-animationtags to the#container-orb0right after#orb0. Both animations are triggered by a click and share the same easing functionease-elasticfor a slight bounce.

To further emphasize the off state, we will remove the golden point light when the orb is off. However, the orb’s lights are placed outside of the orb object. Thus, the click event is not passed to the lights when the orb is clicked. To circumvent this issue, we will use some light Javascript to pass the click event to the light. Place the following animation tag in#light-orb0. The light is triggered by a customswitchevent.

Next, add the following click event listener to the#container-orb0. This will relay the clicks to the orb lights.

Check that your code matches thesource code for Step 7on Github. Finally, pull up your preview, and move the cursor on and off the orb to toggle between off and on states. This is pictured below.

Interactive orb responding to clicks
(Large preview)

This concludes the orb’s interactivity. The player can now turn orbs on and off at will, with self-explanatory on and off states.


In this tutorial, you built a simple orb with on and off states, which can be toggled by a VR-headset-friendly cursor click. With a number of different lighting techniques and animations, you were able to distinguish between the two states. This concludes the virtual reality design elements for the orbs. In the next part of the tutorial, we will populate the orbs dynamically, add game mechanics, and set up a communication protocol between a pair of players.

Smashing Editorial(rb, dm, il)

Read More

Leave a Reply

Your email address will not be published. Required fields are marked *