vite 无法正确导入 *.gltf

[YBFACC]

可见 https://cn.vitejs.dev/guide/assets.html

主要的 2 种方式

1. assetsInclude
2. 使用 ?url 后缀显式导入为一个 URL

[YBFACC]

另外可能的问题：

1. 将资源文件放入 vite 的静态资源（publicDir 配置），gltf 的配套文件需要保持相对文件固定
2. (data:model/gltf+json;base64......) 内联方式导致引入错误，这里需要单独的文件：build.assetsInlineLimit 来配置

[YBFACC]

方法 3

使用 gltf 插件来处理 https://github.com/nytimes/rd-bundler-3d-plugins/tree/main

[YBFACC]

方法 3

使用 gltf 插件来处理 https://github.com/nytimes/rd-bundler-3d-plugins/tree/main

下载

由于这个包要使用 sharp，国内服务器 npm 下载可能会报错 可以主动配置 .npmrc 配置下载路径

sharp_binary_host=https://npmmirror.com/mirrors/sharp
sharp_libvips_binary_host=https://npmmirror.com/mirrors/sharp-libvips

示例

注意 这里使用 draco 会导致模型的加载器变更，会报错 textureCompress 能压缩材质。原来 18MB， 压缩完 5.9MB

import gltf from "vite-plugin-gltf"
import { draco, textureCompress } from "@gltf-transform/functions";
import sharp from 'sharp';

export default {
    plugins: [
        gltf({
            transforms: [
                textureCompress({ encoder: sharp, resize: [2048, 2048] }),
                // draco()
            ],
        }),
    ],
}