Creating Village In A-frame Doesn’t Have To Be Hard

A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. In the previous week, I was exploring the A-Frame framework. I have created a village in the A-Frame framework.

Let’s get started. How I did this ?? The only thing you need to be installed on your computer machine is the latest version of Python. The Editor is not mandatory you can work on the notepad, but it’s good to work with it such as VSCode and Brackets.

Let’s Do It…!

Firstly, I have downloaded the 3D Model of the village from SkectchFab. Extract the downloaded zip in the project folder. After that, write the following code. Moreover, to give more cool effects, I have used the evening sky wallpaper for the sky, and for the ground, I have used the lava texture image. Write the code and save it with a .html extension.

<!doctype html>
<html>
  <head>
    <title>Basic Shapes</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>

  <body>
    <a-scene>
      <a-assets>
        <img id = 'floor' src="assets/lava-texture.jpg">
        <img id = 'ground-floor' src="assets/ground-texture.jpg">
        <img id = 'sky' src="assets/dark-sky.jpg">
        <a-asset-item id = 'village' src = 'assets/scene.gltf'></a-asset-item>
      </a-assets>
      <a-sky src = "#sky"></a-sky>
      <a-entity gltf-model="#village"></a-entity>
     <a-plane material="color: #ffffff; src: #floor; repeat: 5000 5000;"  rotation="-90 0 0" scale = "10000 10000 1" roughness="0.9"> </a-plane>

    </a-scene>
    <a-entity position="0 100 200">
      <a-camera></a-camera>
    </a-entity>
      </body> 
</html>

Let’s Execute…!

Now, it’s time to execute the code. To execute the code, open the terminal and change the directory to the project folder. Type the following command.

python -m http.server

That’s it…!! It is so easy. Now, your local HTTP server is created in your machine and the index.html file will open automatically and We have a village is ready.

Tutorials

Creating Village In A-frame Doesn’t Have To Be Hard