GLTFJSX Problem | Three.js | Page 1

calm night May 15, 2023, 7:02 PM

#

Hi everyone,

I tried to load a glb Object with Three Fiber in my React native App. I did everything like in this Video of Wawa (https://www.youtube.com/watch?v=pXpckHDDNYo&t=181s) except of i used Typescript.

I have a App.tsx where i open the Wardrobe.tsx which is located in src/components. In the Wardrobe.tsx i have this code:

import { Canvas, useLoader } from "@react-three/fiber/native";
import React, { Suspense, useEffect, useState } from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";

import { Clone, shaderMaterial } from "@react-three/drei";
import {View, Text, TextInput, Button } from "react-native";
import { Tshirt2 } from "./Shirt";

const App = () => {

  return (
    <>
      <Canvas>
        <pointLight position={[10, 10, 10]} /
        <Suspense fallback={null}> 
         <Tshirt2 />
        </Suspense>
      </Canvas>
</>
  );
};

export default App;

The <Tshirt2 /> component is the result of npx gtlfjsx shirt.glb -t and located int src/components. The shirt.glb is located in public/models. In the Tshirt2.tsx i changed the path of useGLTF and preload to ('./models/shirt.glb')

But when I load my App, i get this error:

Error: Could not load ./models/shirt.glb: Network request failed)

This error is located at:
    in Unknown
    in FiberProvider
    in CanvasWrapper (created by App)
    in App (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

Can someone Help me? I could not find a solution for hours

YouTube

Wawa Sensei

React Three Fiber tutorial - Scroll Animations

Discover how to load a 3D model and animate it based on the current user scroll.
We will be using React Three Fiber Drei helper useScroll with GSAP to have full control over our animation.
We'll also create an HTML/CSS User Interface using Tailwind that will also follow the scroll of the page.

To follow Thais on social media it's here:
Twitter...

▶ Play video

modern plover May 15, 2023, 8:17 PM

#

i think you need to require the model in RN, this is a native platform it doesn't know what a url fetch is

#

useGLTF(require(url))

calm night May 16, 2023, 3:45 PM

#

modern plover i think you need to require the model in RN, this is a native platform it doesn'...

I got a solution for that. But now i get this error

TypeError: undefined is not a function

This error is located at:
in Unknown
in FiberProvider
in CanvasWrapper (created by App)
in App (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

#

and this:
The above error occurred in the <Tshirt2> component:

at Tshirt2
at Suspense
at mesh
at Shirter
at Suspense
at ErrorBoundary 
at FiberProvider 
at Provider

#GLTFJSX Problem