当前位置: 首页 > 知识库问答 >
问题:

three.js升级版本之后出现You may need an appropriate loader to handle this file type?

邢嘉祯
2025-03-16

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的版本之后不要报错且可正常运行

共有1个答案

姜嘉赐
2025-03-16

问题原因分析:

  1. r156版本错误:Three.js 自 r125+ 开始全面转向 ES6 类语法,传统构造函数继承方式失效。
  2. r167版本错误:Three.js 的 ES Module 版本(.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

验证方案:

  1. 检查构建配置是否允许处理 three 模块
  2. 确认类继承语法已全面转为 ES6 形式
  3. 确保 three 版本在 package.json 中准确指定:

    "dependencies": {
      "three": "^0.167.0"
    }

备选方案: 若仍存在问题,可尝试直接引入 UMD 版本:

import * as THREE from 'three/build/three'; // 代替 three.module.js
 类似资料:
  • 0.2.X

  • 从 0.8.x, 0.9.x, 0.10.0.x, 0.10.1.x, 0.10.2.x, 0.11.0.x 升级到1.0.0 Kafka 1.0.0 介绍了通信协议方面的改变。 遵循下面的滚动升级计划,可以保证您在升级过程中不用停机。 在升级之前,请先查看1.0.0版本中显著的变化。 滚动升级计划: 更新所有代理上的server.properties 并添加以下属性: CURRENT_KAFKA

  • 无非就3个原因吧 为了fix bug 为了新特性 为了爱,就是要追新 从1.a.38开始的版本,升级到最新版的成本都不大. 做到100%兼容是不现实的,但可以肯定的是, 遇到的问题的均有解决的办法. 有些兼容性问题,属于"错误"得到修正,老版本能这样写是"bug", ^_^ 这是一个汇总帖子,随时更新, 也会按版本的增长继续增长.... 请先浏览当前版本到最新版的发行注记,然后再看本列表 IE下a

  • 我的grails应用程序在生产中使用h2嵌入式数据库,最近我决定将其从grails 2.3升级到2.4。在开发模式下运行良好,但在部署到tomcat后,我提到了一些问题,例如,用户计数有问题,ApplicationContext无法用getBean加载我的服务等。我检查了日志,发现了以下错误: org.springframework.beans.factory。BeanCreationExcept

  • 我试图将struts版本从2.3.35升级到2.5.17,但是遇到了如下问题: 我一直在使用本指南迁移到strut版本2.5.17:https://cwiki.apache.org/confluence/display/WW/Struts2.3到2.5迁移 我怀疑这是瓷砖的问题。 我已将所有与struts2-ties-plugin相关的jar升级到2.5.17版,包括struts2-ties-pl

  • MinDoc 根据发布系统功能不同可分为两步进行升级。有些用户可能会自定义了模板,覆盖时请注意备份。尤其是要注意备份配置文件和数据库。 版本查看 通过命令行执行如下命令: ./mindoc version 会看到如下的版本信息: #当前安装的版本版本号 MinDoc current version => v1.0 #最新版本版本号 MinDoc last version => v1.0 一、覆

  • 我已将springfox升级到2.7.0版(和2.9.2): 并尝试启动应用程序,我收到下一个错误: 组织。springframework。豆。工厂未满足的依赖异常:创建名为“documentationPluginsBootstrapper”的bean时出错,该bean在URL[jar:file:..jar!/lib/springfox-spring-web-2.7.0.jar!/springfo

  • 从Hazelcast Enterprise 3.8开始,下一次发布的每个次要版本都将与上一个版本兼容。例如,无论何时发布,都可以在运行Hazelcast Enterprise 3.8到Hazelcast Enterprise 3.9的集群上执行滚动升级。 将来是否有计划支持非后续次要版本之间的滚动升级? 例如从3.8到3.11?