2

I am using a-frame in Glitch and I would like to break up my HTML docs into more manageable chunks. As one example, when I have a lot of assets in the <a-assets> tag it would be good to have that in a separate file, that's just one example though and I am looking for a general solution to separate what can be quite large files.

Normally (ie outside of Glitch) I would achieve this by changing the file name from .html to .php and then use a PHP include to reference a chunk of HTML that I save in a different file. For example I would have an HTML file with just the assets like so;

<a-assets>
<!-- all my images and mixins -->
...
</a-assets>

Save that in a folder called for example components and then reference it in my main file like so

<?php
include 'components/assets.html';
?>

I am unable to achieve this in Glitch however. When I change the index.html to index.php and then view the app I am shown the file directory rather than the app. I should say here that I am not familiar with PHP at all and discovered this solution online a few years ago, I do not use it in any other way.

So, it could be that this is not possible on Glitch (I have asked in their support forum) or maybe it is and I am doing something wrong?

If it's not possible, are there other ways (potentially using js?) that this same principle could be achieved? I have tried this w3 solution like so;

<!DOCTYPE html>
<html>
  <head>
    <title>Aframe - JS include test</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="js/include.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity w3-include-html="components/test.html"><a-entity>
      <a-entity w3-include-html="components/test2.html"></a-entity>
    </a-scene>
    <script>
    includeHTML();
    </script>
  </body>
</html>

Referencing these 2 files as a test;

components/test.html

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>

components/test2.html

<a-sphere position="-3 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

and then the js/include.js file as follows

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}

But this is not reliable, it seems to only load one file and even that seems buggy. I know that this is something to do with the way that a-frame loads the page/canvas in so I didn't really expect it to work at all. It is not as clean, reliable or straightforward as the PHP solution I use elsewhere.

Have other people encountered this issue? It would be good to understand how people handle this.

If you need any more info from, please let me know.

Nick
  • 914
  • 1
  • 10
  • 30

1 Answers1

1

On glitch, you can use similar functionality to php templating using serverside templating with handlebars. Here's a quick example:

https://glitch.com/edit/#!/a-frame-ss-handlebars-templates

The main file is views/index.hbs and it includes templates like 'head' and 'assets' which would allow you to break up your code.

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a-scene>
      {{> assets }}

      <a-entity id="poly" poly-api-obj="obj: #cycle-obj; mtl: #cycle-mtl" position="0 0 -5" scale="0.3 0.3 0.3"></a-entity>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
Noam Almosnino
  • 866
  • 1
  • 6
  • 8