Create your own Metaverse with A-frame and Three.js

A tutorial to create metaverse

Overview

• I use a-frame – a web framework to create VR applications.
• The official docs of a-frame can be read here: https://aframe.io/docs/1.3.0/introduction/
• Overall, the docs for a-frame are a bit sparse. But fortunately, a-frame build on top of three.js, so you can read three.js and apply.
• Results after this tutorial part 1:

Create files

First create an Html . file

Explain:

• We add the pair <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> to import aframe
• In body – add a pair <a-scene></a-scene> <– my code will be in this pair

More models

• Go to sketchfab to buy a model – here I get a temporary model https://sketchfab.com/3d-models/simplepoly-city-low-poly-assets-d1e9d4d0f7054c8ba36eb1a4fc41aca0
• Create an assets folder at the root – paste the downloaded models in
• The folder structure will look like this
• To load the model we add <a-gltf-model src=”path/to/model.gltf”></a-gltf-model>
• But usually to manage models easier, I will put the path of the models in the middle of the <a-assets></a-assets> pair and then call it to use Example:

Now it will look like this

Transform model

• To rotate: rotation =”xyz”
• To scale: scale=”xyz”

Add ambient scene background

• To add a background, you add a pair of a-sky – its param, it can be color (color=”#HEX”) or photos, videos,…

More ground

• To add ground use a-plane . pair

Adjust the camera so that the viewing angle is at eye level

• In case I don’t configure the camera, the aframe will get its default a-camera config – for config, add the <a-camera></a-camera> pair.
• The code will now look like this

Deploy using github pages

Go to settings -> pages -> deploy from branch -> main -> save

Interim results: https://cuongpo.github.io/metaverse-tutorial/

I’m here for now – I have to go wash the dishes – Bye guys

Upcoming features:

• Collide
• Multiplayer
• Chat