Capture PlayCanvas event in javascript outside the canvas

Help & Support
1

I am trying to listen for/capture events that occur inside the playcanvas element in javascript (see example below)

<script>
function foo() {
console.log('event from PlayCanvas', playCanvasEvent)
}
</script>

<button onClick="foo()">Click Me</button>
<canvas id="application-canvas" name="playCanvasElement">

I need to know when the event has finished inside playCanvas so I can update the page for the user

Thanks in advance!

2

Hi there, and welcome!

Are you trying to listen for an event happening inside the canvas from outside the canvas?

Or are you just trying to figure out how to listen to events inside the canvas using the playcanvas scripting api?

Tell us a bit more about what you are trying to acheive so we can help =)
Also sharing a link to the proyect or snapshots usually makes things more understandable

Cheers!

3

Hey Franciso,
Thanks for the reply. I am trying to listen for an event inside the canvas from outside the canvas. Specifically fetching a model/image.

I’ve included a graphic for reference that might help:

image
image986×680 36.4 KB

4

well I guess you could do:

let buttonElement = document.getElementById("buttonID");
buttonElement.addEventListener("mousedown", function(event){
// load some asset
location.reload();
}, this);

but if you update the page the previously uploaded asset will be lost unless you have it stored somewhere in a server or db.

Why do you want to refresh the page?

5

To clarify, I don’t want the page to reload, I want to update some content on the page, like this:

document.getElementById('button').addEventListener('click', function(e){
  // Update text on click
  document.getElementById('button').innerText = "Loading..."
 // Update text once the model has loaded in PlayCanvas
  document.getElementById('button').innerText = "Click me to load a model"
})
6

Ahaa, I see…

conviniently, the Asset API comes with a method that fires a callback when an asset is ready (fully loaded)

var asset = new pc.Asset("a texture", "texture", {
    url: "http://example.com/my/assets/here/texture.png"
});
asset.ready(function (asset) {
  // asset loaded
document.getElementById('button').innerText = "Click me to load a model";
});
app.assets.load(asset);

visit Asset | PlayCanvas API Reference for more info about this.

Now you need to figure out how to create a new Asset from whatever data you provide. It will depend on the type of asset you want and the data you provide.

8

Francisco,
What are the two parameters (“a texture”, “texture”) for in the function you shared?

9

Hi there,

the first parameter (“a texture”) is for assigning a name to the new asset.
the second parameter (“texture”) is an asset type. asset types can be: “animation”, “audio”, “binary”, “container”, “cubemap”, “css”, “font”, “json”, “html”, “material”, “model”, “script”, “shader”, “sprite”, “template”, “text”, “texture”

What type of asset are you trying to load?