Three js TextureLoader not working

Questions
, , , ,
1

When i am using a external url image as TextureLoader its not working . Its showing nothing . But when i use

const texture = new THREE.TextureLoader().load(require("../assets/brick.jpg"))

its works fine .But what i want is to use a external url as texture . If anyone knows please help .

import React, { Suspense } from "react";
import { StyleSheet, View } from "react-native";
import { useLocalSearchParams } from "expo-router";
import { Canvas } from "@react-three/fiber/native";
import * as THREE from "three";

const TexturedBox = ({ imageUrl }: { imageUrl: string }) => {
  const texture = new THREE.TextureLoader().load("https://rraqbtwflpxmovptfjuo.supabase.co/storage/v1/object/public/wallpaper/229569cf-5f7f-453c-891d-9cb04394426e.jpeg")
  if (!texture) return null;

  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial map={texture} />
    </mesh>
  );
};

const ThreeDEffect = () => {
  const { ORIGINAL_IMAGE_URL } = useLocalSearchParams() as any;

  if (!ORIGINAL_IMAGE_URL) {
    console.warn("No image URL provided.");
    return null;
  }

  return (
    <View style={styles.container}>
      <Canvas
        style={{ backgroundColor: "yellow" }}
        camera={{ position: [0, 0, 3] }}
        onCreated={(state) => {
          const _gl = state.gl.getContext();
          const pixelStorei = _gl.pixelStorei.bind(_gl);
          _gl.pixelStorei = function (...args) {
            const [parameter] = args;
            switch (parameter) {
              case _gl.UNPACK_FLIP_Y_WEBGL:
                return pixelStorei(...args);
            }
          };
        }}
      >
        <Suspense fallback={null}>
          <ambientLight intensity={0.4} />
          <pointLight position={[10, 10, 10]} intensity={1} />
          <directionalLight position={[0, 2, 5]} intensity={1.5} />
          <TexturedBox imageUrl={ORIGINAL_IMAGE_URL} />
        </Suspense>
      </Canvas>
    </View>
  );
};

export default ThreeDEffect;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  }
});