Set Up to load 3d Model (.obj, .glb) in React with Three.js

I wanna Load my 3d Model from Blender into my React App with Three.js What functions do i need where i have to place them

my App looks like this:

-public
(my glb model)

-src

 -assets

 -components
   -Model.jsx

 -pages
   -(All the Sublinks from the Navbar)

 -app.jsx
  (here i load the Model.jsx)

And do i need Vite Buildtool, is it necassary for the 3D Models?

so i followed the instruction from this doc: https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene

i dont now where i have to place this function in my code function Scene() { const gltf = useLoader(GLTFLoader, '/Poimandres.gltf') return <primitive object={gltf.scene} /> }

I dont get any erros except this message in the console:

THREE.WebGLRenderer: Context Lost.

Solution

And do i need Vite Buildtool, is it necassary for the 3D Models?

No you don't need this, but if I were you I would build this App via bundler, you will not be strugling (too much) with publishing your App later, especially when you ask "...where should I put function x..." ;), but up to you.

i dont now where i have to place this function in my code function Scene() { const gltf = useLoader(GLTFLoader, '/Poimandres.gltf') return }

You can make this in two ways:

https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models#loading-gltf-models

// src/components/Model.jsx
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const Model = () => {
  const gltf = useLoader(GLTFLoader, "./Poimandres.gltf");
  return (
    <>
      <primitive object={gltf.scene} />
    </>
  );
};
export default Model;

..import Model to App

// src/app.jsx
import React from 'react';
import { Canvas } from '@react-three/fiber';
import Model from './components/Model.jsx';

const App = () => {
  return (
    <Canvas>
      <Model />
    </Canvas>
  );
};

export default App;

You can load glb via Drei as well:

https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models#loading-gltf-models-as-jsx-components

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const groupRef = useRef()
  const { nodes, materials } = useGLTF('/Poimandres.gltf')
  return (
      <mesh geometry={nodes.Curve007_1.geometry} material={materials['Material.001']} />
  )}

Before that, throw your glb here, to convert your model into component: https://gltf.pmnd.rs/

geometry={nodes.your_model_stuff.geometry}