Search code examples
aframe

How to speed up mobile/desktop loading of A-frame website

I have a quick question regarding my a-frame website. Code is working fine, everything loads properly, but the amount of time it takes to load the site is super long. Especially on an iPhone/Android. Is their any methods to speed up the loading? The website is nightmaresinparis.com and the code is below

<html>


<meta charset="utf-8" />

<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

 <!-- Script For Rain -->
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>

<!-- Script For Highlighting -->
<script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
<!-- Script For Web Travel -->
<script>
AFRAME.registerComponent('navigate-on-click', {
  schema: {
    url: {default: ''}
  },

  init: function () {
   var data = this.data;
    var el = this.el;

   el.addEventListener('click', function () {
     window.location.href = data.url;
    });
   }
  });        
</script>


<title>Nightmares In Paris </title>


<a-scene  fog="type: exponential; color: #AAA" density=".00005" raycaster="far: 100; objects: [link];" cursor="mode: mouse">

    <a-assets>

    <img id="sky" src="Storm.jpg">

      <a-asset-item id="bat" src="bat.obj"></a-asset-item>

      <a-asset-item id="bigbat" src="bigbat_morph.obj"></a-asset-item>

      <a-asset-item id="tower" src="https://nightmaresinparis.com/eiffel.obj"></a-asset-item>



    </a-assets>


  <a-obj-model src="https://nightmaresinparis.com/eiffel.obj" position="2.513 65 -295"  material="color:#121212" obj-model="">

  <a-animation attribute="rotation" dur="5000" to="0 -360 0" repeat="indefinite"></a-animation>

</a-obj-model>

http://nightmaresinparis.bigcartel.com/" color="#FFFFFF" shadow event-set__enter="_event: mouseenter; color: #FFFF00" event-set__leave="_event: mouseleave; color: #FFFFFF">

  <a-animation attribute="rotation" dur="5000" to="0 360 0" repeat="indefinite"></a-animation>

  </a-box>

 <!-- Twitter Social Box -->

  <a-box width="100" height="40" depth="100" position="2.513 -65 -370" src="https://nightmaresinparis.com/twitter.png" navigate-on-click="url: https://www.twitter.com/bethenightmare/" color="#FFFFFF" shadow event-set__enter="_event: mouseenter; color: #FFFF00" event-set__leave="_event: mouseleave; color: #FFFFFF">

  <a-animation attribute="rotation" dur="5000" to="0 -360 0" repeat="indefinite"></a-animation>


  </a-box>

 <!-- Instagram Social Box -->

  <a-box width="100" height="40" depth="100" position="2.513 -110 -370" src="https://nightmaresinparis.com/Instagram.png" navigate-on-click="url: https://www.instagram.com/nightmaresinparis/" color="#FFFFFF" shadow event-set__enter="_event: mouseenter; color: #FFFF00" event-set__leave="_event: mouseleave; color: #FFFFFF">


 <a-animation attribute="rotation" dur="5000" to="0 360 0" repeat="indefinite"></a-animation>

 </a-box>

 <!-- About Us -->
 <a-box width="200" height="85" position="-160 0 -125" rotation="0 85 0" src="https://nightmaresinparis.com/AboutUsVRSlide.png" 
 navigate-on-click="url: http://nightmaresinparis.bigcartel.com/about-us" color="FFFFFF" shadow event-set__enter="_event: mouseenter; color: #FFFF00"
 event-set__leave="_event: mouseleave; color: #FFFFFF">
 </a-box>

 <!-- The Love Project -->
 <a-box width="200" height="85" position="165 0 -85" rotation="0 -85 0" src="https://nightmaresinparis.com/LoveProjectVRSlide.png" 
 navigate-on-click="url: http://nightmaresinparis.bigcartel.com/the-love-project" color="FFFFFF" shadow event-set__enter="_event: mouseenter; color: #FFFF00" 
 event-set__leave="_event: mouseleave; color: #FFFFFF"></a-box>



<!-- Bats -->

<a-obj-model src="#bigbat" mtl="bigbat_morph.mtl" position="513.517 546.477 -1655.234" rotation="-36.326 150.058 -128 .801" material="color:#121212" obj-model="">
</a-obj-model>

<a-obj-model src="#bat" position="613.517 546.477 -1655.234" rotation="-36.326 150.058 -128 .801" material="color:#121212" obj-model="">
</a-obj-model>

<a-obj-model src="#bat" position="-909.061 546.477 -2422.7" rotation="-59.01465289847479 131.6084055415501 -112.29972784564136" material="color:#121212">
</a-obj-model>

<a-obj-model src="#bat" position="-122.324 -534.864 -1486.223" rotation="26.35605857601787 27.559269945792597 31.455382952682196" material="color:#121212">   
</a-obj-model>

<a-obj-model src="#bat" position="1786.062 368.994 -2422.7" rotation="31.341 29.049 34.549" material="color:#121212" obj-model="">
</a-obj-model>

<a-obj-model src="#bat" position="-234.581 1009.819 -4363.575" rotation="31.340791393656033 29.048960213132737 34.54935504638864" material="color:#121212">
</a-obj-model>

<a-camera position="-20 0 -100" rotation="-7.849521793292279 -7.849521793292279 0" camera="active:true" look-controls cursor="" wasd-controls="" >

<a-entity position="0 0 -1" geometry="primitive:ring;radiusInner:0.02;radiusOuter:0.03" material="shader:flat;color:cyan" raycaster="">
</a-entity>

</a-camera>

  <a-entity position="0.148 -10.937 0" scale="0.62 1 1" rain="count:10000;color:#5353ff;height:100;" mixin="null" texture="rainrain.png">
  </a-entity>

 </a-scene>

Solution

  • Did a quick glance at the network tab in the Chrome console. Your two obj files are the culprits: The eiffel.obj is 18mb and bigbat_morph is 8.2mb.

    If you could find low poly alternatives that are smaller in size - that would help a lot. Perhaps https://poly.google.com/ has some alternatives that are smaller in file size.