# Issues with Loading GLB with react-three-fiber and next js

**URL:** <https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368>\
**Category:** Questions\
**Tags:** gltf-loader, gltfjsx, react-three-fiber\
**Created:** [June 19, 2021, 2:22pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368 "2021-06-19T14:22:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dupeydoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dupeydoo/32/19035_2.png) [@Dupeydoo](https://discourse.threejs.org/u/Dupeydoo)\
**Post date:** [June 19, 2021, 2:22pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/1 "2021-06-19T14:22:36Z")

</div>

Hey guys,

I am attempting to load a **glb** model into a react (next js with TypeScript) application and display it. When I preview the 3d model in an online viewer I get this:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/4/942d66a75bd0bedb17d6c8f5cd9b8b27570c7945.jpeg)

All seems fine. When I attempt to load the model in my app, it either seems to be misshapen, or its missing meshes. Here are some examples, the first one was my first attempt, the second I tried adjusting some things in the code and it went worse…

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/6/960aa25cc807dd461d11e642d11232f16cd0fc44.png)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/3/03b2c8d1dcc40982826b1a4b7c11ec70ce3d66a8.png)

To load my model in, I first converted my GLB to a TSX using [this tool](https://gltf.pmnd.rs/).

The output looks like this:

```javascript
import * as THREE from "three";
import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";

type GLTFResult = GLTF & {
  nodes: {
    Door_Right: THREE.Mesh;
    Cube006_1: THREE.Mesh;
    Cube007_1: THREE.Mesh;
    Door_Left: THREE.Mesh;
    Cube012: THREE.Mesh;
    Cube023: THREE.Mesh;
    Beam_Top: THREE.Mesh;
    Wood_beams: THREE.Mesh;
    Wood_beams001: THREE.Mesh;
    Cube001: THREE.Mesh;
    Cylinder_1: THREE.Mesh;
    Cube002: THREE.Mesh;
    Cube003: THREE.Mesh;
    Cube004: THREE.Mesh;
    Cube005: THREE.Mesh;
    Cube008: THREE.Mesh;
    Cube009: THREE.Mesh;
    Cube010: THREE.Mesh;
    Cube011: THREE.Mesh;
    Cylinder001_1: THREE.Mesh;
    Cube014: THREE.Mesh;
    Cube013: THREE.Mesh;
    Cylinder002: THREE.Mesh;
    Cube017: THREE.Mesh;
    Cube016: THREE.Mesh;
    Cube015: THREE.Mesh;
    Cube022: THREE.Mesh;
    Cube021: THREE.Mesh;
    Cube020: THREE.Mesh;
    Cube019: THREE.Mesh;
    Cube018: THREE.Mesh;
    Cylinder003: THREE.Mesh;
  };
  materials: {
    Wood: THREE.MeshStandardMaterial;
    Rust: THREE.MeshStandardMaterial;
    ["Rust.001"]: THREE.MeshStandardMaterial;
    ["Rust.018"]: THREE.MeshStandardMaterial;
    ["Rust.027"]: THREE.MeshStandardMaterial;
    ["Wood Dark"]: THREE.MeshStandardMaterial;
    ["Rust.002"]: THREE.MeshStandardMaterial;
    ["Rust.003"]: THREE.MeshStandardMaterial;
    ["Rust.004"]: THREE.MeshStandardMaterial;
    ["Rust.005"]: THREE.MeshStandardMaterial;
    ["Rust.006"]: THREE.MeshStandardMaterial;
    ["Rust.008"]: THREE.MeshStandardMaterial;
    ["Rust.007"]: THREE.MeshStandardMaterial;
    ["Rust.020"]: THREE.MeshStandardMaterial;
    ["Rust.019"]: THREE.MeshStandardMaterial;
    ["Rust.022"]: THREE.MeshStandardMaterial;
    ["Rust.021"]: THREE.MeshStandardMaterial;
    ["Rust.026"]: THREE.MeshStandardMaterial;
    ["Rust.025"]: THREE.MeshStandardMaterial;
    ["Rust.024"]: THREE.MeshStandardMaterial;
    ["Rust.023"]: THREE.MeshStandardMaterial;
  };
};

type ActionName = "Door RightAction" | "Door LeftAction.001";
type GLTFActions = Record<ActionName, THREE.AnimationAction>;

export default function Model(props: {
  groupProps?: JSX.IntrinsicElements["group"];
  url: string;
}) {
  const group = useRef<THREE.Group>();

  const { nodes, materials, animations } = useGLTF(props.url) as GLTFResult;
  const { actions } = useAnimations<GLTFActions>(animations, group);
  useGLTF.preload(props.url);

  return (
    <group ref={group} {...props.groupProps} dispose={null}>
      <scene>
        <mesh
          name="Door_Right"
          castShadow
          receiveShadow
          geometry={nodes.Door_Right.geometry}
          material={nodes.Door_Right.material}
          position={[-0.46086833, 4.47411871, 1.81928372]}
          rotation={[0, 0, -Math.PI / 2]}
          scale={[1.7364651, 0.09472504, 1.77326417]}
        >
          <mesh
            name="Cube006_1"
            castShadow
            receiveShadow
            geometry={nodes.Cube006_1.geometry}
            material={nodes.Cube006_1.material}
            position={[0.09024856, 0.02326345, -0.17493892]}
            rotation={[0.06934521, 0, 0]}
            scale={[0.01108658, 0.09026723, 0.01096111]}
          />
          <mesh
            name="Cube007_1"
            castShadow
            receiveShadow
            geometry={nodes.Cube007_1.geometry}
            material={nodes.Cube007_1.material}
            position={[1.93614078, 0.02326107, -0.17493892]}
            rotation={[0.06934522, 0, 0]}
            scale={[0.01108658, 0.09026723, 0.01096111]}
          />
        </mesh>
        <mesh
          name="Door_Left"
          castShadow
          receiveShadow
          geometry={nodes.Door_Left.geometry}
          material={nodes.Door_Left.material}
          position={[-0.45518765, 4.57606792, -1.83517742]}
          rotation={[0, 0, -Math.PI / 2]}
          scale={[1.7364651, 0.09472504, 1.77326417]}
        >
          <mesh
            name="Cube012"
            castShadow
            receiveShadow
            geometry={nodes.Cube012.geometry}
            material={nodes.Cube012.material}
            position={[-0.02068212, -0.02630043, 0.16728997]}
            rotation={[3.00273455, 0.0000084, 5.8e-7]}
            scale={[0.01108658, 0.09026723, 0.01096111]}
          />
          <mesh
            name="Cube023"
            castShadow
            receiveShadow
            geometry={nodes.Cube023.geometry}
            material={nodes.Cube023.material}
            position={[1.827461, -0.02630329, 0.16728997]}
            rotation={[3.00273455, 0.0000084, 5.8e-7]}
            scale={[0.01108658, 0.09026723, 0.01096111]}
          />
        </mesh>
        <mesh
          name="Beam_Top"
          castShadow
          receiveShadow
          geometry={nodes.Beam_Top.geometry}
          material={nodes.Beam_Top.material}
          position={[-0.01158098, 6.29058456, -0.02521912]}
        />
        <mesh
          name="Wood_beams"
          castShadow
          receiveShadow
          geometry={nodes.Wood_beams.geometry}
          material={nodes.Wood_beams.material}
          position={[0.00054604, 2.78375435, 2.28781462]}
        />
        <mesh
          name="Wood_beams001"
          castShadow
          receiveShadow
          geometry={nodes.Wood_beams001.geometry}
          material={nodes.Wood_beams001.material}
          position={[0.0008597, 2.7946589, -2.35413432]}
        />
        <mesh
          name="Cube001"
          castShadow
          receiveShadow
          geometry={nodes.Cube001.geometry}
          material={nodes.Cube001.material}
          position={[-0.41848296, 4.46486712, 2.28258157]}
          rotation={[3.13361595, 0.0216759, -1.57056402]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        >
          <mesh
            name="Cylinder_1"
            castShadow
            receiveShadow
            geometry={nodes.Cylinder_1.geometry}
            material={nodes.Cylinder_1.material}
            position={[0.2192241, -3.37392426, 24.05841827]}
            rotation={[-3.0373978, -0.02227364, -0.48875934]}
            scale={[5.26652813, 5.58293581, 2.35427046]}
          />
        </mesh>
        <mesh
          name="Cube002"
          castShadow
          receiveShadow
          geometry={nodes.Cube002.geometry}
          material={materials["Rust.003"]}
          position={[-0.43756998, 4.58257532, 1.81947076]}
          rotation={[3.09011749, -0.00797728, 0.00005948]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube003"
          castShadow
          receiveShadow
          geometry={nodes.Cube003.geometry}
          material={nodes.Cube003.material}
          position={[-0.44218796, 4.46717644, 2.29209232]}
          rotation={[3.13361595, 0.0216759, -1.57056402]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube004"
          castShadow
          receiveShadow
          geometry={nodes.Cube004.geometry}
          material={materials["Rust.004"]}
          position={[-0.44271237, 4.46717644, 2.15835524]}
          rotation={[3.13361595, 0.0216759, -1.57056402]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube005"
          castShadow
          receiveShadow
          geometry={nodes.Cube005.geometry}
          material={materials["Rust.005"]}
          position={[-0.43756998, 4.34876633, 1.81947076]}
          rotation={[-3.12504716, 0.00797732, -3.14153196]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube008"
          castShadow
          receiveShadow
          geometry={nodes.Cube008.geometry}
          material={materials["Rust.006"]}
          position={[-0.44271237, 1.26184869, 2.15835524]}
          rotation={[3.13361595, 0.0216759, -1.57056402]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube009"
          castShadow
          receiveShadow
          geometry={nodes.Cube009.geometry}
          material={nodes.Cube009.material}
          position={[-0.44218796, 1.26184869, 2.29209232]}
          rotation={[3.13361595, 0.0216759, -1.57056402]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube010"
          castShadow
          receiveShadow
          geometry={nodes.Cube010.geometry}
          material={materials["Rust.007"]}
          position={[-0.43756998, 1.37724757, 1.81947076]}
          rotation={[3.09011749, -0.00797728, 0.00005948]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube011"
          castShadow
          receiveShadow
          geometry={nodes.Cube011.geometry}
          material={nodes.Cube011.material}
          position={[-0.41848296, 1.25953937, 2.28258157]}
          rotation={[3.13361595, 0.0216759, -1.57056402]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        >
          <mesh
            name="Cylinder001_1"
            castShadow
            receiveShadow
            geometry={nodes.Cylinder001_1.geometry}
            material={nodes.Cylinder001_1.material}
            position={[0.2192241, -3.37392807, 24.0584259]}
            rotation={[-3.0373978, -0.02227364, -0.48875934]}
            scale={[5.26652813, 5.58293581, 2.35427046]}
          />
        </mesh>
        <mesh
          name="Cube014"
          castShadow
          receiveShadow
          geometry={nodes.Cube014.geometry}
          material={materials["Rust.020"]}
          position={[-0.44447008, 4.34681368, -1.86382568]}
          rotation={[-0.05147699, -0.00797726, 0.00005913]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube013"
          castShadow
          receiveShadow
          geometry={nodes.Cube013.geometry}
          material={materials["Rust.019"]}
          position={[-0.44447008, 4.58062267, -1.86382568]}
          rotation={[0.01654558, 0.00797731, -3.14153201]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cylinder002"
          castShadow
          receiveShadow
          geometry={nodes.Cylinder002.geometry}
          material={nodes.Cylinder002.material}
          position={[-0.44374391, 4.46399498, -1.86334646]}
          rotation={[-Math.PI, 0, 0]}
          scale={[0.04508097, 0.10747963, 0.04508097]}
        />
        <mesh
          name="Cube017"
          castShadow
          receiveShadow
          geometry={nodes.Cube017.geometry}
          material={nodes.Cube017.material}
          position={[-0.42001459, 4.46794653, -2.34471536]}
          rotation={[-0.00797977, 0.02542654, -1.57053418]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube016"
          castShadow
          receiveShadow
          geometry={nodes.Cube016.geometry}
          material={nodes.Cube016.material}
          position={[-0.443755, 4.46563721, -2.35413694]}
          rotation={[-0.00797977, 0.02542654, -1.57053418]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube015"
          castShadow
          receiveShadow
          geometry={nodes.Cube015.geometry}
          material={materials["Rust.021"]}
          position={[-0.44377854, 4.46563721, -2.2203989]}
          rotation={[-0.00797977, 0.02542654, -1.57053418]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube022"
          castShadow
          receiveShadow
          geometry={nodes.Cube022.geometry}
          material={materials["Rust.026"]}
          position={[-0.44447008, 1.37138617, -1.86382568]}
          rotation={[0.01654558, 0.00797731, -3.14153201]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube021"
          castShadow
          receiveShadow
          geometry={nodes.Cube021.geometry}
          material={materials["Rust.025"]}
          position={[-0.44447008, 1.13757718, -1.86382568]}
          rotation={[-0.05147699, -0.00797726, 0.00005913]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube020"
          castShadow
          receiveShadow
          geometry={nodes.Cube020.geometry}
          material={materials["Rust.024"]}
          position={[-0.44377854, 1.2564007, -2.2203989]}
          rotation={[-0.00797977, 0.02542654, -1.57053418]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube019"
          castShadow
          receiveShadow
          geometry={nodes.Cube019.geometry}
          material={nodes.Cube019.material}
          position={[-0.443755, 1.2564007, -2.35413694]}
          rotation={[-0.00797977, 0.02542654, -1.57053418]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cube018"
          castShadow
          receiveShadow
          geometry={nodes.Cube018.geometry}
          material={nodes.Cube018.material}
          position={[-0.42001459, 1.25871003, -2.34471536]}
          rotation={[-0.00797977, 0.02542654, -1.57053418]}
          scale={[0.01925146, 0.0085508, 0.01925146]}
        />
        <mesh
          name="Cylinder003"
          castShadow
          receiveShadow
          geometry={nodes.Cylinder003.geometry}
          material={nodes.Cylinder003.material}
          position={[-0.44374391, 1.25475848, -1.86334646]}
          rotation={[-Math.PI, 0, 0]}
          scale={[0.04508097, 0.10747963, 0.04508097]}
        />
      </scene>
    </group>
  );
}

```

Once this model was in a tsx file I load it as so from index.tsx as `<Model url="...">`:

```javascript
<Canvas className="mt-20">
        <pointLight position={[10, 10, 10]} />
        <ambientLight intensity={0.4} />
        <Suspense fallback={null}>
          <Model url="/my.glb" />
        </Suspense>
      </Canvas>

```

The glb file is placed in the `public` directory of my next js project. It does seem to correctly locate the file, and there are no console errors, just never the correct shapes that make up the doors.

I’ve tried adjusting various settings, including the camera config, and the model itself, but have not made much progress in sorting it out.

If anyone has any thoughts/suggestions on to what might be happening when I load this model, please do let me know, I would appreciate it greatly! (I’m quite new to three hence my simple explanations).

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 19, 2021, 2:46pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/2 "2021-06-19T14:46:16Z")

