Texture display on the browser and not on the mobile apk

Questions
, ,
1

hi,

When i do this, i see my texture on the screen with a web server on the browser with the mobile view

        const map = new THREE.TextureLoader().load('/img/tree_particles.png');
        const material = new THREE.SpriteMaterial({
            map: map
        });

        this.mesh = new THREE.Sprite(material);

But when i build the application via Cordova, i don’t see this texture on my phone. What i doing wrong ?

Thanks for your help.

2

The answer on how to debug what is happening depends on the mobile platform you’re trying to run the app on :sweat_smile:

Nevertheless, if you are using webpack together with cordova, and would like to forget about worrying about paths for the rest of the development career - you can do the following:

import treeParticles from './img/tree_particles.png'; // This will ensure that the image is bundled together with the code, and `treeParticles` points to the correct place

const map = new THREE.TextureLoader().load(treeParticles);
3

Hi @mjurczyk ,

I have now this error with this snippet :

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/png". Strict MIME type checking is enforced for module scripts per HTML spec.

I’m trying to solve it with internet search but don’t succed…

4

It depends on the bundler you are using. For webpack, you need to configure a file / url loader, that will import images as URIs - take a look here (if you are using newer webpack, you may want to use asset modules.)