Comments (1)
i think The error you're encountering with the GLTFLoader in react-three-fiber is likely due to issues with loading the textures from the GLTF model in a React Native environment.
Ensure that your assets (GLTF model and textures) are correctly bundled and accessible. React Native has different ways to handle static assets compared to a typical web environment.
Use the correct method to load assets in a React Native environment. React Native uses a different way to reference assets using the require function.
import React from 'react';
import { PixelRatio, StyleSheet, View } from 'react-native';
import { Canvas } from '@react-three/fiber/native';
import { OrbitControls } from '@react-three/drei/native';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { useLoader } from '@react-three/fiber';
import { Suspense } from 'react';
const modelPath = require('./assets/model.glb');
const onCanvasCreated = (state) => {
const _camera = state.camera;
const _size = state.size;
_camera.aspect = _size.width / _size.height;
_camera.updateProjectionMatrix();
const _gl = state.gl.getContext();
_gl.gammaFactor = 2.2;
const pixelStorei = _gl.pixelStorei.bind(_gl);
_gl.pixelStorei = function (...args) {
const [parameter] = args;
switch (parameter) {
case _gl.UNPACK_FLIP_Y_WEBGL:
return pixelStorei(...args);
}
};
};
function Model(props) {
const gltf = useLoader(GLTFLoader, modelPath);
return <primitive object={gltf.scene} {...props} />;
}
export default function App() {
return (
<View style={styles.container}>
<Canvas
legacy={true}
gl={{ antialias: true }}
dpr={PixelRatio.get()}
camera={{ fov: 50, near: 0.1, far: 1000, position: [0, 0, 0.8] }}
onCreated={onCanvasCreated}
>
<ambientLight color={0xffffff} intensity={0.1} />
<hemisphereLight color={0xffffff} intensity={0.5} />
<directionalLight color={0xffffff} intensity={1.5} position={[0, 1, 5]} />
<pointLight position={[1, 2, -0.5]} castShadow={true} intensity={2} distance={100} />
<Suspense fallback={null}>
<Model />
</Suspense>
<OrbitControls />
</Canvas>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
from react-three-fiber.
Related Issues (20)
- Instance switching / constructor argument changes for Object3Ds do not work properly
- Update docs' examples page with pmndrs/examples links/thumbs
- Add Callbacks for Completion and Progress in `useLoader.preload`
- Typescript type declarations seems missing in release v8.17.0 HOT 3
- react-native gesture responders can't be nested HOT 11
- Cannot read property "trim" of undefined HOT 5
- Applications is blicking when shared via Microsoft Teams HOT 2
- Event priority is ignored after creating a primitive from a glTF scene HOT 1
- `findByProps({ name: ... })` returns multiple instances HOT 1
- [useLoader/OBJLoader]: Load *.obj from Input String/Bytes HOT 2
- Cannot read property 'Canvas' of undefined
- ReferenceError: Property "Worker" doesn't exist HOT 1
- Can't import using javascript modules / importmaps HOT 1
- Canvas is double the size of the container (iframe) HOT 2
- WebGPU support HOT 5
- Portable Reconciler (Bring your own three.js) HOT 7
- Make expo-gl and expo-assets optional HOT 6
- License of Examples HOT 1
- ReferenceError: document is not defined (with useLoader) HOT 2
- useLoader incorrectly merges materials that have the same name (used in useGLTF) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-three-fiber.