Adding Template Component to scenes.html

[joduffy]

Hi,

Thanks for providing the template-looper example. I have tried to adapt it and create a component that would allow you to transition between scenes on a hotspot/object that is selected. But for some reason nothing seems to be triggering.

The following is the component I have written.

Note: The reason why I have the exit-vr event is to make the scene exit out of steroview on mobile devices. I seen that when you exit normally, you are left with a steroview instead of a standard player that appeared when the page was first loaded - before pressing the enter VR button.

components/template-scene.swapper.js :

      AFRAME.registerComponent('template-scene-swapper', 
      {
        schema: 
        {
          level: {type: 'string'}
        },
            
        init: function () 
        {
          var el = this.el;
          this.maskEl = this.el.sceneEl.querySelector('#mask');
          
          el.addEventListener('mouseenter', function () {
            el.setAttribute('color', '#24CAFF');  
          });
          
          el.addEventListener('mouseleave', function () {
            el.setAttribute('color', '#EF2D5E');  
          });
          
          el.addEventListener('click', function () {
            this.maskEl.emit('fade');
            el.setAttribute('template', 'src', this.data.level);
            self.maskEl.emit('fade');
          });

           el.addEventListener('exit-vr', function () {
             el.sceneEl.reload();
            });
        } 
      });

Here is an example of how I am applying it. As you can see, I am just adding it to a box entity.

scenes/spheres.html :

<script id="sphere" type="text/nunjucks">
  <a-entity geometry="primitive: sphere" material="color: {{ color }}"></a-entity>
</script>

<a-entity template="src: #sphere" data-color="#4C5F7A" position="-2 0 0"></a-entity>
<a-entity template="src: #sphere" data-color="#393E6F" position="2 0 0"></a-entity>
<a-entity template="src: #sphere" data-color="#3D2E4F" position="0 2 0"  
          template-scene-swapper="level: scenes/boxes.html"></a-entity>

The scene looks like this:

index.html :

    <a-scene>
      <a-entity template="src: scenes/spheres.html"
                position="0 0 -8"></a-entity>

      <a-sky color="#D7C1E0"></a-sky>

      <a-sky id="mask" color="#111" opacity="0" radius="2">
        <a-animation attribute="material.opacity" begin="fade" from="0" to="1" dur="200"
                     direction="alternate" repeat="1"></a-animation>
      </a-sky>
      
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
      
    </a-scene>