Unable to load textures using remote url in react-three/drei/native

Question

I'm trying to load an image texture using useTexture and apply it to a meshStandardMaterial in my react-native app. The texturing works fine when I import the image from local assets folder. But, when I change the image to a remote URL, the texturing is not being applied and the material is rendering black. I have added the code below

import React, { Suspense, useRef } from 'react';
import { View } from 'react-native';
import { Canvas } from '@react-three/fiber/native';
import { useTexture } from '@react-three/drei/native';
import useWindowDimensions from 'react-native/Libraries/Utilities/useWindowDimensions';
import localTexturePath from './assets/duck_texture.png'

function Plane() {
  const ref = useRef();
  // THIS DOESN'T WORK
  const textureUrl = 'https://cdntest.metatube.studio/public/Texture.png'
  // THIS WORKS
  // const textureUrl = localTexturePath
  useTexture(textureUrl, (t) => {
    ref.current.map = t
    ref.current.needsUpdate = true
  })
  return(
    <mesh>
      <planeBufferGeometry attach="geometry" args={[3, 3]} />
      <meshStandardMaterial ref={ref} attach="material" color="orange" />
    </mesh>
  )
}

export default function App() {
  const { width, height } = useWindowDimensions();
  return (
    <View
      style={{
        height,
        width,
        backgroundColor: '#FFA000',
      }}
    >
      <Canvas
        onCreated={(s) => {
          s.setSize(width, height);
        }}
        gl={{ physicallyCorrectLights: true }}
        camera={{ position: [-6, 0, 16], fov: 36 }}
      >
        <color attach="background" args={[0xe2f4df]} />
        <ambientLight />
        <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
        <directionalLight intensity={0.8} position={[-6, 2, 2]} />
        <Suspense>
          <Plane />
        </Suspense>
      </Canvas>
    </View>
  );
}

ThreeJs does support texture loading with remote URL. Is this behaviour of drei in react-native expected ? If yes, how can I apply texture from a remote URL to my materials in mobile ? The below are the relevant dependencies and their versions

"@react-three/drei": "^9.11.3",
"@react-three/fiber": "^8.0.21",
"expo": "~45.0.0",
"expo-gl": "~11.3.0",
"react": "18.1.0",
"react-native": "0.69.0-rc.3",
"three": "0.141.0"

Unable to load textures using remote url in react-three/drei/native

0 Answers0