javascript - 在网站上发布(多个)PlayCanvas 应用程序

Question

我在网站上发布 PlayCanvas 应用程序时遇到问题。这些网站将包含用于控制 PlayCanvas 应用程序的 ui 元素。

1. 我想在特定的 div 中发布 PC 应用程序( Canvas )。如何做到这一点？
2. 我的网站必须包含多个(两个)PlayCanvas 应用程序(是的，这是必要的)。与第一个一样，有一个 div 容器应该加载它。
3. 我需要访问这两个应用程序才能向它们触发事件，如下例所示或以任何其他方式:

`

btn_doSomething.addEventListener('click', function() {
    app1.fire("DoSomething", "Value");
    app2.fire("DoSomethingElse", "Value");
});

Answer 1

我找到了适合我的解决方案。我发布了一个网站，上面有两个 PlayCanvas“应用程序”，并通过脚本与它们进行交互。该解决方案建议将 PlayCanvas 应用程序保留在 iframe 中。因此，您可以自己托管应用程序，也可以让 PlayCanvas 为您执行此操作。另一个优点是您不必更改我们导出的项目中的任何内容。

所以HTML部分非常简单:

<div id="app1-wrapper">
       <iframe id="app1-iframe" src="myApp1/index.html" frameborder="0"></iframe>
</div>

<div id="app2-wrapper">
       <iframe id="app2-iframe" src="myApp2/index.html" frameborder="0"></iframe>
</div>

在JavaScript中，我从两个iframe获取应用程序并将它们保存在变量中:

 var app1_iframe = document.getElementById("app1-iframe").contentWindow;
 var app1 = app1_iframe.pc.Application.getApplication("application-canvas");

 var app2_iframe = document.getElementById("app2-iframe").contentWindow;
 var app2 = app2_iframe.pc.Application.getApplication("application-canvas");

现在您已经可以访问该应用程序并且可以运行所有功能。对我来说，我正在向我的脚本触发事件。请记住，您必须在 PlayCanvas 应用程序中为它们创建监听器。

app1.fire('myFunctionName',value);
app2.fire('myFunctionName',value);

就是这样!我认为非常简单且非常灵活!