1. @threlte/core
  2. TransformableObject

@threlte/core

TransformableObject

Provides reactive access to the basic transforms (position, rotation, scale) of a THREE.Object3D. Use the property lookAt to orient the object towards another object or a position.

INFO

This is a trait component. Trait components are mostly used internally and make certain aspects of three.js objects accessible and reactive and interact with Threlte systems.

Import

Source

Github View Source Code

Package

NPM View Package

Basic Example

TIP

You most likely want to use a <MeshInstance> component in this scenario. The component <TransformableObject> is part of the component <Object3DInstance>, which the component <MeshInstance> is extending.

<script>
	import { TransformableObject } from '@threlte/core'
	import { Mesh } from 'three'

	const mesh = new Mesh()

	const onTransform = () => {
		console.log('Mesh has been transformed!')
	}
</script>

<TransformableObject
	object={mesh}
	position={{ z: 0 }}
	scale={1.5}
	on:transform={onTransform}
/>

Properties

// optional
object: Object3D
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined

Events

transform: void