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

Question

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

1. 我想在一个特定的div中发布PC应用程序(画布)。怎么做？
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中，我从iframes获得应用程序，并将它们保存在一个变量中：

 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);

就这样！在我看来非常简单和灵活！