Image Not Loading From URL

Hi i’m trying to Load a skybox image from url and assign it to the skybox but the code is not fetching the image from URL at all. This the code that i’m using.

async loadExteriorSkybox()
    {
       // const texture=null;
        if(this.isMobileDevice())
        {
          //  this.loadingDeviceText.text="MOBILE".toString();
            const image = ImageReference.getOrCreate("https://fip-air-asia.s3.ap-southeast-1.amazonaws.com/a320-type-a/exterior-mobile.jpeg");
            this.exteriorSkybox = await image.createTexture();
            console.error("Fetching Exterior Skybox for Mobile");
        }

        else
        {
          //  this.loadingDeviceText.text="PC".toString();

            const image = ImageReference.getOrCreate("https://fip-air-asia.s3.ap-southeast-1.amazonaws.com/a320-type-a/exterior.jpeg");
            this.exteriorSkybox= await image.createTexture();
            console.error("Fetching Exterior Skybox for PC");

        }
        

        if(this.skyboxMaterial!=null && this.exteriorSkybox!=null)
        {
            this.exteriorSkybox.colorSpace = SRGBColorSpace;

            console.error("Assigning Exterior Skybox");
            this.exteriorSkybox.mapping = EquirectangularRefractionMapping;
            this.context.scene.environment = this.exteriorSkybox;
            this.context.scene.background = this.exteriorSkybox;
            this.exteriorSkybox.needsUpdate = true;
            this.hideLoadingPanel();
            this.adModel1.setActive(true);
            this.adModel2.setActive(true);
            this.load();
        }

    }

Hi Abdul Raheem! Let’s troubleshoot your issue with loading the skybox image from the URL.

  1. Check the URL: Ensure that the URLs you’re using are reachable and point directly to the image files. You can try opening them in a browser to verify.

  2. Network Errors: Use the browser’s developer console to check for any network errors while trying to fetch the images. You should see if there are any CORS issues or 404 errors.

  3. Awaiting Texture Creation: There might be a delay in creating the texture, ensure you’re properly handling any errors during the texture creation process.

  4. Logging: Add additional logging to see if the image is being fetched correctly and if it’s entering the conditional assignments:

async loadExteriorSkybox()
{
    let imageUrl;
    if(this.isMobileDevice()) {
        imageUrl = "https://fip-air-asia.s3.ap-southeast-1.amazonaws.com/a320-type-a/exterior-mobile.jpeg";
        console.error("Fetching Exterior Skybox for Mobile");
    } else {
        imageUrl = "https://fip-air-asia.s3.ap-southeast-1.amazonaws.com/a320-type-a/exterior.jpeg";
        console.error("Fetching Exterior Skybox for PC");
    }

    const image = ImageReference.getOrCreate(imageUrl);
    try {
        this.exteriorSkybox = await image.createTexture();
        console.error("Skybox texture created successfully");
    } catch (error) {
        console.error("Error creating skybox texture", error);
    }

    if(this.skyboxMaterial!=null && this.exteriorSkybox!=null) {
        this.exteriorSkybox.colorSpace = SRGBColorSpace;
        this.exteriorSkybox.mapping = EquirectangularRefractionMapping;

        console.error("Assigning Exterior Skybox");
        this.context.scene.environment = this.exteriorSkybox;
        this.context.scene.background = this.exteriorSkybox;
        this.exteriorSkybox.needsUpdate = true;

        this.hideLoadingPanel();
        this.adModel1.setActive(true);
        this.adModel2.setActive(true);
        this.load();
    } else {
        console.error("Skybox material or texture is null");
    }
}
  1. Check ImageReference and createTexture: Make sure that ImageReference and its method createTexture are working as expected, and refer to the documentation for any specific requirements.

If the issue persists, please provide more specific details about any errors you’re encountering, as well as any relevant console log outputs.

1 replies left - Get a PRO license for more AI replies.
thread_WoyeNCiiaALdaL8PUTny5jKH
Reply to this message to continue the conversation

thanks for suggestions the problem was from my end i was checking null references

1 Like

Hi Abdul Raheem! I’m glad to hear that you identified the issue with null references. Properly managing references is crucial for ensuring that your code functions as intended.

If you need further assistance with additional challenges or have any questions about Needle Engine or integrating other elements into your project, feel free to ask!

1 replies left - Get a PRO license for more AI replies.
thread_WoyeNCiiaALdaL8PUTny5jKH
Reply to this message to continue the conversation

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.