Potree-Core报错THREE is not defined，如何通过package.json全局配置解决？

我来给你几个靠谱的解决方案，不用每次手动改依赖源码就能搞定这个THREE未定义的问题：

方案1：用打包工具全局注入（以Webpack为例） #

如果你的项目用Webpack打包，可以借助ProvidePlugin自动把THREE.js注入到所有模块的作用域中，让Potree-Core能直接访问到它：

• 先确保已安装依赖：

npm install three webpack webpack-cli --save-dev

• 在webpack.config.js中添加插件配置：

const webpack = require('webpack');

module.exports = {
  // 其他原有配置...
  plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three'
    })
  ]
};

这样Webpack会自动在每个模块中注入THREE的引用，Potree-Core就能正常识别这个变量了。

方案2：自定义Shim模块做中间层 #

不想改打包配置的话，可以自己写一个中间模块，先把THREE挂载到全局，再导入Potree-Core：

1. 在项目里创建src/potree-shim.js文件：

// 先导入THREE并挂载到浏览器全局对象
import * as THREE from 'three';
window.THREE = THREE;

// 导出Potree-Core的所有内容
export * from 'potree-core';

2. 在项目代码中，替换原有的potree-core导入为这个shim模块：

import { Viewer } from './potree-shim.js';
// 正常使用Potree的API即可

这个方法通过全局挂载让Potree-Core的源码能找到THREE变量，适合浏览器环境的离线应用。

方案3：用patch-package持久化补丁 #

这个方案能把你手动添加的import * as THREE from 'three'做成持久化补丁，其他人安装依赖时会自动应用修改：

1. 安装patch-package工具：

npm install patch-package --save-dev

2. 在package.json中添加postinstall脚本：

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

3. 手动修改node_modules/potree-core中需要添加import的文件（比如入口模块或用到THREE的文件），补上import * as THREE from 'three'。
4. 生成补丁文件：

npx patch-package potree-core

项目根目录会生成patches/potree-core+[对应版本号].patch文件，把这个文件提交到代码仓库。
5. 其他人克隆项目后执行npm install，postinstall脚本会自动应用补丁，无需手动修改依赖源码。

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