🎃 Code a 3D VR Halloween Scene with A-frame for the Meta Quest

This project shows you how to make your own 3D VR Halloween scene that you can view using a Meta Quest (2) VR headset or on a phone. This is a good project for teens who have a Meta Quest headset. There's something very cool about designing your own scene and then moving around it in VR! It's early days for VR and the metaverse but it looks like it will play an important role in the future so it's a good idea for young people to understand how to create for these platforms.

This project runs in the Browser on the Meta Quest and allows you to create a fully immersive VR experience.

What is A-frame?

A-frame is a platform that allows you to write code that creates 3D objects and scenes that you can view in a web browser. You can develop and view A-frame projects in a web browser on a computer. You can also open A-frame projects in a web browser on a VR headset or a phone for a VR or AR (augmented reality) experience.

There are lots of ways to create VR experiences with code. We chose A-frame because it's easy to get started with, has good documentation, offers a proper VR experience, and has lots of options for extending to more advanced techniques when you are ready. 

Using Glitch to create an A-frame project

We used the Glitch online editor to create our project. Glitch has a handy A-frame starter project that you can remix to get started. 

You can view the project at: https://halloween-pumpkin.glitch.me

Online safety: You must be at least 13 to create a Glitch account. Glitch projects are public by default so do not share personal information.

Controls: Use WASD, arrow keys and dragging with the mouse to move around on a computer. 

Viewing our Halloween scene on a Meta Quest (2)

Open the Browser app on the Meta Quest (2). Enter the url 'https://halloween-pumpkin.glitch.me'. Click 'VR' in the bottom right to enter full VR mode. 

The camera will move when you look around. Use the thumbstick on the right controller to move around. See if you can look behind the pumpkin.

Press the Menu button on the left controller to exit to the browser or the Home button on the right controller to quit the browser. 

Coding with A-frame

A-frame allows you to write code in a web page using a language that builds on HTML (the language web pages are written in.)

We'll take you through the concepts that are used in this example so that you can understand the code and make changes. 

Using an A-frame environment 

A-frame environments are a really quick way to get started with a VR scene. 

We've used the 'checkerboard' environment with purple 'spikes' as dressing and some 'fog' for atmosphere. 

You can find other things to change in the environment documentation.

Adding objects

The table is made of 'box' 3D shapes, the pumpkin is a 'sphere' (squashed using 'scale') and its stalk is a cylinder.

Important concepts: 

• The unit of measurement is meters, so a radius of 0.25 gives you a pumpkin that measures 50cm across. This is important for making things are the right size for a person in a VR environment. 
• The player camera is positioned at "0 1.6 0". 
• The table top is positioned at "0 1 -6" which is 1 meter off the ground and 6 meters in front of the player. 

Using Entities

Entities can be used for lots of purposes, they are less specific than the 3D objects such as sphere. We have used Entities to group objects together to scale the pumpkin and its stalk, and to make all the objects use shadows. 

Wrapping an image around a sphere

To make more visually interesting objects, you can wrap a 2D image around a 3D shape. The pumpkin has a 2D 'skin' as a material. This was created using the Google Drawings tool but you can you any 2D drawing tool that can export png or jpg images.  You can use our Pumpkin skin on Google Drawings as a starting point for a different Pumpkin face.

Maths: If the width of the image is the circumference (so it can wrap around the pumpkin) then the height needs to be half the circumference (so it can wrap from the base to the top of the pumpkin.) The actual measurements don't matter, it just needs to be a 2:1 ratio.

Adding movement controls

The example includes code for using the Meta touch controllers. Use the right joystick to move around. 

Make it yours

• Create a Glitch account and remix our example project
• Try changing the environment settings
• Add more pumpkins and scenery, see the A-frame documentation
• Use different colors - you can use any of the CSS color names or Hex color codes. 
• Create different pumpkin skins (export from your drawing tool and drag into Glitch to create an Asset that you can use in your project.)
• View your scene on a Meta Quest headset. Use the menu button on the left controller to go back to the browser and 'refresh' when you make changes to your scene.

Summary

We showed you how to use A-frame to create a VR scene that you can view and move around in on a Meta (Oculus) Quest headset. We looked at the concepts involved in creating 3D objects and scenes, adding 2D skins as materials, and creating controls for movement. 

Not got a Meta Quest 2 headset yet? Check our of review of the Meta (Oculus) Quest 2 VR headset for teens or our review of the new for 2023 Meta Quest 3.