How to create multiple playcanvas applications?

Help & Support
1

In the same page, I created multiple tags, and I created the playcanvas application in each of the tags, but only one valid. How to operate in order to operate other playcanvas applications at the same time？

2

I personally do not understand what you mean. Are you talking about html tags? Do you want to “invoke” and modify another “builds” in the same application playcanvas in each of the tags of your main build ?. I think more information is needed to know exactly what you are trying to do and I hope that someone can give you a more accurate answer than mine.

3

To be accurate, I have two canvas tags on the HTML page

<div>
    <canvas id="canvas1"/>
    <canvas id="canvas2"/>
</div>

// Create application
var app1 = new pc.Application(document.getelementbyid('canvas1'));
// app1 code
// ...
app1.start();

// Create application
var app2 = new pc.Application(document.getelementbyid('canvas2'));
// app2 code
// ...
app2.start();

As an example, I created two playcanvas applications。

We have also created some cameras, some entity components, and so on. And add an automatic spin script to the camera。

But only app2’s camera will move after running。

And I can’t change the app1’s parameters to see the modification effect in the canvas。

That is to say, app1 is running, but it can’t operate.

4

Initially I think your problem is that html does not load all the content at once, so the last element added (in your case id = “canvas2”) will be the last one to be read and processed, therefore it will be superimposed on the previous one . And because the content of the variable app1 and app2 are a javascript code you should consider the fact that html does not load the content synchronously. Personally I think you should look for a simpler solution that fits with the asynchronous html load model. And/or wait for someone to give you a more accurate solution.

1 Like
5

This is not a problem of asynchronous。

When I execute the post script

var canvas1 = pc.Application.getApplication('canvas1');
var canvas2 = pc.Application.getApplication('canvas2');

Through the code

You can get two applications

But canvas1 has not been able to modify the data using API

6

Maybe this question is too pretentious but … so important is that there are multiple playcanvas applications? Does developing all the content within the same application would be big problems? Considering the fact that you can “load / unload” elements or parts of it at any time. Is it important to invoke an external source? In the event that the answer is YES … what other possibilities can you shuffle?

7

Just one more input to this topic:


This works for me.