pc.Asset not able to load in remote texture? Possible failure in laycanvas-stable.js

Help & Support
1

I’m trying to load in a texture from a remote address; CORS is working properly, and the URI I’m referencing is correct.

When I try to load the asset in, I get the following console error dump:

Uncaught TypeError: Cannot read property '_loader' of null:
getPreferredFile @ playcanvas-stable.js:26751
load @ playcanvas-stable.js:27002
(anonymous function) @ ui.js?id=5345242:310

After looking back at the documentation, this is the syntax I’m using (just an example - my code is analogous):

var a = new pc.Asset("test-texture", "texture",
{
    url: "http://site.com/path/to/texture.jpg"
});

All looks correct in my code - it matches what’s documented, but I just can’t seem to coax it to work.

Anybody have any insight?

1 Like
2

Are you running from the editor or engine only?

It looks like one of the resource handlers isn’t initialized correctly so you’ll need to share more code. See this section of application.js: https://github.com/playcanvas/engine/blob/master/src/framework/application.js#L155 for how to correctly initialize the resource handlers.

3

Running it through the engine only;

Here’s the complete code snippet (again, with URI redactions):

ui.prototype.initialize = function(xyz)
{
	app = this.app;
	app.assets = app.assets;

	ia = app.assets;

	/* Pull in materials manifest */
		(function()
		{
			// Create connection parameters
				var xhrRequest = new XMLHttpRequest(),
				xhrSettings = {
					href: "//site.com/path/to/manifest.json"
				},
				xhrResponse;

			// Connection success
				xhrRequest.addEventListener("load", function()
				{
					xhrResponse = JSON.parse(xhrRequest.response);

					var temp = {
						asset: new pc.Asset("test-texture", "texture",
						{
							url: "//site.com/path/to/texture.jpg"
						})
					};
					
					temp.asset.on("load", function()
					{
						console.log(temp.asset);
					});

					app.assets.load(temp.asset);
				});

			// Connection error
				xhrRequest.addEventListener("error", function()
				{
					console.log("error");  
				});

			// Request execution
			   xhrRequest.open("GET", xhrSettings.href, true);
			   xhrRequest.setRequestHeader("Content-Type", "application/json; charset=utf-8");
			   xhrRequest.setRequestHeader("Accept", "application/json");
			   xhrRequest.send();
		})();
};

The end goal is to utilize a JSON manifest to load in textures upon user-action (e.g. UI interaction); but even just doing a static, non-dynamic test results in failure :frowning:

4

OK, I think I see the issue.

Possibly this is an engine bug, but you haven’t added the asset to the asset registry and it access the registry internally for textures when the asset loads.

Add:

app.assets.add(temp.asset);

and try that.

5

That did it! Strange that app.assets.load wouldn’t automatically add the the asset to the registry as well, but as long as it works, I’m not complaining :smile:

@dave - thank you for your insight and help! :slight_smile:

For completeness (for the sake of other people who might look through this thread later with a similar issue), here’s the complete code snippet:

ui.prototype.initialize = function(xyz)
{
	app = this.app;
	app.assets = app.assets;

	ia = app.assets;

	/* Pull in materials manifest */
		(function()
		{
			// Create connection parameters
				var xhrRequest = new XMLHttpRequest(),
				xhrSettings = {
					href: "//site.com/path/to/manifest.json"
				},
				xhrResponse;

			// Connection success
				xhrRequest.addEventListener("load", function()
				{
					xhrResponse = JSON.parse(xhrRequest.response);

					var temp = {
						asset: new pc.Asset("test-texture", "texture",
						{
							url: "//site.com/path/to/texture.jpg"
						})
					};
                    
					app.assets.add(temp.asset);
					
					temp.asset.on("load", function()
					{
						console.log(temp.asset);
					});

					app.assets.load(temp.asset);
				});

			// Connection error
				xhrRequest.addEventListener("error", function()
				{
					console.log("error");  
				});

			// Request execution
			   xhrRequest.open("GET", xhrSettings.href, true);
			   xhrRequest.setRequestHeader("Content-Type", "application/json; charset=utf-8");
			   xhrRequest.setRequestHeader("Accept", "application/json");
			   xhrRequest.send();
		})();
};