0

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

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

`

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

1 回答 1

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

就是这样！在我看来非常简单而且非常灵活！

于 2018-04-03T15:38:53.750 回答