2016-08-09 3 views
1

私はGitHubの上の次のプロジェクトを見てきた:Aframeのオブジェクトでテンプレートコンポーネントを使用するにはどうすればよいですか?

https://github.com/ngokevin/aframe-template-component

私はテンプレートを使用する非常に新しいです。

この次のコードは動作します:

<a-asset-item id="cloud-01-obj" src="cloud_1.obj"></a-asset-item> 

    <!-- Cloud template. --> 
    <script id="clouds" type="text/x-jade-template"> 
     - for (var x = -5; x < 5; x++) { 
     - for (var z = -5; z < 5; z++) { 
      a-entity(obj-model="obj: #cloud-01-obj", position="#{x * 2} 15 #{z *2}")     
     - } 
     - } 
    </script> 
    </a-assets> 

シーンブロックにあります:

<script id="clouds" type="text/x-jade-template"> 
     - for (var x = -5; x < 5; x++) { 
     - for (var z = -5; z < 5; z++) { 
      a-entity(geometry="primitive: box; depth: 8; height: 1; width: 6", material="opacity: 0.2", position="#{x * 20} 15 #{z * 20}") 
     - } 
     - } 
    </script> 

しかし、私は、3Dオブジェクトを使用する場合、それは動作しません

<a-entity template="src: #clouds"></a-entity> 

私は、シーン内に次のコードがあるので、3Dオブジェクトのロードを知っています&すべての異なるオブジェクトはロードされる。

<!-- cloud instances --> 
    <a-entity obj-model="obj: #cloud-01-obj" position="5.0 0.0 -1" rotation="0 30 0"></a-entity> 
    <a-entity obj-model="obj: #cloud-02-obj" position="5.0 1.0 5"></a-entity> 
    <a-entity obj-model="obj: #cloud-03-obj" position="7.0 2.0 5"></a-entity> 
    <a-entity obj-model="obj: #cloud-04-obj" position="8.0 3.0 5"></a-entity> 
    <a-entity obj-model="obj: #cloud-05-obj" position="13.0 2.0 6" ></a-entity> 
    <a-entity obj-model="obj: #cloud-06-obj" position="12.0 2.0 -1" </a-entity> 
    <a-entity obj-model="obj: #cloud-07-obj" position="-2.0 4 0" ></a-entity> 
    <a-entity obj-model="obj: #cloud-08-obj" position="-10.0 0.0 0" ></a-entity> 
    <a-entity obj-model="obj: #cloud-09-obj" position="-9.0 4.0 0" ></a-entity> 
+0

オープンDOMインスペクタと見えます''の中にあります。レンダリングされたHTMLの外観はどうですか? – ngokevin

答えて

1

文字列内に余分なスペースがありました。

エンティティ(OBJモデル= "OBJ#クラウド-09-OBJ"、位置= "#{X * 2} 15#{Z * 2}")

+1

Nunjucksエンジンを指定することをお勧めします。補間が必要な場合は、最高のAPIを持っていると思います。 '' – ngokevin

関連する問題