Importing multiple .glb files into one Three.js project

Questions
1

Hello,
I’m new in the world of three js. For a big school assignment I have to import some modeled 3d objects into a webbrowser and add some functionality. The problem is that for some reason, I can’t find any working example for my case. We have to use Three js with react typescript.

At this point I have a simpel plane with a ball mesh that can roam around this plane with the arrow keys.

I managed to load a model of a cool ball. I was trying to replace the mesh with this ball so you can control this ball instead of the mesh (But that is another topic).

I tried a lot of things to load my other glb files and I don’t get an error but they just don’t show up.

Anyone that can help me?

This code creates a component for a jukebox model I’ve created

import { useGLTF } from "@react-three/drei";
import Jukebox from './Models/Jukebox.glb';


function JukeModel() {
    const juke = useGLTF(Jukebox, true);
    return (
        <primitive object={juke} />
    )
}

const Juke = () => {
    return (
            < JukeModel />
    )
}

export { Juke } ;

This is the main file where my individual components are put together and rendered into the browser

import { GroupProps } from "@react-three/fiber";
import { StefWorldFloor as Floor } from "Examples/Stef/World/Floor";
import { RapierWorldPlayer as Player } from "Examples/Stef/World/Player";
// import { playerBall as Ball } from "Examples/Stef/World/Ball";
// import { HouseModel as House } from "Examples/Stef/World/House";
import { Juke as Jukebox } from "Examples/Stef/World/Jukebox";

const StefWorld = (props: GroupProps) => {
  return (
    <group name="World" {...props}>
      <Floor />
      <Jukebox />
      <Player />
    </group>
  );
};

export { StefWorld };