Three.js从HTML数据获取纹理报错：Uncaught ReferenceError: sphere is not defined

这个错误的本质很明确——你的代码尝试访问一个名为sphere的变量，但这个变量要么从未被声明，要么当前代码的作用域无法访问到它。下面是最常见的几个原因和对应的修复方案：

1. 变量未被显式声明 #

如果你直接写了类似sphere = new THREE.Mesh(...)的代码，却没有用let/const/var关键字声明它，在严格模式下（很多现代项目默认启用）浏览器会直接抛出这个错误。即使在非严格模式下，这种写法会把sphere变成全局变量，也会带来潜在的 bug。

修复方案：
在创建sphere时显式声明变量：

// 使用const（如果不需要重新赋值）或let（如果后续需要修改）
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshBasicMaterial({ map: yourTexture })
);
scene.add(sphere);

2. 作用域不匹配 #

如果sphere是在某个函数（比如异步回调、事件处理函数）内部声明的，然后你在函数外部尝试访问它，就会出现这个错误。比如你在加载图片的回调里创建了sphere，但同步代码里直接去调用它：

错误示例：

const loader = new THREE.TextureLoader();
loader.load('image.jpg', (texture) => {
  // 这个sphere只在回调函数内部可见
  const sphere = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture }));
});
// 这里访问sphere会报错，因为它不在当前作用域里
scene.add(sphere);

修复方案：
把需要访问sphere的逻辑移到变量所在的作用域内，或者将变量提升到更高的作用域：

// 先在外部声明变量
let sphere;
const loader = new THREE.TextureLoader();
loader.load('image.jpg', (texture) => {
  sphere = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture }));
  scene.add(sphere); // 这里可以正常访问
});
// 注意：如果在loader.load完成前访问sphere，它会是undefined，所以要确保异步操作完成后再使用

3. 拼写错误 #

有时候只是简单的笔误——比如你本来想声明的是spheres（复数，用来存储多个球体），结果在调用时写成了sphere，导致找不到变量。

修复方案：
全局搜索代码中所有出现sphere的地方，检查变量名的拼写是否完全一致。

4. 执行顺序问题 #

如果你的代码在sphere被创建之前就尝试访问它（比如同步代码先执行，而sphere是在异步操作完成后才创建的），也会触发这个错误。

修复方案：
确保所有依赖sphere的代码都在sphere被成功创建之后执行。比如使用async/await来处理异步加载：

async function createSphere() {
  const texture = await new Promise((resolve) => {
    const loader = new THREE.TextureLoader();
    loader.load('image.jpg', resolve);
  });
  const sphere = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture }));
  scene.add(sphere);
  // 这里可以安全使用sphere
}
createSphere();

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