1、当使用three156版本时，在js中自定义某个类继承 THREE.BufferGeometry 会出现TypeError: Class constructor BufferGeometry cannot be invoked without 'new'
2、如果将three.js的版本改为167时，会出现 ERROR Failed to compile with 1 errors 18:54:20 error in ./node_modules/three/build/three.module.js Module parse failed: Unexpected token (34163:58) You may need an appropriate loader to handle this file type.
这个问题应该怎样解决？
期望提升three的版本之后不要报错且可正常运行
AI BotBETA问题原因分析：
极客观点
项目管理
HarmonyOS
.module.js)可能包含现代语法，未被 Webpack/Babel 正确处理。解决方案：两步同步操作
步骤一：代码层修复（解决继承错误）
// 旧写法（原型继承）会报错 ❌
function CustomGeometry() {
THREE.BufferGeometry.call(this);
}
CustomGeometry.prototype = Object.create(THREE.BufferGeometry.prototype);
// 新写法（ES6 类继承）✅
class CustomGeometry extends THREE.BufferGeometry {
constructor() {
super();
// 你的初始化代码
}
}步骤二：构建工具配置（以 Webpack 为例）
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
// 关键排除项 ↓
exclude: /node_modules\/(?!(three)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}配套依赖升级：
npm install --save-dev webpack@5 babel-loader@9 @babel/core@7 @babel/preset-env@7验证方案：
确保 three 版本在 package.json 中准确指定：
"dependencies": {
"three": "^0.167.0"
}备选方案： 若仍存在问题，可尝试直接引入 UMD 版本：
import * as THREE from 'three/build/three'; // 代替 three.module.js1 回答920 阅读✓ 已解决
1.6k 阅读
1.2k 阅读