@threlte/extras

<TransformControls>

This component can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender. Unlike other controls, it is not intended to transform the scenes camera.

The component <TransformControls> needs to be the parent of the component to be transformed.

To accommodate <OrbitControls> as well as a <TransformControls> component in the same scene, the <TransformControls> component is able automatically pause the currently active <OrbitControls> component when the user is interacting with the <TransformControls> component. You can opt out of this behaviour by setting the property autoPauseOrbitControls to false.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <Scene />
</Canvas>

<script lang="ts">
  import { T } from '@threlte/core'
  import { OrbitControls, TransformControls } from '@threlte/extras'
  import { BoxGeometry, MeshStandardMaterial } from 'three'
</script>

<T.PerspectiveCamera
  makeDefault
  position={[10, 5, 10]}
  lookAt.y={0.5}
>
  <OrbitControls />
</T.PerspectiveCamera>

<T.DirectionalLight
  position.y={10}
  position.z={10}
/>
<T.AmbientLight
intensity={0.3}
/>

<T.GridHelper args={[10, 10]} />

<TransformControls
  translationSnap={1}
  position.y={1}
>
  <T.Mesh
    geometry={new BoxGeometry(2, 2, 2)}
    material={new MeshStandardMaterial()}
  />
</TransformControls>

Examples

<script>
  import { T } from '@threlte/core'
  import { TransformControls } from '@threlte/extras'
  import { MeshStandardMaterial, BoxBufferGeometry } from 'three'
</script>

<TransformControls>
  <T.Mesh
    geometry={new BoxBufferGeometry(1, 1, 1)}
    material={new MeshStandardMaterial()}
  />
</TransformControls>

The <TransformControls> component can also be used to transform an object passed to it:

<script>
  import { T } from '@threlte/core'
  import { TransformControls } from '@threlte/extras'
  import { MeshStandardMaterial, BoxBufferGeometry } from 'three'
</script>

<T.Mesh
  geometry={new BoxBufferGeometry(1, 1, 1)}
  material={new MeshStandardMaterial()}
  let:ref
>
  <TransformControls object={ref} />
</T.Mesh>

<TransformControls object={someObject} />