Updated Virtual Showroom

<div id="virtual-showroom">
  <meta charset="utf-8">
  <title>AI Art Shop Virtual Gallery</title>
  <meta name="description" content="AI Art Shop Virtual Gallery">

  <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>

  <a-scene id="scene">
    <a-assets>
      
<!-- FRONT WALL -->
      <img src="https://cdn.shopify.com/s/files/1/0407/1984/3495/products/img0000002451.jpg?v=1593380922" id="amore1">
      <img src="https://static.wixstatic.com/media/6096b6_26dc58cc093c46968dbf9776944e0099~mv2.jpg" id="amore2">
      <img src="https://static.wixstatic.com/media/6096b6_0bd86dc5fd774217be83690a5f00ecd3~mv2.jpg" id="amore3">
      <img src="https://static.wixstatic.com/media/6096b6_9b510d8140854b1e9fea27de7c2624b8~mv2.jpg" id="amore4">
      <img src="https://static.wixstatic.com/media/6096b6_796c56b086d24a89b684759f4fb79164~mv2.jpg" id="amore5">
      <img src="https://static.wixstatic.com/media/6096b6_9690858a68cf4261b25b149f429519f3~mv2.jpg" id="amore6">
      
<!-- BACK WALL -->
      <img src="https://static.wixstatic.com/media/6096b6_72e922c24e024499a0d4c2b602139aeb~mv2.jpg" id="arte-orientale1">
      <img src="https://static.wixstatic.com/media/6096b6_91e18477a84f445c9790bbeab8b79f72~mv2.jpg" id="arte-orientale2">
       <img src="https://static.wixstatic.com/media/6096b6_19ddb164c0894accaecde8bde1763035~mv2.jpg" id="arte-orientale3">
        <img src="https://static.wixstatic.com/media/6096b6_80b51057cc7c44e99484973f9ba00696~mv2.jpg" id="arte-orientale4">
         <img src="https://static.wixstatic.com/media/6096b6_e0c8b4e36f5c4df7931b9d6098b35c9a~mv2.jpg" id="arte-orientale5">
          <img src="https://static.wixstatic.com/media/6096b6_a2e56933c90848b38edcf587e61a3269~mv2.jpg" id="arte-orientale6">

<!-- RIGHT WALL -->

      <img src="https://static.wixstatic.com/media/6096b6_d5c1979a105f40fc8273afc4a6f1c0b2~mv2.png" id="impeto1">
      <img src="https://static.wixstatic.com/media/6096b6_61904d288c4944a78b079a3f9d853b1f~mv2.png" id="impeto2">
      <img src="https://static.wixstatic.com/media/6096b6_ca28c302ff8349279820d69a7f7cd3ec~mv2.png" id="impeto3">
      <img src="https://static.wixstatic.com/media/6096b6_30a2cc899b5149f19ccf7551d07c77c2~mv2.jpg" id="impeto4">
      <img src="https://static.wixstatic.com/media/6096b6_1f45120300074229a84261b55589556f~mv2.jpg" id="impeto5">
      <img src="https://static.wixstatic.com/media/6096b6_31001f6ca50e487195a36f20a7bf0713~mv2.jpg" id="impeto6">

<!-- LEFT WALL -->

      <img src="https://static.wixstatic.com/media/6096b6_4255edefbc8b47aaa83d791c8db677f1~mv2.jpg" id="paura1">
      <img src="https://static.wixstatic.com/media/6096b6_4fc50433e0f24710a683fd3ccd9184be~mv2.jpg" id="paura2">
      <img src="https://static.wixstatic.com/media/6096b6_7e12bae938b94d01acfbb64dd2e8af7f~mv2.jpg" id="paura3">
      <img src="https://static.wixstatic.com/media/6096b6_668d312209dd46fdad40238a87c84649~mv2.jpg" id="paura4">
      <img src="https://static.wixstatic.com/media/6096b6_72df4554d39744cab7b3504cd45dd50f~mv2.jpg" id="paura5">
      <img src="https://static.wixstatic.com/media/6096b6_b6eaef501e3345c9abd35a6a50a38703~mv2.jpg" id="paura6">


