diff --git a/docs/examples/en/controls/MapControls.html b/docs/examples/en/controls/MapControls.html new file mode 100644 index 00000000000000..447dda488219be --- /dev/null +++ b/docs/examples/en/controls/MapControls.html @@ -0,0 +1,119 @@ + + +
+ ++ [name] is intended for transforming a camera over a map from bird's eye perspective. + The class shares its implementation with [page:OrbitControls] but uses a specific preset for mouse/touch interaction and disables screen space panning by default. +
+ ++ [name] is an add-on, and must be imported explicitly. + See [link:#manual/introduction/Installation Installation / Addons]. +
+ +
+ import { MapControls } from 'three/addons/controls/MapControls.js';
+
+
+
+ const renderer = new THREE.WebGLRenderer();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ document.body.appendChild( renderer.domElement );
+
+ const scene = new THREE.Scene();
+
+ const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+ camera.position.set( 0, 20, 100 );
+
+ const controls = new MapControls( camera, renderer.domElement );
+ controls.enableDamping = true;
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ // required if controls.enableDamping or controls.autoRotate are set to true
+ controls.update();
+
+ renderer.render( scene, camera );
+
+ }
+
+
+ [example:misc_controls_map misc / controls / map ]
+ +
+ [page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.
+
+ [page:HTMLDOMElement domElement]: The HTML element used for event listeners.
+
See the base [page:OrbitControls] class for common events.
+ +See the base [page:OrbitControls] class for common properties.
+ +
+ This object contains references to the mouse actions used by the controls.
+
+controls.mouseButtons = {
+ LEFT: THREE.MOUSE.PAN,
+ MIDDLE: THREE.MOUSE.DOLLY,
+ RIGHT: THREE.MOUSE.ROTATE
+}
+
+
+ Defines how the camera's position is translated when panning. If true, the camera pans in screen space. + Otherwise, the camera pans in the plane orthogonal to the camera's up direction. + Default is `false`. +
+ +
+ This object contains references to the touch actions used by the controls.
+
+controls.touches = {
+ ONE: THREE.TOUCH.PAN,
+ TWO: THREE.TOUCH.DOLLY_ROTATE
+}
+
+
See the base [page:OrbitControls] class for common methods.
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/MapControls.js examples/jsm/controls/MapControls.js] +
+ + diff --git a/docs/examples/en/controls/OrbitControls.html b/docs/examples/en/controls/OrbitControls.html index a79e386d96ed8d..b8f38209c9be5e 100644 --- a/docs/examples/en/controls/OrbitControls.html +++ b/docs/examples/en/controls/OrbitControls.html @@ -238,7 +238,7 @@Defines how the camera's position is translated when panning. If true, the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction. - Default is true for OrbitControls; false for MapControls. + Default is `true`.