I’m working on a React Native project, and I’m using Three.js for rendering 3D content. I encountered the following error:
Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively
This error occurs when I try to render a progress bar while the 3D content is loading. I’ve already tried the following steps, but the issue persists:
- Verified that the three package is correctly installed and imported.
- Checked that all necessary components are correctly extended.
- Made sure that the component I’m trying to use is correctly registered and imported.
Environment:
- React Native version: 0.72.6
- Platform: Android/iOS
Other Libraries:
"@react-three/drei": "^9.97.5",
"@react-three/fiber": "^8.0.0-beta.10",
"expo": "^49.0.0",
"expo-gl": "~13.0.1",
"r3f-native-orbitcontrols": "^1.0.9",
"react": "^18.0.0-rc.3",
"react-native": "0.72.6",
Code:
import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { OrbitControls } from '@react-three/drei';
import { View } from 'react-native';
import { heightPercentageToDP } from 'react-native-responsive-screen';
import Loader from '../../../../components/loader';
import Model from './model';
const Male_Army_Model = () => {
return (
<View style={{ flex: 1 }}>
<Canvas
shadows
gl={{ antialias: true }}
style={{ marginBottom: heightPercentageToDP(3) }}
>
<ambientLight intensity={1} />
<pointLight position={[10, 70, 70]} intensity={1.5} castShadow />
<directionalLight
position={[5, 5, 5]}
intensity={1.5}
castShadow
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
/>
<directionalLight
position={[-5, -5, -5]}
intensity={1.5}
castShadow
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
/>
<directionalLight
position={[2, -2, 1]}
intensity={1.5}
castShadow
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
/>
<directionalLight
position={[-2, 2, -1]}
intensity={1.5}
castShadow
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
/>
<OrbitControls
enableRotate
enableZoom={false}
rotateSpeed={1.0} // Consider reducing the rotate speed for smoother control
enablePan={false}
maxZoom={0.6}
minZoom={0.6}
maxPolarAngle={Math.PI / 3.5}
minPolarAngle={Math.PI / 3.5}
/>
<Suspense fallback={<Loader />}>
<Model />
</Suspense>
</Canvas>
</View>
);
};
export default Male_Army_Model;
Any insights or suggestions would be greatly appreciated!