У меня есть 3D-модель, отображаемая на моем сайте с помощью файла конфигурации .xml изображения ротатора.Эта функция работает, но я пытаюсь отобразить совершенно другой XML-файл вместо предыдущего файла через событие изменения JS.
Я много читал, чтобы решить эту проблему, хотя не нашел ответа.Я уже пытался превратить скрипт JQuery в функцию, как показано ниже:
function updateModel(xml_file_path) {
console.log('updating room model...');
console.log('xml_file_path: ' + xml_file_path);
// clear past model
$("#wr360PlayerId").empty();
jQuery('#wr360PlayerId').rotator({
licenseFileURL: 'license.lic',
configFileURL: '/static/360_assets/' + xml_file_path,
graphicsPath: '/static/img/basic',
zIndexLayersOn: false,
responsiveBaseWidth: 600,
responsiveMinHeight: 0,
googleEventTracking: false,
});
console.log('rendering: ' + xml_file_path);
}
// clears the old model then updates the configFileURL to the new model
Это было успешно при очистке предыдущей модели, хотя при проверке новой модели изображения, используемые ротатором изображений, не отображаются.загружен и ничего не отображается.
Документация wr360
Я также прочитал документацию для wr360 выше и нашел несколько разных способов загрузки ротатора изображений на моем сайте.Я просмотрел каждый из них и попытался обновить его, используя методы, подобные JQuery, но у каждого были свои странности, которые было трудно преодолеть.
Не так много кода для этого, так как большая часть его создается динамически при загрузке страницы, но я постараюсь предоставить весь необходимый код ниже:
js
function updateModel(xml_file_path) {
console.log('updating room model...');
console.log('xml_file_path: ' + xml_file_path);
// clear past model
$("#wr360PlayerId").empty();
jQuery('#wr360PlayerId').rotator({
licenseFileURL: 'license.lic',
configFileURL: '/static/360_assets/' + xml_file_path,
graphicsPath: '/static/img/basic',
zIndexLayersOn: false,
responsiveBaseWidth: 600,
responsiveMinHeight: 0,
googleEventTracking: false,
});
console.log('rendering: ' + xml_file_path);
}
$(document).ready(function(){
$('#rooms').on('change', function() {
updateModel(room.xml_path);
console.log('model updated');
});
});
// truncated for simplicity
html
<div id="wr360PlayerId" class="wr360_player" style="background-color:#FFFFFF;">
</div>
Путь к файлу xml проходит правильно (проверено console.log('xml_file_path: ' + xml_file_path);
), он просто не отображает второй ротатор.
$('#rooms')
- этовыберите поле, а room.xml_path
- путь к выбранному файлу .xml.С учетом вышесказанного в идеале событие on change будет отображать выбранную модель, а если выбор снова изменится, он должен отобразить новую модель (а не то, что в данный момент происходит).Либо я что-то упустил, либо обновить модель без обновления страницы невозможно, так или иначе, любая помощь приветствуется!