Rails集成Three.js导入GLB文件报错 求简易解决方案

问题重现 #

在Rails项目中整合Three.js时，其他功能正常，但通过ES模块导入GLB模型时触发webpack解析错误：

Uncaught Error: Module parse failed: Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

已尝试将.glb加入静态资产扩展配置，但问题未解决。

极简解决方案（无需配置webpack loader） #

直接绕开webpack的模块解析，通过静态文件路径加载GLB：

1. 移动模型文件：把model1.glb放到项目根目录的public/models/文件夹下（没有models文件夹就新建一个）
2. 修改JS代码：删除导入语句，直接使用public目录下的绝对路径加载：

// 删掉这行：import modelGlb from '../models/model1.glb'

gltfLoader.load(
    '/models/model1.glb',
    (gltf) => {
        gltf.scene.scale.set(0.3, 0.3, 0.3)
        gltf.scene.position.set(0, 10, 0)
        gltf.scene.rotation.y = Math.PI * 0.5
        scene.add(gltf.scene)

        updateAllMaterials()
        // gui.add(gltf.scene.rotation, 'y', -Math.PI, Math.PI, 0.001).name("rotation")
    }
)

原理说明 #

Rails的public目录下的文件会直接作为静态资源对外提供访问，无需经过webpack编译。这种方式完全避开了webpack对二进制文件的解析需求，是最快速解决问题的方案。

内容的提问来源于stack exchange，提问作者Rztprog