似乎无法使用 vite 在 svelte 中导入 .glb / .gltf

Question

我似乎无法导入 .glb 或 .gltf 文件。

<script>
    import HallucinateForm from "../components/HallucinateForm.svelte";
    import ModelViewer from "../components/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>

给我以下错误。

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

我一直在寻找答案并得出结论，vite 不知道如何处理 .glb。我认为需要有关做什么的指示。文档说添加到vite-env.d.ts应该可以解决问题。

我努力了

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

皆无结果。我认为 glb 和 gltf 对于 vite 来说是未知的类型。看

我可以在网上找到的大部分材料都在谈论 Three.js 及其 GLTF-loader 插件，但我正在使用google-modelviewer。似乎无法弄清楚这些是否可以一起发挥作用。我希望有人知道一种方法来让它发挥作用。

Answer 1

这取决于您需要进口什么。如果模型查看器需要模型文件的文件路径，那么这很简单，否则您必须实现一个插件来以不同的方式加载模型。

要使文件路径方法发挥作用，您只需按所示assetsInclude设置['**/*.glb']（在 Vite 配置中）并添加类型声明，如下所示：

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

这只是表明在 an 中，import model from './something.glb'的类型model将是 a string（静态文件的路径）。

仅当通过 TypeScript 进行类型检查时才需要类型声明。

如果您不介意更改 import 语句，也可以使用显式 URL 导入，则无需更改其他内容。只需添加?url到导入路径即可；其类型应该已经由 Vite 本身定义。