HTML5本身不支持3D建模与渲染，需依赖WebGL及Three.js等库实现多视角切换；核心是通过预设相机位置、目标点和上方向来切换视角，避免直接修改rotation以防死锁，并需禁用OrbitControls以防止干扰。
HTML5 本身不提供建模或三维渲染能力，所谓“HTML5 建模”实际依赖 WebGL（通过 Three.js、Babylon.js 等库）在浏览器中渲染 3D 模型。多视角切换不是 HTML5 的功能，而是三维引擎对相机（camera）和场景（scene）的控制结果。
用 Three.js 实现预设角度切换（如俯视/侧视/等轴测）
核心是替换或更新 camera.position 和 camera.lookAt()，再调用 renderer.render()。不要直接修改 camera.rotation —— 容易导致万向节死锁且难以复位。
- 定义多个视角配置对象，包含
position、target（目标点）、up（上方向） - 每次切换时重置
camera.position，调用camera.lookAt(target)，再手动设置camera.up = up - 配合
controls.update()（如OrbitControls）时，需先controls.enabled = false，否则会干扰手动定位
const views = {
front: { pos: [0, 0, 5], target: [0, 0, 0], up: [0, 1, 0] },
top: { pos: [0, 5, 0], target: [0, 0, 0], up: [0, 0, 1] },
iso: { pos: [3, 3, 3], target: [0, 0, 0], up: [0, 1, 0] }
};
function switchView(name) {
const v = views[name];
camera.position.set(...v.pos);
camera.lookAt(...v.target);
camera.up.set(...v.up);
camera.updateProjectionMatrix();
controls.enabled = false; // 防止 OrbitControls 覆盖位置
}
支持鼠标拖拽 + 键盘快捷键（如 Ctrl+1 切前视图）
纯鼠标操作（如 OrbitControls）默认允许自由旋转，但无法精确回到标准视角。需要把键盘事件与视角复位逻辑绑定，并避免与控件冲突。
- 监听
keydown，判断event.ctrlKey && event.key === '1'等组合 - 触发视角切换前，先调用
controls.reset()（如果支持），或手动重置camera并调用controls.saveState()后再controls.reset() - 注意：某些控件（如
TransformControls）会接管 raycasting，需确保视角切换时不处于编辑模式
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key >= '1' && e.key <= '4') {
const idx = parseInt(e.key) - 1;
const names = ['front', 'top', 'right', 'iso'];
if (names[idx]) switchView(names[idx]);
}
});加载 glTF 模型后自动适配视角范围（避免模型被切或太小）
模型尺寸未知，硬编码 camera.position = [0,0,5] 往往失效。必须根据模型包围盒（Box3）动态计算合适距离和目标点。
立即学习“前端免费学习笔记（深入）”；
- 加载完成回调中调用
model.traverse()收集所有Mesh，用Box3.setFromObject()获取整体范围 - 计算中心点
center和尺寸size，设定camera.position距离中心点约size.length() * 1.5 - 调用
camera.lookAt(center)，并调整camera.far为size.length() * 10防止裁剪
const box = new THREE.Box3().setFromObject(model); const center = box.getCenter(new THREE.Vector3()); const size = box.getSize(new THREE.Vector3()); camera.position.set(center.x, center.y, center.z + size.length() * 1.5); camera.lookAt(center); camera.far = size.length() * 10; camera.updateProjectionMatrix();
真正难的不是切换动作本身，而是视角状态管理：比如用户拖拽后按“复位”，该恢复到初始位置，还是上次保存的预设？是否要记录当前控件的 target 和 distance？这些细节不处理好，多视角就变成“看起来能切，但切完就乱”。
