Chapter 311: MapControls

Core Idea

This class is intended for transforming a camera over a map from bird's eye perspective. The class shares its implementation with OrbitControls but uses a specific preset for mouse/touch interaction and disables screen space panning by default.

• Orbit: Right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate.
• Zoom: Middle mouse, or mousewheel / touch: two-finger spread or squish.
• Pan: Left mouse, or arrow keys / touch: one-finger move.

Key Concepts

• mouseButtons : Object: This object contains references to the mouse actions used by the controls.
• screenSpacePanning : boolean: Overwritten and set to false to pan orthogonal to world-space direction camera.up.
• touches : Object: This object contains references to the touch actions used by the controls.

Code Examples

import { MapControls } from 'three/addons/controls/MapControls.js';

• What it demonstrates: Typical usage of MapControls.

Reference Tables

Constructor

Signature
new MapControls()

Properties

Property	Description
.mouseButtons : Object	This object contains references to the mouse actions used by the controls.
.screenSpacePanning : boolean	Overwritten and set to false to pan orthogonal to world-space direction camera.up.
.touches : Object	This object contains references to the touch actions used by the controls.

Key Takeaways

1. MapControls extends: EventDispatcher → Controls → OrbitControls
2. Most relevant properties: mouseButtons, screenSpacePanning, touches.

Connects To

• EventDispatcher: parent class
• Controls: parent class
• OrbitControls: parent class
• Source: examples/jsm/controls/MapControls.js