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

Dupeydoo · June 19, 2021, 2:22pm

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:

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…

To load my model in, I first converted my GLB to a TSX using this tool.

The output looks like this:

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="...">:

<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).

drcmda · June 19, 2021, 2:46pm

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 => …)

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.

Dupeydoo · June 20, 2021, 8:42am

Here is the model, apologies for the delay:

example.glb (366.4 KB)

drcmda · June 20, 2021, 1:45pm

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

Dupeydoo · June 20, 2021, 3:26pm

Great! Thank you for taking the time to look

drcmda · June 20, 2021, 4:15pm

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

npx gltfjsx yourfile.glb

will update the online tool later.

Dupeydoo · June 21, 2021, 3:51pm

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:

/*
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?

drcmda · June 21, 2021, 4:08pm

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

Dupeydoo · June 21, 2021, 4:44pm

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

Dupeydoo · June 21, 2021, 6:16pm

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!

Zulker-Nien · March 12, 2022, 7:31pm

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

drcmda · March 12, 2022, 8:32pm

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.

Zulker-Nien · March 12, 2022, 8:37pm

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

drcmda · March 12, 2022, 11:47pm

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.

Zulker-Nien · March 13, 2022, 10:19am

@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.

Zulker-Nien · March 13, 2022, 10:46am

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

drcmda · March 13, 2022, 5:36pm

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

dipbd1 · March 16, 2022, 10:11am

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

drcmda · March 16, 2022, 6:00pm

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.

Zulker-Nien · March 21, 2022, 10:43pm

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></>
  );
}

Topic		Replies	Views
Can't load a .glb file with GLTFLoader Questions gltf-loader , react-three-fiber	3	6933	March 4, 2020
React-three-fibre not able to load glft in TypeScript Questions react-three-fiber	6	2792	October 16, 2022
Unable to load .glb model file into React with GLTFLoader (bad URL 404) Questions loaders	8	5891	October 14, 2022
glTF missing geometry R3F Questions loaders , react-three-fiber	7	2114	April 30, 2020
Is there any way to make glb/gltf viewer with interaction through react three fiber? Questions materials , loaders , gltf-loader , glb , model-viewer	6	3978	April 27, 2022

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

Related Topics