three js 点击按钮实现切换场景和模型

要实现在Three.js中点击按钮切换场景和模型，可以使用以下步骤：

1. 创建一个按钮元素，并使用JavaScript绑定一个点击事件。

<button id="switchButton">Switch Scene</button>

const switchButton = document.getElementById('switchButton');
switchButton.addEventListener('click', switchScene);

2. 创建多个场景和模型，并将它们存储在一个数组中。

const scenes = [
  new THREE.Scene(),
  new THREE.Scene(),
  new THREE.Scene(),
];

const models = [
  // load models here
];

3. 创建一个变量来存储当前场景和模型的索引。

let currentSceneIndex = 0;
let currentModelIndex = 0;

4. 创建一个函数来切换场景和模型。在该函数中，更新当前场景和模型的索引，并将当前场景的所有子元素从场景中删除。然后，将新场景的子元素添加到场景中，并将当前模型添加到新场景中。

function switchScene() {
  // increment current scene index
  currentSceneIndex = (currentSceneIndex + 1) % scenes.length;

  // increment current model index
  currentModelIndex = (currentModelIndex + 1) % models.length;

  // remove all children from current scene
  while (scenes[currentSceneIndex].children.length) {
    scenes[currentSceneIndex].remove(scenes[currentSceneIndex].children[0]);
  }

  // add current model to new scene
  scenes[currentSceneIndex].add(models[currentModelIndex]);
}

5. 在渲染循环中，将当前场景渲染到画布中。

function render() {
  requestAnimationFrame(render);
  renderer.render(scenes[currentSceneIndex], camera);
}

这样，当用户点击按钮时，将会切换场景和模型，并将新场景渲染到画布中。注意，此示例假设你已经创建了Three.js场景、渲染器、相机和模型。