Aframejs 360 tour

AframeJs Basic Scene Example – 2 Aframe 360 tour

by

In today’s example, we will see how to add 360-degree images in aframe. A 360-degree image is simply a 3D panorama and any wide-angle representation or viewpoint of a physical space is a panorama.

Friends we have already seen the first example and learned lots of things from that example, Today we will see another example if you want to see the previous example check out this link: example 1

Demo

360 image source: https://pixabay.com/

Table of Contents

Aframe Example -2: Aframe 360 tour

This aframe 360 ​​tour will help you how to use 360 ​​panoramas in aframe but this post will also give you support for commonly known issues with aframe. In the end, you will get your own 360 image viewer.

Just copy the code given below and save it in an HTML file and run the code.

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
  <a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="">
      <a-box position="1.13146 0.5 -3" rotation="0 45 0"  material="color:  #171717;" geometry=""></a-box>
      <a-sphere position="-0.85371 1.25 -5" radius="1.25" color="#EF2D5E" material="color: #90479a" geometry=""></a-sphere>
      <a-cylinder position="-2.75436 0.48975 -3" radius="0.5" height="1.5" color="#FFC65D" material="color: #ad99ff" geometry="height: 5"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color: #ffffff" geometry=""></a-plane>
      <!-- <a-sky color="#ECECEC" material="color: #000000" geometry=""></a-sky> -->
      <a-sky id="skybox" src="./360.jpg"> </a-sky>
    <div class="a-loader-title" style="display: none;"></div></a-scene>
  </body>
</html>

Common known issue for this Example

Image is not loaded on A-frame
A-frame 360 Image is not loaded
  • Image is not loaded on A-frame
  • Failed to load resource: net::ERR_FAILED
  • From origin ‘null’ has been blocked by CORS policy

Frind if you see nothing in the background just check the path of the image URL we link in a-sky entity. If the image URL is ok next thing is to look console panel to find out the error.

How to open the console panel in the browser?

Friends just press the f12 button from your keyboard and the browser developer panel will open in that click on the console menu.

From origin ‘null’ has been blocked by CORS policy

This problem occurs because the file is trying to be loaded directly by Aframe. So to solve this we need to load our page on live server. So we need to create our local server. So just download Visual Studio Code and install the Live Server plugin. Now load the page again with the live server. That’s it.

Let’s Learn Something from Example

Before going further you can check out aframe official showcase example here: link

How do I show 360 panorama in a-frame a-scene with custom size?

360 panorama in a-frame a-scene with custom size
Aframejs 360 panorama in a-scene with custom size
<div id="wrapper" style="height:600px;width:600px">
    <a-scene embedded style="height:100%;width:100%>
    </a-scene>
</div>

Control Camera Rotation 360 Image in AframeJs

To set your 360 image use the rotation component on aframe a-sky entity. After setting the correct rotation position you will not need to set camera rotation settings.

 <a-sky rotation="-90 0 0" id="skybox" src=""> </a-sky>

Auto-Rotating sky in the latest version of AframeJs

Here I have shown you how to rotate a 360 sky entity but you can create one entity and wrap all entities inside it. Give it animation and the whole sense will start rotating.

<a-sky rotation="0 360 0" id="skybox" src="./360.jpg" animation="property: rotation; to: 0 0 0; dur: 6000; easing: linear; loop: true">  </a-sky>

Optional animation code syntax you could try.

<a-entity rotation="0 360 0" animation="property: rotation; to: 0 0 0; dur: 6000; easing: linear; loop: true"> <a-box position="1.13146 0.5 -3" rotation="0 45 0"  material="color:  #171717;" geometry=""></a-box>
      <a-sphere position="-0.85371 1.25 -5" radius="1.25" color="#EF2D5E" material="color: #90479a" geometry=""></a-sphere>
      <a-cylinder position="-2.75436 0.48975 -3" radius="0.5" height="1.5" color="#FFC65D" material="color: #ad99ff" geometry="height: 5"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color: #ffffff" geometry=""></a-plane>
     <a-sky  id="skybox" src="./360.jpg" >  </a-sky></a-entity>

Final A-frame 360 image Example code

<html>
<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
  <div id="wrapper" style="height:600px;width:600px">
    <a-scene embedded style="height:100%;width:100%" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui=""
      device-orientation-permission-ui="">
      <a-entity rotation="0 360 0" animation="property: rotation; to: 0 0 0; dur: 6000; easing: linear; loop: true">
        <a-box position="1.13146 0.5 -3" rotation="0 45 0" material="color:  #171717;" geometry=""></a-box>
        <a-sphere position="-0.85371 1.25 -5" radius="1.25" color="#EF2D5E" material="color: #90479a" geometry="">
        </a-sphere>
        <a-cylinder position="-2.75436 0.48975 -3" radius="0.5" height="1.5" color="#FFC65D" material="color: #ad99ff"
          geometry="height: 5"></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color: #ffffff"
          geometry=""></a-plane>
        <a-sky id="skybox" src="./360.jpg"> </a-sky>
      </a-entity>
      <div class="a-loader-title" style="display: none;"></div>
    </a-scene>
  </div>
</body>
</html>

Aframe Challange 2 – Aframe 360 tour

  • Figure out how can we add 360 images without a-sky entity.
  • Using the animation component try to change the material color of all your primitives.

Today Pro Tip

For better animation with a-frame js start learning animeJS!

Thank you see you soon.

Leave a Comment