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
1 2 3 4 5 6 7 8 9 10 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://aframe.io/releases/1.1.0/aframe.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-scene</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-scene</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://aframe.io/releases/1.1.0/aframe.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-scene</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-assets</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-asset-item</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> city <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> ./assets/city.gltf <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-asset-item</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-assets</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-gltf-model</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> #city <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-gltf-model</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-scene</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
Now it will look like this
Transform model
1 2 3 4 |
<span class="token operator"><</span> a <span class="token operator">-</span> scene <span class="token operator">></span> <span class="token operator"><</span> a <span class="token operator">-</span> box color <span class="token operator">=</span> <span class="token string">"red"</span> rotation <span class="token operator">=</span> <span class="token string">"0 45 45"</span> scale <span class="token operator">=</span> <span class="token string">"2 2 2"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">-</span> box <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">-</span> scene <span class="token operator">></span> |
- 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,…
1 2 3 4 |
<span class="token operator"><</span> a <span class="token operator">-</span> scene <span class="token operator">></span> <span class="token operator"><</span> a <span class="token operator">-</span> sky src <span class="token operator">=</span> <span class="token string">"./assets/cloud.jpg"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">-</span> sky <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">-</span> scene <span class="token operator">></span> |
More ground
- To add ground use a-plane . pair
1 2 |
<span class="token operator"><</span> a <span class="token operator">-</span> plane rotation <span class="token operator">=</span> <span class="token string">"-90 0 0"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">-</span> plane <span class="token operator">></span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://aframe.io/releases/1.1.0/aframe.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-scene</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-assets</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-asset-item</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> city <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> ./assets/scene.gltf <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-asset-item</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-assets</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-gltf-model</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> #city <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-gltf-model</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-plane</span> <span class="token attr-name">rotation</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> -90 0 0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-plane</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-sky</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> ./assets/cloud.jpg <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-sky</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a-camera</span> <span class="token attr-name">position</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 0 0.2 0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-camera</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a-scene</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
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