MapControls 是 Three.js 库中的一个控制器，用于 3D 场景中类似地图导航的交互方式，允许用户平移、缩放和旋转视角。它非常适合在三维场景中实现自由浏览，类似 Google 地图中的操作体验。
MapControls 继承自 OrbitControls，因此它有一些相同的功能，但专注于地图的交互需求。你可以通过鼠标或触控板实现平移（按下右键拖动）、缩放（滚动滚轮）、以及围绕目标的旋转（按下左键拖动）
MapControls 有三个属性
MapControls( object : Camera, domElement : HTMLDOMElement ) object：（必填）要控制的相机。相机不能是另一个对象的子对象，除非该对象是场景本身。 domElement： 用于事件侦听器的 HTML 元素。
- mouseButtons : Object
mouseButtons是MapControls和OrbitControls中的一个配置对象，用于自定义鼠标操作方式。通过这个属性，你可以设置不同的鼠标按钮（如左键、右键、中键）的操作行为，比如将某个按钮用于平移、旋转或缩放。
// 创建一个立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // 将立方体添加到场景中
// 添加环境光源
const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // 方向光
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
// 初始化 MapControls 控制器
const controls = new MapControls(camera, renderer.domElement);
controls.enableDamping = true; // 开启阻尼效果
controls.dampingFactor = 0.05; // 设置阻尼系数
controls.screenSpacePanning = false; // 禁用屏幕空间平移
controls.maxPolarAngle = Math.PI / 2; // 限制垂直旋转角度
// 自定义鼠标按钮行为
controls.mouseButtons = {
LEFT: THREE.MOUSE.PAN, // 左键平移
MIDDLE: THREE.MOUSE.DOLLY, // 中键缩放
RIGHT: THREE.MOUSE.ROTATE // 右键旋转
};
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
- screenSpacePanning : Boolean 定义平移时摄像机位置的平移方式。如果为 true，相机将在屏幕空间中平移。否则，摄像机将在与摄像机向上方向正交的平面中平移。默认为 false。
screenSpacePanning 设置为 true 时：平移操作在屏幕的坐标系内执行，意味着平移仅沿屏幕的 X 和 Y 轴移动，不受相机的角度影响。无论相机的角度如何，平移始终是水平和垂直的。这种模式通常在地图或俯视图应用中较为适用。
当 screenSpacePanning 设置为 false 时（默认值）：平移操作会基于相机的本地坐标系执行。相机的移动方向与其角度相匹配，前后移动会平行于相机的视角平面。
screenSpacePanning: true：适合地图浏览、2D 平面展示等应用，平移不受相机旋转影响。
screenSpacePanning: false：适合三维模型查看等应用，用户在旋转相机后能沿视角方向平移，更贴合三维交互需求。
- touches : Object touches 是 MapControls 和 OrbitControls 控制器中的一个配置对象，用于自定义触摸屏操作的手势行为。它允许你定义不同触摸手势（如单指、双指）的具体操作方式，比如旋转、缩放或平移。
THREE.TOUCH 提供了一些常量，可以用于配置 touches 的手势操作：
THREE.TOUCH.ROTATE：旋转视角
THREE.TOUCH.PAN：平移视角
THREE.TOUCH.DOLLY：缩放视角
THREE.TOUCH.DOLLY_PAN：双指触摸时同时缩放和平移
适用场景
单指操作：在移动设备上，单指触摸通常用于旋转或平移视角。
双指操作：双指触摸通常用于缩放场景或在三维视角中调整视野。
// 创建 MapControls 控制器
const controls = new MapControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = true;
controls.maxPolarAngle = Math.PI / 2;
// 自定义触摸手势
controls.touches = {
ONE: THREE.TOUCH.ROTATE, // 单指用于旋转
TWO: THREE.TOUCH.DOLLY_PAN // 双指用于缩放和平移
};
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