<!-- FRONT WALL DESCRIPTIONS-->
      
      <img src="https://static.wixstatic.com/media/6096b6_3de65d32e4fc4cfbadb7265829587958~mv2.jpg" id="descrizione-amore1">
      <img src="https://static.wixstatic.com/media/6096b6_a1f636ca98b04390884597d7c2e527a4~mv2.jpg" id="descrizione-amore2">
      <img src="https://static.wixstatic.com/media/6096b6_9434c4b7298541908893e76debc1ee1d~mv2.jpg" id="descrizione-amore3">
      <img src="https://static.wixstatic.com/media/6096b6_2936dac1e34d47dc988857cbdab9c570~mv2.jpg" id="descrizione-amore4">
      <img src="https://static.wixstatic.com/media/6096b6_621cb5404c944c86995e20c566148930~mv2.jpg" id="descrizione-amore5">
      <img src="https://static.wixstatic.com/media/6096b6_f46f0b98e6164716bb6a2f3506e25a00~mv2.jpg" id="descrizione-amore6">

<!-- BACK WALL DESCRIPTIONS-->

      <img src="https://static.wixstatic.com/media/6096b6_7c9b88193de046bd85d85c48717b453b~mv2.jpg" id="descrizione-arte-orientale1">
      <img src="https://static.wixstatic.com/media/6096b6_778e8f545bf8468ba9013cccd3ed418b~mv2.jpg" id="descrizione-arte-orientale2">
      <img src="https://static.wixstatic.com/media/6096b6_4958e8e6b380490997c593b069dd2457~mv2.jpg" id="descrizione-arte-orientale3">
      <img src="https://static.wixstatic.com/media/6096b6_0e7ce19342714750a267ce4992caaba4~mv2.jpg" id="descrizione-arte-orientale4">
      <img src="https://static.wixstatic.com/media/6096b6_6a7ac0bf7089440b9c312e8f66df5f59~mv2.jpg" id="descrizione-arte-orientale5">
      <img src="https://static.wixstatic.com/media/6096b6_7387f9dd498d408a80d5ce8e129cc7f1~mv2.jpg" id="descrizione-arte-orientale6">
    
<!-- RIGHT WALL DESCRIPTIONS-->    
    
      <img src="https://static.wixstatic.com/media/6096b6_fc3befffc4354367a42261ad4b056bce~mv2.jpg" id="descrizione-impeto1">
      <img src="https://static.wixstatic.com/media/6096b6_e50732c6bd194468905d8a416ad87ec4~mv2.jpg" id="descrizione-impeto2">
      <img src="https://static.wixstatic.com/media/6096b6_ab51119cc8d1476d8392ab49ac34a4e0~mv2.jpg" id="descrizione-impeto3">
      <img src="https://static.wixstatic.com/media/6096b6_c75994cec8cf4a1fb841a614877d2b86~mv2.jpg" id="descrizione-impeto4">
      <img src="https://static.wixstatic.com/media/6096b6_5e51d57061964b579906da3141b5092a~mv2.jpg" id="descrizione-impeto5">
      <img src="https://static.wixstatic.com/media/6096b6_28477c525631454b8121fda3721820fe~mv2.jpg" id="descrizione-impeto6">

