PointerLock Controls

Allows you to capture the mouse movement and simulate a first person camera

PointerLockControls is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.

This control uses the Pointer Lock API, the same rules are applied, for example, you need to interact with the browser to "lock" or start the event. In addition, you need to wait 1 second between canceling and re-starting the event

Usage

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

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <Box :position-y="0.5" />
    <PointerLockControls />
    <TresGridHelper />
  </TresCanvas>
</template>

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`
selector	Accept an id element as string, if it is set, the new element will be used as the trigger	`undefined`

Events

<PointerLockControls @change="onChange" @is-lock="(state) => isActive(state)" />

Event	Description
isLock	Return `true` if "lock", `false` if "unlock" events are trigger.
change	Dispatched when the control changes.

Orbit Controls

Allows you to orbit around the scene

Transform Controls

Set of three gizmos that can be used to translate, rotate and scale objects