有一个Python函数可以输出选定的背景
<a-sky ID="sky" color="{{object.background}}"></a-sky>
背景格式为“#c6aa99”,“#e1a600”,“#290942”,“星级”,“城市”,“火星”。
如何使变量值等于'star','city','Mars'从<a-assets>
加载图像?
<a-scene id="aframe" foo >
<a-assets>
<!-- Images. -->
<img id="star" src="https://ucarecdn.com/30d7b1e6-2867-4396-a64d-8fb41e69ce0d/">
<img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
<img id="cosmos" src="https://ucarecdn.com/34a5bbdb-1820-44c3-a848-26acd9356bbe/">
<img id="sechelt" src="https://ucarecdn.com/40714251-095c-407e-9b5f-76f361db3b78/">
<img id="blank" src="https://ucarecdn.com/fc2d2aa9-08b0-4d05-931c-85b78130d758/">
<img id="mars" src="https://ucarecdn.com/4496c535-1b3d-4c1c-a24f-8fa6bcfb895a/">
<img id="dey" src="https://ucarecdn.com/1bbbf75b-cc02-450a-91af-e528a6eaf8a1/">
<img id="blue" src="https://c1.staticflickr.com/3/2929/33929340355_1fb4ecf6e0_k.jpg">
<img id="wasteland" src="https://c1.staticflickr.com/5/4556/24549684008_5b18834af3_o.png">
<img id="blur-image" src="https://cdn.glitch.com/daae73ed-1502-4527-b809-03c18d6fb3e5%2Fblur.png?1503612651214">
<a-asset-item id="street-lamp-obj" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fmodel.obj?1503963016964"></a-asset-item>
<a-asset-item id="street-lamp-mtl" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fmaterials.mtl?1503963017033"></a-asset-item>
<a-asset-item id="city-obj" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fcity-block.obj?1504041197187"></a-asset-item>
<a-asset-item id="city-mtl" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fcity-block.mtl?1504041197228"></a-asset-item>
<a-mixin id="transition" dur="7000" direction="alternate" repeat="indefinite" easing="ease-out-cubic"></a-mixin>
</a-assets>
<!-- General Enviornment -->
<!-- Background selected when creating a new scene (taken from the database ) -->
<a-sky id="sky" color="{{ object.background }}"></a-sky>
<a-light type="ambient" intensity=".5" color="#FF54CA"></a-light>
{% endblock %}
<!-- Text written by the user when creating a new scene (taken from the database) -->
<a-entity id='text-container' position="0 1.6 -0.5"></a-entity>
<a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#00FF00" material="roughness: 1;"></a-plane>
<!-- Model depending on the selected user (from the database)-->
<a-obj-model class="obj_model" id="city-scape-left" position="-55 0 -40" rotation="0 90 0" scale="30 65 35" src="#blank" mtl=w"#city-mtl"></a-obj-model>
<a-obj-model class="obj_model" id="city-scape" position="-5 0 -40" rotation="0 90 0" scale="30 35 35" src="#blank" mtl="#city-mtl"></a-obj-model>
<a-obj-model class="obj_model" id="city-scape-right" position="50 0 -40" rotation="0 90 0" scale="30 65 35" src="#blank" mtl="#city-mtl"></a-obj-model>
<!-- Street Lamp -->
<a-entity id="street-lamp">
<a-obj-model id="street-lamp-model" position="2 2 -5" rotation="0 180 0" src="#street-lamp-obj" mtl="#street-lamp-mtl"></a-obj-model>
<a-light id="street-lamp-light" position="1.4 3.6 -5" type="point" intensity="0" color="#00E6FF">
<a-animation attribute="light.intensity"
from="0"
to="1"
>
</a-animation>
</a-light>
<a-image id="light-bulb-image" position="1.4 3.6 -5" rotation="-90 0 0" scale="0.6 0.6 0.6" opacity="0" src="#blur-image">
<a-animation attribute="material.opacity"
from="0"
to="1"
>
</a-animation>
</a-image>
</a-entity>
</a-scene>
答案 0 :(得分:0)
A-Frame的documentation for A-Sky有一个很好的例子:
<a-scene>
<a-assets>
<img id="sky" src="sky.png">
</a-assets>
<a-sky src="#sky"></a-sky>
</a-scene>
对于上面的示例,您要做的是从使用color
的{{1}}属性切换为使用src
的{{1}}属性,并引用<a-sky>
您想在天空中使用的id
的属性。像这样:
<img>