0

I am learning to develop some mobile applications using react native and expo. I have created some code to apply a texture on a sphere. I have tried both with http url image and an image stored on my machine. When I am running the project in the expo web browser, everything is OK, but when I am launching it on android and ios devices, the sphere object is not displayed. Any idea why this would work in the browser but not in a native environment? Here is my code:

import React, { useRef, useState,useMemo, Suspense } from 'react';
import { StyleSheet, View } from 'react-native';
import * as THREE from "three";
import { Canvas, useFrame,useLoader } from 'react-three-fiber';
// import myImage from './img/world.png'
function SphereElement(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef();

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);

  // Rotate mesh
  useFrame(() => {
    if (mesh && mesh.current) {
      mesh.current.rotation.y = mesh.current.rotation.y += 0.002;
    }
  });


  const image_pth='https://i.imgur.com/3yEEsnO.png'
  const texture = useLoader(THREE.TextureLoader,image_pth)

  return (
    <mesh
      {...props}
      ref={mesh}
    >
      <sphereBufferGeometry attach="geometry" args={[2, 32, 32]} />
      <meshBasicMaterial
        attach="material"
        transparent side={THREE.DoubleSide}
        map={texture}
      >
      </meshBasicMaterial>
    </mesh>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Canvas>
        <Suspense fallback={null}>
        <SphereElement position={[0, 0, 0]} />
        </Suspense>
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
});
Raskar Kapak
  • 107
  • 1
  • 2

1 Answers1

1

You should use useTexture hook from drei, as of the newer version of three and react-three-fiber, that is the recommended way to load textures. https://github.com/pmndrs/drei#usetexture

Epiczzor
  • 377
  • 2
  • 13
  • Thank you for your time and your answer. I have switched to @react-three/fiber and @react-three/drei. The application is working when I run in a web browser, but when I run it in expo android, I have an error message about Metro encountering an error and the@react-three\fiber\dist\native.js(.native|.android.jsx|.native.jsx|,etc..) files are not existing. I have added a metro.config.js with the resolver (jsx,js,tsx and ts), but it has been unsuccessful. – Raskar Kapak Apr 21 '21 at 09:08