I cant seem to get .glb or .gltf files imported.

<script>
    import HallucinateForm from "../ponents/HallucinateForm.svelte";
    import ModelViewer from "../ponents/ModelViewer.svelte";

    import tshirt from "./../assets/t-shirt.glb";

</script>

<main>
    <div class="eight columns">
        <ModelViewer model={tshirt}/>
    </div>
    <div class="four columns">
        <HallucinateForm />
    </div>
</main>

<style>
    
</style>

Gives me the following error.

    "message": "Cannot find module './../assets/t-shirt.glb' or its corresponding type declarations."

I've been looking around for answers and concluded that vite has no idea what to do with .glb. And i think needs instructions on what to do. Docs say that adding to the vite-env.d.ts should resolve the issue.

i have tried

declare module '*.glb'
declare module '**/*.glb'
// and tried 
export default defineConfig({
  assetsInclude: ['**/*.glb']
})

All without results. I think glb and gltf are unknown types for vite. See

Most of the material i can find online is talking about Three.js and their GLTF-loader plugin but i'm using google-modelviewer . and can't seem to figure out if these will play together. I hope someone knows of a way to get this to work.

I cant seem to get .glb or .gltf files imported.

<script>
    import HallucinateForm from "../ponents/HallucinateForm.svelte";
    import ModelViewer from "../ponents/ModelViewer.svelte";

    import tshirt from "./../assets/t-shirt.glb";

</script>

<main>
    <div class="eight columns">
        <ModelViewer model={tshirt}/>
    </div>
    <div class="four columns">
        <HallucinateForm />
    </div>
</main>

<style>
    
</style>

Gives me the following error.

    "message": "Cannot find module './../assets/t-shirt.glb' or its corresponding type declarations."

I've been looking around for answers and concluded that vite has no idea what to do with .glb. And i think needs instructions on what to do. Docs say that adding to the vite-env.d.ts should resolve the issue.

i have tried

declare module '*.glb'
declare module '**/*.glb'
// and tried 
export default defineConfig({
  assetsInclude: ['**/*.glb']
})

All without results. I think glb and gltf are unknown types for vite. See

Most of the material i can find online is talking about Three.js and their GLTF-loader plugin but i'm using google-modelviewer . and can't seem to figure out if these will play together. I hope someone knows of a way to get this to work.

• javascript
• svelte
• vite
• gltf

Share Improve this question Follow asked Nov 11, 2022 at 16:58 Coregod360Coregod360 3111 silver badge22 bronze badges 1

• 1 I assume you've found vitejs.dev/guide/assets.html#static-asset-handling ? I think using assetsInclude is along the right lines here. Another option would be to mark the "assets" as the public directory (described later on that page) and then write the URL explicitly rather than as an import. – Don McCurdy Commented Nov 11, 2022 at 17:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

It depends on what you need from the import. If the model viewer expects a file path to the model file, this is fairly simple to do, otherwise you have to implement a plugin for loading the model differently.

For the file path approach to work, you just need to set the assetsInclude to ['**/*.glb'] as shown (in the Vite config) and add the type declaration which should look like this:

declare module '*.glb' {
    const src: string
    export default src
}

This just states that in an import model from './something.glb' the type of model will be a string (the path to the static file).

The type declaration is only necessary for type checking via TypeScript.

---

If you do not mind changing the import statements, you can also use explicit URL imports, then nothing else needs to be changed. Just add ?url to the import path; types for that should already be defined by Vite itself.

I have an answer: If you create a webGL three.js website, you should place the resource files .gltf, .glb etc. in the Public directory.

Node:

node -v
v20.18.1
npm -v
10.8.2

Create project:

npm create vite@latest mynameProjectGame -- --template vanilla-ts
npm install @types/three three
npm install
npm run dev 

1. Install three version

"dependencies": {
    "@types/three": "^0.171.0",
    "three": "^0.171.0"
}

2. Edit file typescript.json

"types": ["vite","three"]

enter image description here