Texture display on the browser and not on the mobile apk


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.

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);

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…

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.)