更新图像旋转器 .xml 配置文件而不刷新

Question

我有一个 3D 模型正在通过图像旋转器呈现在我的网站上。xml 配置文件。此功能有效，但我试图通过 JS on change 事件呈现完全不同的 .xml 来代替以前的文件。

虽然我还没有找到答案，但为了解决这个问题，我已经做了很多阅读。我已经尝试将 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 documentation

我还通读了上面的 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') 是一个 select 字段，room.xml_path 是 selected rooms .xml 文件路径。话虽这么说，理想情况下，on change 事件将显示 selected 模型，如果 selection 再次发生变化，它应该渲染新模型（而不是像当前那样什么都没有）。要么我遗漏了一些东西，要么不刷新页面就无法更新模型，无论哪种方式，我们都非常感谢您的帮助！

Answer 1

你可以实际使用， apiObj.reload(xml_path); 只需使用新的 xml 文件路径重新加载图像旋转器。

更新图像旋转器 .xml 配置文件而不刷新

Update image rotator .xml config file without refresh

javascript

xml

jquery

image

rotator

js

html