Существует переменная, в которой хранятся значения выбранной фоновой кнопки для сцены кадра. Эта переменная отображает цвет выбранного фона. Но если выбрать фоновый рисунок, фон не изменится, он останется белым. Как можно передать фоновое изображение в переменную выбора кнопки?
<html>
<head>
<title>{{posts.title}}</title>
<meta name="description" content="Animate WebVR Moods with A-Frame and the Animation Tag.">
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
{% block content %}
<h1 class="md-5">Post</h1>
<div class="article-entry">
<table class="table">
<tr>
<th>Author</th>
<th>Title</th>
<th>Body</th>
<th>Background</th>
<th>Terrain</th>
<th>Date</th>
<th>Action</th>
</tr>
<tr>
<td>{{ object.author }} </td>
<td>{{ object.title }} </td>
<td>{{ object.body }} </td>
<td>{{ object.background }} </td>
<td>{{ object.terrain }} </td>
<td>{{ object.date }} </td>
<td><a href="{% url 'posts_edit' posts.pk %}">Edit</a> <a href="{% url 'posts_delete' posts.pk %}">Delete</a> </td>
</tr>
</table>
</div>
<p>Back to <a href="{% url 'posts_list' %}">All posts</a></p>
<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 ) -->
{% if object.background == "star" %}
<a-sky id="sky" color="{{ object.background }}"></a-sky>
{% endif %}
<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>
<script>
var sceneEl = document.querySelector('a-scene');
AFRAME.registerComponent('foo', {
init: function () {
var skyEl = sceneEl.querySelector('a-sky');
//Changing color using JQuery here
$(document).ready(function () {
let color, src, mtl, terrain, text1;
$("#text1").click(function (e) {
var x = document.getElementById("fname").value;
//document.write(x);
document.getElementById("output").innerText = x;
return false;
});
$("#color button").click(function (e) {
color = e.currentTarget.className;
skyEl.setAttribute('src', '#blank');
skyEl.setAttribute('color', color);
});
$(" ").click(function (e) {
src = e.currentTarget.className;
skyEl.removeAttribute('color');
skyEl.setAttribute('src', '#' + src);
});
$("#terrain button").click(function (e) {
var skob = sceneEl.querySelectorAll('.obj_model');
terrain = e.currentTarget.className;
mtl = e.currentTarget.name;
for (let index = 0; index <= skob.length; ++index) {
//alert(mtl);
//skyEl.setAttribute('color', '#1fa9e3');
skob[index].setAttribute('src', '#' + terrain + '-obj');
skob[index].setAttribute('mtl', '#' + mtl);
if (terrain == 'city') {
skob[index].setAttribute('scale', '30 120 35');
} else {
skob[index].setAttribute('scale', '5 10 5');
}
}
});
});
}
});
sourceURL = pen.js
</script>
</body>
</html>