JOTUNN
October 19, 2016, 5:49am
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
dave
October 19, 2016, 9:47am
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.
JOTUNN
October 19, 2016, 2:42pm
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
dave
October 19, 2016, 3:04pm
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.
JOTUNN
October 19, 2016, 3:46pm
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
@dave - thank you for your insight and help!
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();
})();
};