Как использовать компонент шаблона в A-Frame только с HTML?

Я просматриваю это базовое руководство по Сайт A-Frame.

Для компонента шаблона он использует nunjucks, чтобы установить src материала шаблона равным атрибуту data-thumb объекта a-entity, который на него ссылается.

Можно ли обойтись без нанджаков?

Вот мой код. Я пытаюсь использовать attr (data-thumb), но это не работает.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vrgallery</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>

</head>

<body>


<a-scene>


 <a-assets>
<audio id="click-sound" src="audio/click.ogg"></audio>
<!-- Images. -->
<img id="city" src="img/city.jpg">
<img id="city-thumb" src="img/thumb-city.jpg">
<img id="cubes" src="img/cubes.jpg">
<img id="cubes-thumb" src="img/thumb-cubes.jpg">
<img id="sechelt" src="img/sechelt.jpg">
<img id="sechelt-thumb" src="img/thumb-sechelt.jpg">

   <!-- template for panel -->
   <script id="plane" type="text/html">
  <a-plane class="link" height="1" width="1" position="0 2 -5"
     material="shader: flat; src: attr(data-thumb);"
     sound="on: click; src: #click-sound"></a-plane>
  </script>


  </a-assets>

  <!-- 360-degree image. -->
  <a-sky id="image-360" radius="10" src="#city"></a-sky>

 <!-- Clones -->
 <a-entity id="links" layout="layout: line; margin: 1.5" position="-1.5 0 0">
 <a-entity template="src: #plane" data-thumb="#city-thumb"></a-entity>
  <a-entity template="src: #plane" data-thumb="#cubes-thumb"></a-entity>
    <a-entity template="src: #plane" data-thumb="#sechelt-thumb"></a-entity>
  </a-entity>


  <!-- Camera + Cursor. -->
   <a-camera>
<a-cursor id="cursor">
  <a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
               from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-    animation>
</a-cursor>
</a-camera>
</a-scene>


</body>
</html>

aframe
person Naheel Jawaid    schedule 08.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Включите последний компонент шаблона: https://github.com/ngokevin/kframe/tree/master/components/template/dist

И используйте формат строки шаблона:

https://github.com/ngokevin/kframe/blob/master/components/template/examples/template-string/cubes.template#L1.

<script id="plane" type="text/html">
  <a-plane class="link" height="1" width="1" position="0 2 -5"
     material="shader: flat; src: ${thumb};"
     sound="on: click; src: #click-sound"></a-plane>
</script>
<a-entity template="src: #plane" data-thumb="lol"></a-entity>
person ngokevin    schedule 08.11.2016