Question

我正在A-Frame网站上浏览this basic tutorial。

对于模板组件，它使用nunjucks将模板的材质src设置为等于引用它的a-entity的data-thumb属性。

没有nunjucks可以做到这一点吗？

这是我的代码。我正在尝试使用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>

Answer 1

包含最新的模板组件：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>

如何在仅使用HTML的A-Frame中使用模板组件？

1 个答案: