Question

我对我的a-frame网站有一个简单的问题。代码工作正常，一切正常加载，但加载站点所需的时间超长。特别是在iPhone / Android上。他们的任何方法都可以加快加载速度吗？该网站为nightmaresinparis.com，代码位于

之下

<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/aframe-animation-component@3.2.1/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”＆gt;

  <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>

Answer 1

快速浏览Chrome控制台中的网络标签。你的两个obj文件是罪魁祸首：eiffel.obj是18mb，bigbat_morph是8.2mb。

如果您能找到尺寸较小的低聚替代品 - 这将有很大帮助。也许https://poly.google.com/有一些文件大小较小的替代方案。

如何加快A-frame网站的移动/桌面加载速度

1 个答案: