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",
}
});