使用Trois.js搭建Vue+Three.js项目提示TextGeometry等依赖未找到

根因 #

你使用的@vue/cli-service@4.5.x底层基于Webpack 4构建，Webpack 4默认不会处理node_modules依赖包内带.js后缀的ESM模块导入路径，而troisjs@0.3.3内部直接使用了带.js后缀的three examples模块导入语句，因此触发依赖找不到的报错，和你本地three包是否存在对应文件无关。
你当前安装的three@0.127.0与troisjs@0.3.3版本完全兼容，不存在版本不匹配问题。

修复方案 #

方案1（优先使用） #

在项目根目录创建vue.config.js文件，添加如下配置，将troisjs纳入babel转译范围：

module.exports = {
  transpileDependencies: ['troisjs']
}

配置完成后重启npm run serve即可正常启动项目。

方案2（兜底方案） #

如果方案1未生效，可以在vue.config.js中添加three路径别名，强制webpack解析到正确的文件路径：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'three/examples': path.resolve(__dirname, 'node_modules/three/examples')
      }
    }
  }
}

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