在网站上发布（多个）PlayCanvas 应用程序

Question

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

我想在特定 div 中发布 PC 应用程序 (canvas)。怎么做？
我的网站必须包含多个（两个）PlayCanvas 应用程序（是的，这是必需的）。与第一个一样，有一个 div 容器应该加载它。
我需要访问这两个应用程序才能像下面的示例或以任何其他方式向它们触发事件：

`

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

Answer 1

我找到了适合我的解决方案。我发布了一个带有两个 PlayCanvas "Apps" 的网站，并通过脚本与它们进行交互。该解决方案建议将 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);

就是这样！在我看来很简单也很灵活！

在网站上发布（多个）PlayCanvas 应用程序

Publishing (multiple) PlayCanvas apps on a website

javascript

playcanvas