html5视角调整分三层：css transform适用于dom元素2d变换；three.js orbitcontrols实现真3d相机控制；canvas 2d需手动维护变换矩阵并处理坐标映射。
用 transform 实现 2D 视角调整（平移/缩放/旋转）
HTML5 本身不提供“建模”能力，所谓“HTML5 建模”通常指在 <canvas></canvas> 上用 JavaScript 手动绘制 2D/3D 图形，或使用 WebGL（如 Three.js）做真正三维建模。纯 HTML/CSS 场景下，若目标是让某个 <div> 或 <code><canvas></canvas> 容器模拟视角操作，transform 是最直接、兼容性最好的方式。
关键点：所有变换必须作用于同一个元素的 transform 属性，且顺序敏感——浏览器按「从右到左」解析函数链，即 transform: translate(10px) rotate(45deg) scale(1.2) 实际先缩放、再旋转、最后平移。
- 缩放中心默认是元素左上角，加
transform-origin: center改为几何中心 - 旋转单位必须是
deg、rad或turn，写rotate(45)会失效 - 多个变换合并时，避免用空格分隔函数名（如
translate(10px)rotate(45deg)），应保留空格但不要漏括号
div#model-view {
transform: translate(20px, -10px) rotate(15deg) scale(0.9);
transform-origin: center;
}Three.js 中控制相机视角（orbitControls 最常用）
真三维建模离不开 Three.js，而视角操作本质是对 camera 的位置、朝向、投影参数调整。手动写 camera.position.set() + camera.lookAt() 虽然可控，但交互体验差；生产环境几乎都用 OrbitControls。
注意：OrbitControls 不是 Three.js 核心模块，需单独引入，且必须在渲染循环中调用 controls.update()，否则拖拽/滚轮无响应。
立即学习“前端免费学习笔记（深入）”；
- 鼠标左键拖拽 = 绕目标点旋转（yaw/pitch）
- 右键拖拽 = 平移整个场景（pan）
- 滚轮 = 缩放（dolly），实际改变的是相机与目标距离
- 默认目标点是
new THREE.Vector3(0, 0, 0)，用controls.target.set(x, y, z)可修改
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
<p>const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼，避免惯性过强
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false; // 保持 Y 轴始终向上
controls.minDistance = 1;
controls.maxDistance = 100;</p><p>// 渲染循环内必须调用
function animate() {
requestAnimationFrame(animate);
controls.update(); // ⚠️ 忘记这行就无法交互
renderer.render(scene, camera);
}Canvas 2D 手动实现变换矩阵（适用于自定义绘图引擎）
如果你在 <canvas></canvas> 上用 ctx 手动画图，并希望支持用户缩放/旋转画布内容（比如简易 CAD 工具），不能依赖 CSS transform，因为那只会缩放整个 canvas 元素，导致像素模糊。正确做法是在每次 draw() 前，用 ctx.setTransform() 重置并应用复合矩阵。
核心逻辑：维护一个全局 viewMatrix（3×3 仿射变换矩阵），每次平移/缩放/旋转都左乘对应矩阵，最后传给 ctx.transform() 或 ctx.setTransform()。
-
ctx.setTransform(a,b,c,d,e,f)直接替换当前变换，适合从头设置 -
ctx.transform(a,b,c,d,e,f)是在当前变换基础上叠加，易累积误差 - 缩放时，若想以鼠标位置为锚点，需先
translate(-x,-y)，再scale(s)，再translate(x,y) - Canvas 坐标系 Y 轴向下，旋转正方向是顺时针，和数学习惯相反
// 简化示例：以 canvas 中心为原点缩放 const centerX = canvas.width / 2; const centerY = canvas.height / 2; ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置 ctx.translate(centerX, centerY); ctx.scale(1.2, 1.2); ctx.translate(-centerX, -centerY);
常见失控问题：为什么缩放后鼠标位置对不上？
这是所有基于变换的交互系统中最容易忽略的一环：DOM 元素或 Canvas 的屏幕坐标，和内部世界坐标的映射关系，会随 transform 或 camera 变化而失效。不重新计算，点击/拖拽必然偏移。
Three.js 下用 raycaster + camera 投影反算；Canvas 2D 下需手动将鼠标 clientX/clientY 减去 canvas 偏移，再乘逆矩阵；CSS transform 场景则要读取 getComputedStyle(el).transform 解析矩阵并求逆。
- Three.js 中别直接用
event.clientX去算位置，必须走mouse.x = (event.clientX / window.innerWidth) * 2 - 1归一化流程 - Canvas 若用了
devicePixelRatio高清适配，getBoundingClientRect()返回的尺寸和canvas.width/height不等，必须换算 - CSS 缩放后，
offsetLeft/Top仍返回原始值，不能用于定位
视角操作不是独立功能，它和坐标映射、事件处理、渲染节奏强耦合。越早把逆变换逻辑写进基础类，后期越不容易推倒重来。