</div>

Can you upload the model?

When you do it like this there is no way you would get anything other than using plain new GLTFLoader().load(url, data =\> …)

```javascript
function Model({ url, ...props }) {
  const { scene } = useGLTF(url)
  return <primitive object={scene} {...props} />
}

```

But if there’s something wrong with gltfjsx i need to check the model. You can make an issue up over there if you want.

---

<div class="post-metadata">

**Author:** ![Dupeydoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dupeydoo/32/19035_2.png) [@Dupeydoo](https://discourse.threejs.org/u/Dupeydoo)\
**Post date:** [June 20, 2021, 8:42am UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/3 "2021-06-20T08:42:11Z")

</div>

Here is the model, apologies for the delay:

[example.glb](https://discourse.threejs.org/uploads/short-url/c2K3IFHmLxxYOCrdoXKrdmZl5IG.glb) (366.4 KB)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 20, 2021, 1:45pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/4 "2021-06-20T13:45:12Z")

</div>

bug in gltfjsx, its not writing out the scale prop for some reason. i’ll fix it.

---

<div class="post-metadata">

**Author:** ![Dupeydoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dupeydoo/32/19035_2.png) [@Dupeydoo](https://discourse.threejs.org/u/Dupeydoo)\
**Post date:** [June 20, 2021, 3:26pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/6 "2021-06-20T15:26:24Z")

</div>

Great! Thank you for taking the time to look 😀

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 20, 2021, 4:15pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/7 "2021-06-20T16:15:42Z")

</div>

mixed up an operator, so it skipped scale. 💪 fixed it. although only the tool:

```
npx gltfjsx yourfile.glb

```

will update the online tool later.

---

<div class="post-metadata">

**Author:** ![Dupeydoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dupeydoo/32/19035_2.png) [@Dupeydoo](https://discourse.threejs.org/u/Dupeydoo)\
**Post date:** [June 21, 2021, 3:51pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/8 "2021-06-21T15:51:06Z")

</div>

Oh awesome, thanks for doing so quickly! I went ahead an re-generated the tsx for it (more simply this time just using the npx tool), I still seem to be getting the same problems as above though unfortunately:

```javascript
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from "three";
import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";

type GLTFResult = GLTF & {
  nodes: {
    Door_Right: THREE.Mesh;
    Cube006_1: THREE.Mesh;
    Cube007_1: THREE.Mesh;
    Door_Left: THREE.Mesh;
    Cube012: THREE.Mesh;
    Cube023: THREE.Mesh;
    Beam_Top: THREE.Mesh;
    Wood_beams: THREE.Mesh;
    Wood_beams001: THREE.Mesh;
    Cube001: THREE.Mesh;
    Cylinder_1: THREE.Mesh;
    Cube002: THREE.Mesh;
    Cube003: THREE.Mesh;
    Cube004: THREE.Mesh;
    Cube005: THREE.Mesh;
    Cube008: THREE.Mesh;
    Cube009: THREE.Mesh;
    Cube010: THREE.Mesh;
    Cube011: THREE.Mesh;
    Cylinder001_1: THREE.Mesh;
    Cube014: THREE.Mesh;
    Cube013: THREE.Mesh;
    Cylinder002: THREE.Mesh;
    Cube017: THREE.Mesh;
    Cube016: THREE.Mesh;
    Cube015: THREE.Mesh;
    Cube022: THREE.Mesh;
    Cube021: THREE.Mesh;
    Cube020: THREE.Mesh;
    Cube019: THREE.Mesh;
    Cube018: THREE.Mesh;
    Cylinder003: THREE.Mesh;
  };
  materials: {
    Wood: THREE.MeshStandardMaterial;
    Rust: THREE.MeshStandardMaterial;
    ["Rust.001"]: THREE.MeshStandardMaterial;
    ["Rust.018"]: THREE.MeshStandardMaterial;
    ["Rust.027"]: THREE.MeshStandardMaterial;
    ["Wood Dark"]: THREE.MeshStandardMaterial;
    ["Rust.002"]: THREE.MeshStandardMaterial;
    ["Rust.003"]: THREE.MeshStandardMaterial;
    ["Rust.004"]: THREE.MeshStandardMaterial;
    ["Rust.005"]: THREE.MeshStandardMaterial;
    ["Rust.006"]: THREE.MeshStandardMaterial;
    ["Rust.008"]: THREE.MeshStandardMaterial;
    ["Rust.007"]: THREE.MeshStandardMaterial;
    ["Rust.020"]: THREE.MeshStandardMaterial;
    ["Rust.019"]: THREE.MeshStandardMaterial;
    ["Rust.022"]: THREE.MeshStandardMaterial;
    ["Rust.021"]: THREE.MeshStandardMaterial;
    ["Rust.026"]: THREE.MeshStandardMaterial;
    ["Rust.025"]: THREE.MeshStandardMaterial;
    ["Rust.024"]: THREE.MeshStandardMaterial;
    ["Rust.023"]: THREE.MeshStandardMaterial;
  };
};

type ActionName = "Door RightAction" | "Door LeftAction.001";
type GLTFActions = Record<ActionName, THREE.AnimationAction>;

export default function Model(props: JSX.IntrinsicElements["group"]) {
  const group = useRef<THREE.Group>();
  const { nodes, materials, animations } = useGLTF(
    "/my.glb"
  ) as GLTFResult;
  
  const { actions } = useAnimations<GLTFActions>(animations, group);
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh
        name="Door_Right"
        geometry={nodes.Door_Right.geometry}
        material={nodes.Door_Right.material}
        position={[-0.46, 4.47, 1.82]}
        rotation={[0, 0, -Math.PI / 2]}
        scale={[1.74, 0.09, 1.77]}
      >
        <mesh
          geometry={nodes.Cube006_1.geometry}
          material={nodes.Cube006_1.material}
          position={[0.09, 0.02, -0.17]}
          rotation={[0.07, 0, 0]}
          scale={[0.01, 0.09, 0.01]}
        />
        <mesh
          geometry={nodes.Cube007_1.geometry}
          material={nodes.Cube007_1.material}
          position={[1.94, 0.02, -0.17]}
          rotation={[0.07, 0, 0]}
          scale={[0.01, 0.09, 0.01]}
        />
      </mesh>
      <mesh
        name="Door_Left"
        geometry={nodes.Door_Left.geometry}
        material={nodes.Door_Left.material}
        position={[-0.46, 4.58, -1.84]}
        rotation={[0, 0, -Math.PI / 2]}
        scale={[1.74, 0.09, 1.77]}
      >
        <mesh
          geometry={nodes.Cube012.geometry}
          material={nodes.Cube012.material}
          position={[-0.02, -0.03, 0.17]}
          rotation={[3, 0, 0]}
          scale={[0.01, 0.09, 0.01]}
        />
        <mesh
          geometry={nodes.Cube023.geometry}
          material={nodes.Cube023.material}
          position={[1.83, -0.03, 0.17]}
          rotation={[3, 0, 0]}
          scale={[0.01, 0.09, 0.01]}
        />
      </mesh>
      <mesh
        geometry={nodes.Beam_Top.geometry}
        material={nodes.Beam_Top.material}
        position={[-0.01, 6.29, -0.03]}
        scale={[0.37, 1, 0.41]}
      />
      <mesh
        geometry={nodes.Wood_beams.geometry}
        material={nodes.Wood_beams.material}
        position={[0, 2.78, 2.29]}
        scale={[0.41, 1, 0.4]}
      />
      <mesh
        geometry={nodes.Wood_beams001.geometry}
        material={nodes.Wood_beams001.material}
        position={[0, 2.79, -2.35]}
        scale={[0.41, 1, 0.4]}
      />
      <mesh
        geometry={nodes.Cube001.geometry}
        material={nodes.Cube001.material}
        position={[-0.42, 4.46, 2.28]}
        rotation={[3.13, 0.02, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      >
        <mesh
          geometry={nodes.Cylinder_1.geometry}
          material={nodes.Cylinder_1.material}
          position={[0.22, -3.37, 24.06]}
          rotation={[-3.04, -0.02, -0.49]}
          scale={[5.27, 5.58, 2.35]}
        />
      </mesh>
      <mesh
        geometry={nodes.Cube002.geometry}
        material={materials["Rust.003"]}
        position={[-0.44, 4.58, 1.82]}
        rotation={[3.09, -0.01, 0]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube003.geometry}
        material={nodes.Cube003.material}
        position={[-0.44, 4.47, 2.29]}
        rotation={[3.13, 0.02, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube004.geometry}
        material={materials["Rust.004"]}
        position={[-0.44, 4.47, 2.16]}
        rotation={[3.13, 0.02, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube005.geometry}
        material={materials["Rust.005"]}
        position={[-0.44, 4.35, 1.82]}
        rotation={[-3.13, 0.01, -3.14]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube008.geometry}
        material={materials["Rust.006"]}
        position={[-0.44, 1.26, 2.16]}
        rotation={[3.13, 0.02, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube009.geometry}
        material={nodes.Cube009.material}
        position={[-0.44, 1.26, 2.29]}
        rotation={[3.13, 0.02, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube010.geometry}
        material={materials["Rust.007"]}
        position={[-0.44, 1.38, 1.82]}
        rotation={[3.09, -0.01, 0]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube011.geometry}
        material={nodes.Cube011.material}
        position={[-0.42, 1.26, 2.28]}
        rotation={[3.13, 0.02, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      >
        <mesh
          geometry={nodes.Cylinder001_1.geometry}
          material={nodes.Cylinder001_1.material}
          position={[0.22, -3.37, 24.06]}
          rotation={[-3.04, -0.02, -0.49]}
          scale={[5.27, 5.58, 2.35]}
        />
      </mesh>
      <mesh
        geometry={nodes.Cube014.geometry}
        material={materials["Rust.020"]}
        position={[-0.44, 4.35, -1.86]}
        rotation={[-0.05, -0.01, 0]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube013.geometry}
        material={materials["Rust.019"]}
        position={[-0.44, 4.58, -1.86]}
        rotation={[0.02, 0.01, -3.14]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cylinder002.geometry}
        material={nodes.Cylinder002.material}
        position={[-0.44, 4.46, -1.86]}
        rotation={[-Math.PI, 0, 0]}
        scale={[0.05, 0.11, 0.05]}
      />
      <mesh
        geometry={nodes.Cube017.geometry}
        material={nodes.Cube017.material}
        position={[-0.42, 4.47, -2.34]}
        rotation={[-0.01, 0.03, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube016.geometry}
        material={nodes.Cube016.material}
        position={[-0.44, 4.47, -2.35]}
        rotation={[-0.01, 0.03, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube015.geometry}
        material={materials["Rust.021"]}
        position={[-0.44, 4.47, -2.22]}
        rotation={[-0.01, 0.03, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube022.geometry}
        material={materials["Rust.026"]}
        position={[-0.44, 1.37, -1.86]}
        rotation={[0.02, 0.01, -3.14]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube021.geometry}
        material={materials["Rust.025"]}
        position={[-0.44, 1.14, -1.86]}
        rotation={[-0.05, -0.01, 0]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube020.geometry}
        material={materials["Rust.024"]}
        position={[-0.44, 1.26, -2.22]}
        rotation={[-0.01, 0.03, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube019.geometry}
        material={nodes.Cube019.material}
        position={[-0.44, 1.26, -2.35]}
        rotation={[-0.01, 0.03, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cube018.geometry}
        material={nodes.Cube018.material}
        position={[-0.42, 1.26, -2.34]}
        rotation={[-0.01, 0.03, -1.57]}
        scale={[0.02, 0.01, 0.02]}
      />
      <mesh
        geometry={nodes.Cylinder003.geometry}
        material={nodes.Cylinder003.material}
        position={[-0.44, 1.25, -1.86]}
        rotation={[-Math.PI, 0, 0]}
        scale={[0.05, 0.11, 0.05]}
      />
    </group>
  );
}

useGLTF.preload("/my.glb");

```

The 3d model when displayed appears as in the second image I posted, the only difference being I can see the edge of what looks like one of the metal brackets that is on the door.

Any thoughts on how I might troubleshoot further?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 21, 2021, 4:08pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/9 "2021-06-21T16:08:56Z")

</div>

Can it be you’re mixing up the model with something older? I just did npx gltfjsx example.glb -t and i get a proper outcome: [Basic demo (forked) - CodeSandbox](https://codesandbox.io/s/basic-demo-forked-m79pk?file=/src/App.js)

---

<div class="post-metadata">

**Author:** ![Dupeydoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dupeydoo/32/19035_2.png) [@Dupeydoo](https://discourse.threejs.org/u/Dupeydoo)\
**Post date:** [June 21, 2021, 4:44pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/10 "2021-06-21T16:44:35Z")

</div>

Right you are, does seem to look good there. I’ll have another crack in a bit and see if I did something silly.

---

<div class="post-metadata">

**Author:** ![Dupeydoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dupeydoo/32/19035_2.png) [@Dupeydoo](https://discourse.threejs.org/u/Dupeydoo)\
**Post date:** [June 21, 2021, 6:16pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/11 "2021-06-21T18:16:25Z")

</div>

All sorted! Turns out it wasn’t playing well with Next SSR so I had to use the whole “dynamic” import method to get the doors displaying. Thanks for all your help drcmda!

---

<div class="post-metadata">

**Author:** ![Zulker-Nien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zulker-nien/32/24950_2.png) [@Zulker-Nien](https://discourse.threejs.org/u/Zulker-Nien)\
**Post date:** [March 12, 2022, 7:31pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/12 "2022-03-12T19:31:19Z")

</div>

How did you fix the import? Mine is showing Error: Could not load “Audi\_R8.fbx”: Only absolute URLs are supported

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 12, 2022, 8:32pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/13 "2022-03-12T20:32:47Z")

</div>

relative urls dont exist, bundlers work in a virtual environment, and in production they bundle into a single file. either throw statics into /public and fetch via “/file.ext” or import them, in this case assets can reside within /src. this is the same with all bundlers.

---

<div class="post-metadata">

**Author:** ![Zulker-Nien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zulker-nien/32/24950_2.png) [@Zulker-Nien](https://discourse.threejs.org/u/Zulker-Nien)\
**Post date:** [March 12, 2022, 8:37pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/14 "2022-03-12T20:37:46Z")

</div>

I placed my 3d .fbx file inside the public folder of my “next.js with react three fiber project”. When I try to dynamically import it, this is what is showing

> Cannot find module ‘public/Audi\_R8.fbx’ or its corresponding type declarations

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 12, 2022, 11:47pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/15 "2022-03-12T23:47:03Z")

</div>

you cant import from public. like i said, either have your asset within /src and import, or /public and just use a plain string “/file.glb”. it doesn’t matter if that’s next, gatsby, vite. i’d go with /public bc it’s the easiest.

ps. try chrome dev tools, networking tab, you can find such things easier when you know where the problem is.

---

<div class="post-metadata">

**Author:** ![Zulker-Nien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zulker-nien/32/24950_2.png) [@Zulker-Nien](https://discourse.threejs.org/u/Zulker-Nien)\
**Post date:** [March 13, 2022, 10:19am UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/16 "2022-03-13T10:19:58Z")

</div>

![Screenshot 2022-03-13 at 4.18.49 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/3/73aa671e4f84878b493b1e4443e411a50c88314a.png)

@drcmda I tried that but the console is showing this error

> The above error occurred in the \<ForwardRef(Canvas)\> component:
> 
> ```
> at Canvas (webpack-internal:///./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:1567:3)
> at div
> at right
> at div
> at div
> at main
> at div
> at Home
> at MyApp (webpack-internal:///./pages/_app.tsx:37:27)
> at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
> at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
> at Container (webpack-internal:///./node_modules/next/dist/client/index.js:357:9)
> at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:791:26)
> at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)
> 
> ```
> 
> React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

---

<div class="post-metadata">

**Author:** ![Zulker-Nien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zulker-nien/32/24950_2.png) [@Zulker-Nien](https://discourse.threejs.org/u/Zulker-Nien)\
**Post date:** [March 13, 2022, 10:46am UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/17 "2022-03-13T10:46:33Z")

</div>

@drcmda Issue solved, turns out I needed some sleep and place the Suspense on the right place

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 13, 2022, 5:36pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/18 "2022-03-13T17:36:12Z")

</div>

no worries, suspense is really new and takes a while to get used to. glad you solved it.

---

<div class="post-metadata">

**Author:** ![dipbd1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipbd1/32/25001_2.png) [@dipbd1](https://discourse.threejs.org/u/dipbd1)\
**Post date:** [March 16, 2022, 10:11am UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/19 "2022-03-16T10:11:55Z")

</div>

@Zulker-Nien can you please share your code where you placed the suspense?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 16, 2022, 6:00pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/20 "2022-03-16T18:00:34Z")

</div>

> **[gltf simple example - CodeSandbox](https://codesandbox.io/s/gltf-simple-example-v44gg)**
>
> gltf simple example by drcmda using @react-three/drei, @react-three/fiber, react, react-dom, react-scripts, three

either inside or outside of canvas. outside allows you to have dom/html fallbacks, inside you can have threejs meshes as fallbacks. in either case you can use null.

---

<div class="post-metadata">

**Author:** ![Zulker-Nien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zulker-nien/32/24950_2.png) [@Zulker-Nien](https://discourse.threejs.org/u/Zulker-Nien)\
**Post date:** [March 21, 2022, 10:43pm UTC](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368/21 "2022-03-21T22:43:56Z")

</div>

```javascript
import { Preload } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import styles from "../styles/Component.module.css";
import Model from "./model";

export default function right() {
  return (
    <>
    <div className={styles.scene}>
      <Canvas
        camera={{
          position: [0, 0, 150]
        }}
      >
        <ambientLight intensity={1} />
        <directionalLight position={[2, 2, 5]}/>
        <Suspense fallback={null}>
           <Model />
           <Preload all/>
        </Suspense>
      </Canvas>
    </div></>
  );
}

```

[Next page](https://discourse.threejs.org/t/issues-with-loading-glb-with-react-three-fiber-and-next-js/27368.md?page=2)