Load models from public folder with vite

Questions
,
1

Hello,

I am using Vite and am trying to load a glb file from the public folder. Here is the public folder:

image
image745×277 10.1 KB

As a result, I am calling the GLTF loader:

let loader = new GLTFLoader()
      loader.load("/ModelBanners/room.glb", function (group: GLTF) {
         resolve(group)
      }, (event: ProgressEvent<EventTarget>) => {
         console.log(event)
      }, (error) => {
         console.error(error)
      })

I am getting a 404 error.

image
image2026×1383 148 KB

Here is vite.config,js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build:{
    outDir: "build",
    // rollupOptions: {
    //   external: ['date-fns/locale/en-US']
    // }
  }
})

Here is tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false
  },
  "include": ["src", "src/Stores/.ts", "src/Stores/.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

The start up command is npm run dev.

2

It seems that path is wrong.
please fix like this.
let loader = new GLTFLoader()
loader.load(“./CAD/ModelBanners/room.glb”, function (group: GLTF) {
resolve(group)
}, (event: ProgressEvent) => {
console.log(event)
}, (error) => {
console.error(error)
})

1 Like