如何将python变量引用到<a-assets>?

时间:2019-10-31 16:59:36

标签: python html aframe

有一个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>

1 个答案:

答案 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>