<!-- LEFT WALL DESCRIPTIONS-->

      <img src="https://static.wixstatic.com/media/6096b6_0f909ff89c8f407b992259c90d815e88~mv2.jpg" id="descrizione-paura1">
      <img src="https://static.wixstatic.com/media/6096b6_1c9c111e051f41ceacb03f2cf64b5cba~mv2.jpg" id="descrizione-paura2">
      <img src="https://static.wixstatic.com/media/6096b6_3c8d5417d26f4a7faf4582ea51666649~mv2.jpg" id="descrizione-paura3">
      <img src="https://static.wixstatic.com/media/6096b6_95b8ff4772b44b2cbfc56a3779f72c49~mv2.jpg" id="descrizione-paura4">
      <img src="https://static.wixstatic.com/media/6096b6_9d8a6d7db8e542eb99940222fcae1845~mv2.jpg" id="descrizione-paura5">
      <img src="https://static.wixstatic.com/media/6096b6_35d2073b2cda4e098ad717f510fe06d1~mv2.jpg" id="descrizione-paura6">

    </a-assets>

    <!-- MODELLO 3D DEL MUSEO -->
    <a-obj-model position="0 17 0" scale="100 100 100" src="https://cdn.glitch.com/0d4478a6-c929-4384-868c-0052c376ee4e/louvre.obj?1528751180506" mtl="https://cdn.glitch.com/0d4478a6-c929-4384-868c-0052c376ee4e/louvre.mtl?1528751180506"></a-obj-model>

    <!-- CAMERA -->
    <a-entity id="camera" position="-10 0 0">
      <a-entity camera look-controls wasd-controls>
        <!-- PUNTATORE -->
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusInner: 0.2; radiusOuter: 0.25;" material="color: white; shader: flat" cursor="fuse: true">
          <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="alternate" from="1 1 1" to="0.2 0.2 0.2" dur="1000"></a-animation>
        </a-entity>
      </a-entity>
    </a-entity>

    <!-- FRONT WALL -->
    <a-plane height="25" width="25" material="src: #amore1;" position="-17.5 -5 -122" rotation="0 0 0" data-camera-position="-15 -5 -80" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-amore1; opacity: 0.8" data-camera-position="0 9 -9.99" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #amore2;" position="17.5 -5 -122" rotation="0 0 0" data-camera-position="-13 9 -9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-amore2; opacity: 0.8" data-camera-position="-13 9 -9.99" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #amore3;" position="-94.5 -5 -122" rotation="0 0 0" data-camera-position="13 9 -9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-amore3; opacity: 0.8" data-camera-position="13 9 -9.99" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #amore4;" position="-64.5 -5 -122" rotation="0 0 0" data-camera-position="13 9 -9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-amore4; opacity: 0.8" data-camera-position="13 9 -9.99" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #amore5;" position="64.5 -5 -122" rotation="0 0 0" data-camera-position="13 9 -9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-amore5; opacity: 0.8" data-camera-position="13 9 -9.99" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #amore6;" position="94.5 -5 -122" rotation="0 0 0" data-camera-position="13 9 -9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-amore6; opacity: 0.8" data-camera-position="13 9 -9.99" cursor-listener></a-plane>
    </a-plane>

    <!-- BACK WALL -->
    <a-plane height="25" width="25" material="src: #arte-orientale1;" position="-17.5 -5 122" rotation="0 180 0" data-camera-position="13 9 9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-arte-orientale1; opacity: 0.8" data-camera-position="13 9 9.99" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #arte-orientale2;" position="17.5 -5 122" rotation="0 180 0" data-camera-position="-13 9 9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-arte-orientale2; opacity: 0.8" data-camera-position="-13 9 9.99" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #arte-orientale3;" position="94.5 -5 122" rotation="0 180 0" data-camera-position="0 9 9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-arte-orientale3; opacity: 0.8" data-camera-position="0 9 9.99" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #arte-orientale4;" position="64.5 -5 122" rotation="0 180 0" data-camera-position="0 9 9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-arte-orientale4; opacity: 0.8" data-camera-position="0 9 9.99" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #arte-orientale5;" position="-94.5 -5 122" rotation="0 180 0" data-camera-position="0 9 9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-arte-orientale5; opacity: 0.8" data-camera-position="0 9 9.99" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #arte-orientale6;" position="-64.5 -5 122" rotation="0 180 0" data-camera-position="0 9 9.99" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-arte-orientale6; opacity: 0.8" data-camera-position="0 9 9.99" cursor-listener></a-plane>
    </a-plane>

    <!-- RIGHT WALL -->
    <a-plane height="25" width="25" material="src: #impeto1;" position="119.5 -5 -17.5" rotation="0 -90 0" data-camera-position="9.99 9 13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-impeto1; opacity: 0.8" data-camera-position="9.99 9 13" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #impeto2;" position="119 -5 17.5" rotation="0 -90 0" data-camera-position="9.99 9 0" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-impeto2; opacity: 0.8" data-camera-position="9.99 9 0" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #impeto3;" position="119 -5 -94.5" rotation="0 -90 0" data-camera-position="9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-impeto3; opacity: 0.8" data-camera-position="9.99 9 -13" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #impeto4;" position="119 -5 -64.5" rotation="0 -90 0" data-camera-position="9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-impeto4; opacity: 0.8" data-camera-position="9.99 9 -13" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #impeto5;" position="119 -5 94.5" rotation="0 -90 0" data-camera-position="9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-impeto5; opacity: 0.8" data-camera-position="9.99 9 -13" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #impeto6;" position="119 -5 64.5" rotation="0 -90 0" data-camera-position="9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-impeto6; opacity: 0.8" data-camera-position="9.99 9 -13" cursor-listener></a-plane>
    </a-plane>

    <!-- LEFT WALL -->
    <a-plane height="25" width="25" material="src: #paura1;" position="-119 -5 17.5" rotation="0 90 0" data-camera-position="-9.99 9 13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-paura1; opacity: 0.8" data-camera-position="-9.99 9 13" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #paura2;" position="-119 -5 -17.5" rotation="0 90 0" data-camera-position="-9.99 9 0" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-paura2; opacity: 0.8" data-camera-position="-9.99 9 0" cursor-listener></a-plane>
    </a-plane>

    <a-plane height="25" width="25" material="src: #paura3;" position="-119 -5 -94.5" rotation="0 90 0" data-camera-position="-9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-paura3; opacity: 0.8" data-camera-position="-9.99 9 -13" cursor-listener></a-plane>
    </a-plane>
  
  <a-plane height="25" width="25" material="src: #paura4;" position="-119 -5 -64.5" rotation="0 90 0" data-camera-position="-9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-paura4; opacity: 0.8" data-camera-position="-9.99 9 -13" cursor-listener></a-plane>
    </a-plane>

  
  <a-plane height="25" width="25" material="src: #paura5;" position="-119 -5 94.5" rotation="0 90 0" data-camera-position="-9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-paura5; opacity: 0.8" data-camera-position="-9.99 9 -13" cursor-listener></a-plane>
    </a-plane>
    
    <a-plane height="25" width="25" material="src: #paura6;" position="-119 -5 64.5" rotation="0 90 0" data-camera-position="-9.99 9 -13" cursor-listener>
      <a-plane height="10" width="15" position="0 -20 0" visible="false" material="src: #descrizione-paura6; opacity: 0.8" data-camera-position="-9.99 9 -13" cursor-listener></a-plane>
    </a-plane>
    
  </a-scene>
  
