I want to add at runtime a simple one-sided entity textured with an image file. While this same code was working several years ago, it is no longer showing texture. It did not work with previous playcanvas code nor is it working with the new version. It is just a red square (red because of the lighting). It is silently failing: I see no error from playcanvas and have also debugged to ensure the entities and assets are being loaded. I have configured CORS due to errors from that, it is configured correctly. I would also note that I can import a zip from an editor project that contains essentially the same simple image and that does work.
Here is my code to load in the assets and entity:
Network.prototype.addAsset = function(data) {
// from playcanvas application.js: _parseAssets()
var asset = new pc.Asset(data.name, data.type, data.file, data.data);
asset.id = parseInt(data.id);
asset.preload = data.preload ? data.preload : false;
asset.tags.add(data.tags);
asset.revision = data.revision;
try {
this.app.assets.add(asset);
} catch (err) {
console.log("Asset error: " + err);
}
// console.log('Asset Added');
// console.log(data);
var self = this;
var onAssetLoad = function() {
self.popQueue();
};
if (asset.resource) {
// The asset has already been loaded
onAssetLoad();
} else {
// Start async loading the asset
asset.once('load', onAssetLoad);
try {
this.app.assets.load(asset);
} catch (err) {
console.log("Asset error: " + err);
}
}
};
Network.prototype.addEntity = function(data) {
var entity = new pc.Entity();
// from playcanvas entity.js: clone()
/* if (data.children instanceof Array) {
var i;
for (i = 0; i < data.children.length; i++) {
var child = data.children[i];
if (child instanceof pc.Entity) {
entity.addChild(child.clone());
}
}
}
*/
for (var component in data.components) {
if (component == "camera") {
continue;
}
entity.addComponent(component, data.components[component]);
}
entity.id = data.id;
entity.objectId = data.objectId;
entity.name = data.name;
var relativePosition = MathUtils.getRelativePosition(data.location, data.position, this.origin, Network.scale);
entity.setLocalPosition(relativePosition[0],relativePosition[1],relativePosition[2]);
entity.setLocalScale(data.scale[0],data.scale[1],data.scale[2]);
entity.setEulerAngles(data.rotation[0],data.rotation[1],data.rotation[2]);
if (entity.rigidbody) {
entity.rigidbody.teleport(relativePosition[0],relativePosition[1],relativePosition[2]);
}
this.app.root.addChild(entity);
this.app.entities[entity.id] = entity;
// console.log('Entity Added');
// console.log(data);
this.popQueue();
};
Here are the assets and entity JSON that doesn’t work:
[
{
"file": {
"filename": "files/assets/5357060472438784/1/1585578071507.jpg",
"fullPath": "files/assets/5357060472438784/1/1585578071507.jpg",
"variants": {},
"size": 33812,
"hash": "c5ef9ce08c27c9d5cb2cb2d978e09972",
"url": "https://storage.googleapis.com/cybers-cafe/1585829397360/files/assets/5357060472438784/1/1585578071507.jpg"
},
"data": {
"minfilter": "linear_mip_linear",
"addressv": "repeat",
"rgbm": false,
"addressu": "repeat",
"magfilter": "linear",
"anisotropy": 1,
"mipmaps": true
},
"preload": true,
"region": "eu-west-1",
"meta": {
"compress": {
"normals": false,
"dxt": false,
"alpha": false,
"pvrBpp": 4,
"basis": false,
"quality": 128,
"etc1": false,
"etc2": false,
"pvr": false
},
"depth": 8,
"alpha": false,
"height": 512,
"width": 512,
"srgb": true,
"format": "jpeg",
"interlaced": false,
"type": "TrueColor"
},
"name": "1585578071507.jpg",
"i18n": {},
"type": "texture",
"revision": 1,
"tags": [],
"id": "5357060472438784"
},
{
"revision": 1,
"tags": [],
"id": "5357981659037696",
"file": null,
"data": {
"cubeMap": 0,
"normalMapUv": 0,
"lightMap": 0,
"metalnessMapTint": false,
"diffuseMapTint": false,
"emissive": [
0,
0,
0
],
"metalnessMapOffset": [
0,
0
],
"sphereMap": 0,
"specularMapVertexColor": false,
"specularMap": 0,
"lightMapTiling": [
1,
1
],
"emissiveMapTiling": [
1,
1
],
"opacityMapUv": 0,
"glossMap": 0,
"specularAntialias": true,
"metalnessMapChannel": "r",
"diffuseMapTiling": [
1,
1
],
"emissiveMapUv": 0,
"heightMapUv": 0,
"lightMapVertexColor": false,
"glossMapUv": 0,
"lightMapUv": 1,
"normalMap": 0,
"specularMapChannel": "rgb",
"emissiveIntensity": 0.2,
"useMetalness": false,
"metalness": 1,
"lightMapOffset": [
0,
0
],
"opacityMapTiling": [
1,
1
],
"heightMap": 0,
"glossMapVertexColor": false,
"useFog": true,
"specularMapTiling": [
1,
1
],
"heightMapChannel": "r",
"opacity": 1,
"fresnelFactor": 0,
"emissiveMap": "5357060472438784",
"aoMapTiling": [
1,
1
],
"aoMap": 0,
"emissiveMapChannel": "rgb",
"metalnessMapTiling": [
1,
1
],
"reflectivity": 1,
"cull": 1,
"heightMapFactor": 1,
"depthTest": true,
"shader": "blinn",
"specularMapOffset": [
0,
0
],
"alphaTest": 0,
"glossMapOffset": [
0,
0
],
"depthWrite": true,
"diffuseMap": "5357060472438784",
"emissiveMapVertexColor": false,
"metalnessMapVertexColor": false,
"useSkybox": true,
"heightMapTiling": [
1,
1
],
"glossMapChannel": "r",
"refraction": 0,
"aoMapChannel": "r",
"blendType": 3,
"glossMapTiling": [
1,
1
],
"conserveEnergy": true,
"diffuseMapVertexColor": false,
"metalnessMapUv": 0,
"useGammaTonemap": true,
"aoMapVertexColor": false,
"emissiveMapTint": false,
"opacityMapChannel": "r",
"shadowSampleType": 1,
"ambientTint": false,
"ambient": [
0,
0,
0
],
"diffuseMapOffset": [
0,
0
],
"cubeMapProjection": 0,
"diffuseMapChannel": "rgb",
"diffuse": [
1,
1,
1
],
"aoMapOffset": [
0,
0
],
"bumpMapFactor": 1,
"useLighting": true,
"emissiveMapOffset": [
0,
0
],
"opacityMapOffset": [
0,
0
],
"normalMapTiling": [
1,
1
],
"opacityMap": 0,
"specularMapTint": false,
"opacityMapVertexColor": false,
"shininess": 32,
"occludeSpecular": 1,
"fresnelModel": 0,
"diffuseMapUv": 0,
"aoMapUv": 0,
"cubeMapProjectionBox": {
"halfExtents": [
0.5,
0.5,
0.5
],
"center": [
0,
0,
0
]
},
"lightMapChannel": "rgb",
"heightMapOffset": [
0,
0
],
"specular": [
0.23,
0.23,
0.23
],
"specularMapUv": 0,
"refractionIndex": 0.6666666666666666,
"metalnessMap": 0,
"normalMapOffset": [
0,
0
]
},
"preload": true,
"region": "eu-west-1",
"meta": null,
"name": "ImageMaterial",
"i18n": {},
"type": "material"
},
{
"name": "Image",
"components": {
"model": {
"receiveShadows": true,
"lightMapSizeMultiplier": 1,
"isStatic": false,
"castShadows": true,
"lightmapSizeMultiplier": 1,
"castShadowsLightMap": false,
"castShadowsLightmap": true,
"lightMapped": false,
"type": "plane",
"lightmapped": false,
"materialAsset": "5357981659037696",
"layers": [
0
],
"enabled": true,
"batchGroupId": null,
"asset": null
}
},
"rotation": [
90,
0,
0
],
"tags": [],
"enabled": true,
"resource_id": "b9d82d43-0e99-414e-b039-619cb528714f",
"parent": "e8ae4254-6751-11e5-bd2a-8438356164ca",
"position": [
0.419318,
0.01,
-7.35786
],
"children": [],
"scale": [
1,
1,
1
],
"id": 5,
"location": [
0,
0
]
}
]
Here is the one from the zip that does work:
[
{
"region": "eu-west-1",
"meta": {
"compress": {
"pvrBpp": 4,
"basis": false,
"quality": 128,
"etc1": false,
"etc2": false,
"pvr": false,
"normals": false,
"dxt": false,
"alpha": false
},
"depth": 8,
"alpha": false,
"height": 512,
"width": 512,
"srgb": true,
"format": "jpeg",
"interlaced": false,
"type": "TrueColor"
},
"name": "star.jpg",
"i18n": {},
"type": "texture",
"revision": 1,
"tags": [],
"id": "6451433",
"file": {
"url": "https://storage.googleapis.com/cybers-cafe/1585795234996/files/assets/6451433/1/star.jpg",
"filename": "star.jpg",
"fullPath": "files/assets/6451433/1/star.jpg",
"variants": {},
"size": 18175,
"hash": "4e7669504f38200e257e7f31b90b876b"
},
"data": {
"addressu": "repeat",
"magfilter": "linear",
"anisotropy": 1,
"mipmaps": true,
"minfilter": "linear_mip_linear",
"addressv": "repeat",
"rgbm": false
},
"preload": true
},
{
"i18n": {},
"type": "material",
"revision": 1,
"tags": [],
"id": "6451449",
"file": null,
"data": {
"lightMap": 0,
"metalnessMapTint": false,
"diffuseMapTint": false,
"emissive": [
0,
0,
0
],
"metalnessMapOffset": [
0,
0
],
"sphereMap": 0,
"specularMapVertexColor": false,
"specularMap": 0,
"lightMapTiling": [
1,
1
],
"emissiveMapTiling": [
1,
1
],
"opacityMapUv": 0,
"glossMap": 0,
"specularAntialias": true,
"metalnessMapChannel": "r",
"diffuseMapTiling": [
1,
1
],
"emissiveMapUv": 0,
"heightMapUv": 0,
"lightMapVertexColor": false,
"glossMapUv": 0,
"lightMapUv": 1,
"normalMap": 0,
"specularMapChannel": "rgb",
"emissiveIntensity": 0.2,
"useMetalness": false,
"metalness": 1,
"lightMapOffset": [
0,
0
],
"opacityMapTiling": [
1,
1
],
"heightMap": 0,
"glossMapVertexColor": false,
"useFog": true,
"specularMapTiling": [
1,
1
],
"heightMapChannel": "r",
"opacity": 1,
"fresnelFactor": 0,
"emissiveMap": 6451433,
"aoMapTiling": [
1,
1
],
"aoMap": 0,
"emissiveMapChannel": "rgb",
"metalnessMapTiling": [
1,
1
],
"reflectivity": 1,
"cull": 1,
"heightMapFactor": 1,
"depthTest": true,
"shader": "blinn",
"specularMapOffset": [
0,
0
],
"alphaTest": 0,
"glossMapOffset": [
0,
0
],
"depthWrite": true,
"diffuseMap": 6451433,
"emissiveMapVertexColor": false,
"metalnessMapVertexColor": false,
"useSkybox": true,
"heightMapTiling": [
1,
1
],
"glossMapChannel": "r",
"refraction": 0,
"aoMapChannel": "r",
"blendType": 3,
"glossMapTiling": [
1,
1
],
"conserveEnergy": true,
"diffuseMapVertexColor": false,
"metalnessMapUv": 0,
"useGammaTonemap": true,
"aoMapVertexColor": false,
"emissiveMapTint": false,
"opacityMapChannel": "r",
"shadowSampleType": 1,
"ambientTint": false,
"ambient": [
0,
0,
0
],
"diffuseMapOffset": [
0,
0
],
"cubeMapProjection": 0,
"diffuseMapChannel": "rgb",
"diffuse": [
1,
1,
1
],
"aoMapOffset": [
0,
0
],
"bumpMapFactor": 1,
"useLighting": true,
"emissiveMapOffset": [
0,
0
],
"opacityMapOffset": [
0,
0
],
"normalMapTiling": [
1,
1
],
"opacityMap": 0,
"specularMapTint": false,
"opacityMapVertexColor": false,
"shininess": 32,
"occludeSpecular": 1,
"fresnelModel": 0,
"diffuseMapUv": 0,
"aoMapUv": 0,
"cubeMapProjectionBox": {
"center": [
0,
0,
0
],
"halfExtents": [
0.5,
0.5,
0.5
]
},
"lightMapChannel": "rgb",
"heightMapOffset": [
0,
0
],
"specular": [
0.23,
0.23,
0.23
],
"specularMapUv": 0,
"refractionIndex": 0.6666666666666666,
"metalnessMap": 0,
"normalMapOffset": [
0,
0
],
"cubeMap": 0,
"normalMapUv": 0
},
"preload": true,
"region": "eu-west-1",
"meta": null,
"name": "ImageMaterial"
},
{
"enabled": true,
"resource_id": "6b37ab7c-df45-11e6-8b5f-22000ac481df",
"parent": "6b37a442-df45-11e6-8b5f-22000ac481df",
"position": [
-0.540621,
0.0100405,
4.31501
],
"children": [],
"scale": [
1,
1,
1
],
"name": "Image",
"components": {
"model": {
"asset": null,
"receiveShadows": true,
"lightMapSizeMultiplier": 1,
"isStatic": false,
"castShadows": true,
"lightmapSizeMultiplier": 1,
"castShadowsLightMap": false,
"castShadowsLightmap": true,
"lightMapped": false,
"type": "plane",
"lightmapped": false,
"materialAsset": 6451449,
"layers": [
0
],
"enabled": true,
"batchGroupId": null
}
},
"rotation": [
90,
0,
0
],
"tags": [],
"id": 6,
"location": [
0,
0
]
}
]
