如何在 Aframe 中使用带有对象的模板组件?
How can I use a template component with objects in Aframe?
我一直在 GitHub 上查看以下项目:
https://github.com/ngokevin/aframe-template-component
我对使用模板还很陌生。
以下代码有效:
<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-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>
场景块中有:
<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>
这是字符串中的额外 space。
a-entity(obj-model="obj:#cloud-09-obj", position="#{x * 2} 15 #{z *2}")
我一直在 GitHub 上查看以下项目:
https://github.com/ngokevin/aframe-template-component
我对使用模板还很陌生。
以下代码有效:
<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-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>
场景块中有:
<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>
这是字符串中的额外 space。
a-entity(obj-model="obj:#cloud-09-obj", position="#{x * 2} 15 #{z *2}")