Question

我通过图像旋转器.xml配置文件在自己的网站上渲染了3D模型。此功能有效，但是我试图通过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')是一个选择字段，而room.xml_path是选定的room .xml文件路径。话虽如此，理想情况下，on change事件将显示选定的模型，并且如果再次更改选择，它将呈现新模型（而不是像当前所做的一样）。我可能丢失了一些东西，或者如果不刷新页面就无法更新模型，无论哪种方式，我们将不胜感激！

Answer 1

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

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

js

html

1 个答案: