Loading assets with Vue-CLI - Webpack

Help & Support
#1

I am trying to load an asset from an example:

var textureAsset = new pc.Asset('red_button_atlas.png', "texture", { url: "../assets/button/red_button_atlas.png"  });
var fontAsset = new pc.Asset('arial.json', "font", { url: "../assets/fonts/arial.json" });

I am using vue-cli to package the game.
It looks the files are loaded using dev-server, but still cannot get processed correctly.

Error loading font resource: ./../../assets/fonts/arial.json [SyntaxError: Unexpected token < in JSON at position 0]

and

Error loading Texture from: './../../assets/button/red_button_atlas.png'

In three.js, I was using something like:

const textureImage = require('./assets/background.png');
const loader = new THREE.TextureLoader();
const diffuseMap = loader.load(textureImage .default);

How do you achieve this with PlayCanvas ?
Thanks

#2

engine only or with editor (platform)?

#3

Engine only. The code above comes from engine only examples I believe, but they aren’t build with vue-cli or webpack.

#4

have you got json-loader?
hmm json-loader is not required above 2.0.0 version:

webpack config version > 2.0.0, then there is no need to install json-loader because webpack uses json5-loader by default when its configured with the React app.

but this case is React and your case is Vue so I’m not sure about json-loader

provide please webpack config file
maybe you need

resolve: {
    extensions: ['.js', '.json'],
  }
#6

If you are still having issues, would you be able to provide a small example project that we can look at locally please?

#7

hmm maybe this for texture?
https://developer.playcanvas.com/en/api/pc.ImgParser.html#load
but not sure

you have error due to:

  image.onerror = function () {
            // Retry a few times before failing
            if (retryTimeout) return;

            if (maxRetries > 0 && ++retries <= maxRetries) {
                var retryDelay = Math.pow(2, retries) * 100;
                console.log("Error loading Texture from: '" + originalUrl + "' - Retrying in " + retryDelay + "ms...");

                var idx = url.indexOf('?');
                var separator = idx >= 0 ? '&' : '?';

                retryTimeout = setTimeout(function () {
                    // we need to add a cache busting argument if we are trying to re-load an image element
                    // with the same URL
                    image.src = url + separator + 'retry=' + Date.now();
                    retryTimeout = null;
                }, retryDelay);
            } else {
                // Call error callback with details.
                callback("Error loading Texture from: '" + originalUrl + "'");
            }
        };

especially here:

else {
           // Call error callback with details.
          callback("Error loading Texture from: '" + originalUrl + "'");
     }

this is the same as yours error
call me debugger :joy:

#8

Then for texture, it was actually working. the main issue seems related to the json that is parsed as code and not asset by the Vue-CLI.

import TEXTURE from ‘./…/assets/button/red_button_atlas.png’
var textureAsset = new pc.Asset(‘red_button_atlas.png’, “texture”, { url: TEXTURE });
textureAsset.on(‘load’, function () {
var texture = textureAsset.resource;
…

is ok.