纹理切换函数仅生效一次问题排查

我帮你排查了这个问题，核心原因是初始的山脉纹理没有被持久保存引用——当你切换到城市纹理后，原来的山脉纹理对象就丢失了，点击山脉按钮时无法正确恢复。

具体修复步骤： #

1. 提前保存两种纹理的全局引用：把山脉和城市的CubeTexture都存为全局变量，这样切换时可以直接复用已加载好的纹理，不用重复加载，也不会丢失引用。
2. 修改按钮点击逻辑：让两个按钮分别将场景背景设置为对应的预存纹理。

修改后的关键代码： #

首先，在代码开头定义全局变量存储纹理：

// 全局存储两种天空盒纹理
let mountainTextures;
let cityTextures;

然后，把纹理加载逻辑封装成函数，同时保存引用：

// 加载山脉纹理并保存
function loadMountainSkybox() {
  const loader = new THREE.CubeTextureLoader();
  loader.setPath('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/cube/skybox/');
  mountainTextures = loader.load([
    'px.jpg', 'nx.jpg',
    'py.jpg', 'ny.jpg',
    'pz.jpg', 'nz.jpg'
  ]);
  return mountainTextures;
}

// 加载城市纹理并保存
function loadCitySkybox() {
  const loader = new THREE.CubeTextureLoader();
  loader.setPath('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/cube/Bridge2/');
  cityTextures = loader.load([
    'posx.jpg', 'negx.jpg',
    'posy.jpg', 'negy.jpg',
    'posz.jpg', 'negz.jpg'
  ]);
  return cityTextures;
}

初始化场景时使用山脉纹理：

const scene = new THREE.Scene();
// 初始设置为山脉天空盒
scene.background = loadMountainSkybox();

最后修改按钮的点击事件：

// 山脉按钮点击事件
document.querySelector('#mountainBtn').addEventListener('click', () => {
  scene.background = mountainTextures;
});

// 城市按钮点击事件
document.querySelector('#cityBtn').addEventListener('click', () => {
  // 城市纹理未加载时先加载
  if (!cityTextures) {
    cityTextures = loadCitySkybox();
  }
  scene.background = cityTextures;
});

这样修改后，点击两个按钮就能自由切换天空盒纹理了——因为两种纹理都被持久保存，切换时只是直接替换场景背景的纹理引用，不会出现丢失初始纹理的问题。

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