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

<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

Prop	Description	Default
makeDefault	If true, the controls will be set as the default controls for the scene.	false
camera	The camera to control.	undefined
domElement	The dom element to listen to.	undefined