Skip to content

MapControls

MapControls similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default.

However, as it is not part of the core of ThreeJS, to use it you would need to import it from the three/examples/jsm/controls/MapControls module.

Here is where the fancy part begins. ✨ The cientos package provides a component called <MapControls />, which is a wrapper of the MapControls from the three-stdlib module.

The nicest part? You don't need to extend the catalog or pass any arguments. It just works. 💯

Usage

vue
<script setup lang="ts">
import { MapControls, Sphere } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <MapControls />
    <TresGridHelper />
    <Sphere :scale="0.5">
      <TresMeshNormalMaterial />
    </Sphere>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

WARNING

Is really important that the Perspective camera is set first in the canvas. Otherwise might break.

Props

PropDescriptionDefault
makeDefaultIf true, the controls will be set as the default controls for the scene.false
cameraThe camera to control.undefined
domElementThe dom element to listen to.undefined