Working with the samples in PlayCanvas - canvas and asset not working

How do you declare the canvas and assets? using const canvas = document.getElementById(‘application-canvas’) seems to be not working.

I am also not sure how to declare the assets to make the example run. Looking at the TS code, this seems to be from pc.asset

https://playcanvas.github.io/#/user-interface/scroll-view
https://playcanvas.github.io/#/user-interface/world-to-screen

How do I declare this in JS so I can load it via HTML?

Hi @spike_bump,

You can get access to the canvas element like this in your scripts:

const = this.app.graphicsDevice.canvas;

About your other question sorry I don’t understand, could you explain a bit more on what you are trying to do.

How do you declare the values of “assets”?

https://playcanvas.github.io/#/graphics/transform-feedback
https://playcanvas.github.io/#/graphics/particles-spark

Particles-spark’s example in TS show it is from pc.asset. How should I declare this variable to make the code work via html + js?

The canvas I declare as :

const canvas = document.getElementById(‘application-canvas’);

which provides a small black window to load the sample animations. However, the assets can’t seem to load.

I also checked the TS version of the sample and found it is declared as such:

function example(canvas: HTMLCanvasElement, assets: { spark: pc.Asset }):

How do I delcare this in JS so I can load it via HTML?

From what I understand you are trying to use an engine example in your project, right?

Those examples use helper methods to focus only on the part of the code that is showcased. In your case you will need to load and find the relevant assets yourself.

Check this editor examples on how to get started working with assets:

https://developer.playcanvas.com/en/tutorials/?tags=assets

1 Like

Hi Leonidas,

Appreciate your patience walking me through this.

I forked a pre-existing project in the tutorials so at least I would have assets to load to make the make the sample code work. Project code here:

https://playcanvas.com/editor/scene/1371980 I declared the assets as per the code originally written in the tutorial:

HTML/CSS - Live Updates | Learn PlayCanvas

Unfortunately, it still seems to be not loading or at least not producing the transform-feedback effect with the declared assets. The error I’m getting now is: Uncaught TypeError: Cannot read properties of undefined (reading ‘data’) in line 110 of the feedback_transform.js.

Am I declaring them incorrectly? Or should I do something else to load the assets?

Again, thank you for your patience helping a new user out.