1. Types

Types

TypeScript users should install @types/three in order to get type support for three.js.

terminal
npm install -D @types/three

Threlte components follow the principles of three.js whereever possible and meaningful in terms of available properties and events and their respective naming.

Property Types

To make working with component props easier, threlte includes special types for position, scale, rotation and lookAt:

type Position = THREE.Vector3 | { x?: number; y?: number; z?: number }

const positionA = new Vector3()
const positionB = { x: 1, z: 1 }

type Scale = THREE.Vector3 | number | { x?: number; y?: number; z?: number }

const scaleA = new Vector3()
const scaleB = 2
const scaleC = { x: 1.5, z: 1 }

type Rotation = THREE.Euler | { x?: number; y?: number; z?: number; order?: THREE.Euler['order'] }

const rotationA = new Euler()
const rotationB = { x: 1.5, z: 1 }

type LookAt = THREE.Vector3 | { x?: number; y?: number; z?: number } | THREE.Object3D

const lookAtA = new Vector3()
const lookAtB = { x: 2, y: 3 }
const lookAtC = someMesh

Context Types

The <Canvas> component provides three useful contexts: ThrelteContext, ThrelteRootContext and ThrelteAudioContext. See useThrelte, useThrelteRoot and useThrelteAudio on how to easily consume these from within child components of <Canvas>.

// type ThrelteContext
const {
	size, // Readable<Size>
	pointer, // Writable<Vector2>
	pointerOverCanvas, // Writable<boolean>
	clock, // Clock
	camera, // Writable<Camera>
	scene, // Scene
	renderer, // WebGLRenderer | undefined
	composer, // EffectComposer | undefined
	invalidate, // (debugFrameloopMessage?: string) => void
	advance // () => void
} = useThrelte()

// type ThrelteRootContext
const {
	setCamera, // (camera: Camera) => void
	linear, // Writable<boolean>
	flat, // Writable<boolean>
	dpr, // Writable<number>
	addPass, // (pass: Pass) => void
	removePass, // (pass: Pass) => void
	addRaycastableObject, // (obj: Object3D) => void
	removeRaycastableObject, // (obj: Object3D) => void
	addInteractiveObject, // (obj: Object3D) => void
	removeInteractiveObject, // (obj: Object3D) => void
	interactiveObjects, // Set<Object3D>
	raycastableObjects, // Set<Object3D>
	raycaster, // Raycaster
	lastIntersection // Intersection<Object3D<Event>> | null
} = useThrelteRoot()

// type ThrelteAudioContext
const {
	audioListeners, // Map<string, AudioListener>
	getAudioListener, // (id?: string) => AudioListener | undefined
	addAudioListener, // (listener: AudioListener, id?: string) => void
	removeAudioListener // (id?: string) => void
} = useThrelteAudio()

Type Notation

The property types in this documentation are notated in the following way:

// required property
propName: propType

// optional property
propName: propType = defaultValue