</div>

<style>
#virtual-showroom {
width: 100%;
max-height: 500px;
}
</style>

  <script>
    // Registro un componente "cursor-listener".
    // Questa è una funzionalità del framework "aframe" che permette di interagire con gli elementi
    AFRAME.registerComponent('cursor-listener', {
      init: function () {
        // riferimento all'elemento
        var thisElement = this.el

        // aggiungo un evento all'elemento.
        // ogni volta che sarà cliccato, verrà richiamata la funzione interna
        thisElement.addEventListener('click', function (evt) {
          var cameraPosition = evt.target.dataset.cameraPosition.split(' ')
          var cameraElement = document.querySelector("#camera")

          cameraElement.setAttribute('look-controls', false)
          cameraElement.setAttribute('position', { x: cameraPosition[0], y: cameraPosition[1], z: cameraPosition[2] })
          cameraElement.setAttribute('look-controls', true)
        })

        // quando il quadro viene puntato
        thisElement.addEventListener('mouseenter', function (evt) {
          // rendo visibile il testo
          if(thisElement.children[0]) thisElement.children[0].setAttribute('visible', true)
        })

        // quando il quadro smette di essere puntato
        thisElement.addEventListener('mouseleave', function (evt) {
          // rendo invisibile il testo
          if(thisElement.children[0]) thisElement.children[0].setAttribute('visible', false)
        })
      }
    })
  </script>