React three fiber and Textureloader未显示

Question

我正在学习使用react native和expo开发一些移动应用程序。我已经创建了一些代码来在球体上应用纹理。我已经尝试了http url图片和存储在我机器上的图片。当我在expo web浏览器中运行该项目时，一切正常，但是当我在android和ios设备上启动它时，sphere对象不显示。你知道为什么这可以在浏览器中工作，而不能在本机环境中工作吗？下面是我的代码：

​

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

​

Answer 1

你应该使用drei的useTexture钩子，从three和react-three-fiber的更新版本开始，这是推荐的加载纹理的方式。https://github.com/pmndrs/drei#usetexture