引入GLTFLoader时出现function not defined错误求助

核心原因 #

一旦在JS文件中使用import/export语法，该文件会被浏览器识别为ES模块，模块拥有独立的作用域——模块内定义的变量、函数默认不会暴露到全局作用域。你之前的代码依赖全局的soupbowl对象调用方法，转为模块后，外部无法直接访问模块内的soupbowl，因此出现"function not defined"错误。

分步解决 #

1. 声明脚本为模块 #

在HTML中引入你的JS文件时，必须添加type="module"属性，否则浏览器会将其当作普通脚本处理，无法识别import语法：

<script type="module" src="你的脚本文件名.js"></script>

2. 暴露全局可访问的对象 #

模块内的soupbowl默认仅在模块内部可见，需要手动挂载到window对象，让外部能调用它的方法：
修改你的代码，在末尾添加：

window.soupbowl = soupbowl;

3. 确保依赖函数已定义 #

检查soupbowl.createPlate()函数是否在模块内正确定义（你的代码片段里没展示这个函数的实现），如果未定义，也会导致调用报错。示例补全：

// 补全createPlate函数定义
soupbowl.createPlate = function() {
  // 这里写你的盘子绘制逻辑
  ctx.beginPath();
  ctx.arc(300, 300, 250, 0, Math.PI * 2);
  ctx.fillStyle = "#fff";
  ctx.fill();
  ctx.strokeStyle = "#ccc";
  ctx.lineWidth = 5;
  ctx.stroke();
};

修改后的完整代码示例 #

import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";

var soupbowl = soupbowl || {};

// 补全createPlate函数
soupbowl.createPlate = function() {
  ctx.beginPath();
  ctx.arc(300, 300, 250, 0, Math.PI * 2);
  ctx.fillStyle = "#fff";
  ctx.fill();
  ctx.strokeStyle = "#ccc";
  ctx.lineWidth = 5;
  ctx.stroke();
};

soupbowl.twod = function() {
  var canvasDiv = document.getElementById('soupcanvas');
  canvas = document.createElement('canvas');

  canvas.setAttribute('width', 600);
  canvas.setAttribute('height', 600);
  canvas.setAttribute('id', 'canvas');
  canvasDiv.appendChild(canvas);

  if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  ctx = canvas.getContext("2d");
  soupbowl.createPlate();
};

// 挂载到全局window
window.soupbowl = soupbowl;

额外提醒 #

• ES模块是异步加载的，若你在模态框打开时调用soupbowl.twod()，确保脚本已加载完成（可通过DOMContentLoaded事件触发初始化，或在模块内部监听模态框打开事件）。
• 尽量避免全局挂载，后续熟悉模块机制后，可通过export导出soupbowl，在需要调用的地方用import引入，这是更规范的模块用法。

内容的提问来源于stack exchange，提问作者sn.904