如何通过编程实现类似按下Escape键的Viewer状态重置功能

核心思路 #

直接复用Escape键绑定的重置逻辑，给按钮添加点击事件调用该逻辑即可，步骤如下：

• 1. 定位原重置函数
  先找到代码中绑定Escape键的重置逻辑，通常是类似这样的代码：

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      resetViewer(); // 这就是重置Viewer的核心函数
    }
  });
  

  记下这个resetViewer()函数，它就是实现重置的关键。

• 2. 添加页面按钮
  在HTML中插入一个用于重置的按钮：

  <button id="viewerResetBtn">重置Viewer</button>
  

• 3. 绑定按钮点击事件
  在JavaScript中给按钮添加点击监听，调用重置函数：

  const resetButton = document.getElementById('viewerResetBtn');
  resetButton.addEventListener('click', () => {
    resetViewer(); // 触发和Escape键一样的重置逻辑
  });
  

若没有现成重置函数的情况 #

如果项目中没有封装好的resetViewer()，你需要手动实现重置逻辑，以常见的3D Viewer（比如Three.js）为例：

function resetViewer() {
  // 重置相机视角
  camera.position.set(0, 2, 5);
  camera.lookAt(0, 0, 0);
  // 清除选中状态（如果有）
  if (selectedMesh) {
    selectedMesh.material.emissive.set(0x000000);
    selectedMesh = null;
  }
  // 更新渲染
  renderer.render(scene, camera);
}

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