Unable to import a glTF file

Questions
, ,
1

I have downloaded the model(gltf) from here: Oak Cut String Minimalist Staircase - Download Free 3D model by TKstairs.com (@tkstairs) [608fc2a] - Sketchfab

This is the code I run(/Users/name/Desktop/three-project/examples/worlds/Staircase.tsx)

import * as THREE from "three";
import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";
import { GLTF } from "three-stdlib";
import { Group } from "three";

type GLTFResult = GLTF & {
  nodes: {
    ['_x0023_RISERbig-oaktexjpg1111']: THREE.Mesh;
    ['_x0023_STRINGbig-oaktexjpg1111']: THREE.Mesh;
    ['_x0023_TREADbig-oaktexjpg1111']: THREE.Mesh;
  };
  materials: {
    ['x0023_RISERbig-oaktex.jpg1111']: THREE.MeshStandardMaterial;
    ['x0023_STRINGbig-oaktex.jpg1111']: THREE.MeshStandardMaterial;
    ['x0023_TREADbig-oaktex.jpg1111']: THREE.MeshStandardMaterial;
  };
};

const FILE_URL = './assets/staircase/scene.gltf';
export default function Model(props: JSX.IntrinsicElements["group"]) {
  const group = useRef<Group>(null);
  const { nodes, materials } = useGLTF(FILE_URL) as GLTFResult;
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group position={[0, -2.89, 0]}>
          <mesh
            castShadow
            receiveShadow
            geometry={nodes["_x0023_RISERbig-oaktexjpg1111"].geometry}
            material={materials["x0023_RISERbig-oaktex.jpg1111"]}
          />
          <mesh
            castShadow
            receiveShadow
            geometry={nodes["_x0023_STRINGbig-oaktexjpg1111"].geometry}
            material={materials["x0023_STRINGbig-oaktex.jpg1111"]}
          />
          <mesh
            castShadow
            receiveShadow
            geometry={nodes["_x0023_TREADbig-oaktexjpg1111"].geometry}
            material={materials["x0023_TREADbig-oaktex.jpg1111"]}
          />
        </group>
      </group>
    </group>
  );
}

useGLTF.preload(FILE_URL);

I store the scene.gltf at here: /Users/name/Desktop/three-project/examples/assets/staircase

When I run the server, it shows the error:

Uncaught Could not load ./assets/staircase/scene.gltf: fetch for "http://localhost:3000/assets/staircase/scene.gltf"

I’m not sure if that is the wrong path or something else. Thanks.

2

'./assets/staircase/scene.gltf' is not a valid path, it does not exist. this has to do with how bundlers work in general. static assets go into /public, the path then becomes /model.glb, it needs to be an absolute path, not a relative.

the second thing that is off is that you’re using gltf. you should be using glb because gltf is larger, and can still refer to further external files so that you would have to instruct the gltfloader how to load them. since you’re using GLTFJSX anyway there’s a flag where it creates a compressed file for you:

npx gltfjsx scene.gtlf --transform --types --aggressive

this will create a draco-compressed, texture-resized glb named scene-transformed.glb.

* the last flag, aggressive just creates a leaner output, it can collapse useless groups and empty nodes.

1 Like
3

Thanks, it works.