React Three Fiber结合TextureLoader在Expo原生端不显示球体问题

• 当前使用的Three.js原生TextureLoader完全基于浏览器DOM API实现，React Native原生环境（Android/iOS）不存在DOM级别的全局Image对象，也没有内置浏览器的跨域图片加载逻辑，调用useLoader(THREE.TextureLoader, 图片地址)时，纹理加载流程会静默报错、无有效输出。
• 代码通过Suspense组件包裹球体元素，一旦纹理加载流程未返回有效结果，组件会一直停在fallback={null}的等待状态，网格对象永远不会被加入渲染管线，因此原生设备上看不到球体渲染。
• Web运行环境具备完整DOM能力，TextureLoader可以正常完成图片对象创建、跨域资源拉取、WebGL纹理生成全流程，因此代码在浏览器中运行完全正常。
• 之前尝试替换成本地图片资源依然失败，本质是相同的兼容问题：原生环境无法解析Web端的静态资源路径规则，就算填写本地文件路径，原生TextureLoader也无法读取文件内容生成可用纹理。

• 第一步做问题验证：暂时移除材质上的map={texture}属性，给meshBasicMaterial增加纯色配置例如color="#ff2200"，观察球体是否可以正常渲染、旋转。如果纯色球体可以正常显示，即可排除相机位置、渲染器参数、组件挂载逻辑的问题，完全确认是纹理加载的环境兼容问题。
• 替换纹理加载逻辑：不再依赖Three.js原生的TextureLoader，改用适配React Native环境的图片加载桥接层，无论加载远程http图片还是本地导入的图片资源，都可以正确转换为Three.js可识别的纹理对象。
• 适配原生渲染上下文：React Native环境不存在DOM Canvas节点，需要将R3F的渲染输出桥接到原生GL Surface上，否则即便模型加载流程正常，也没有可输出到屏幕的原生渲染通道。

内容的提问来源于stack exchange，提问作者Raskar Kapak