Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/core
  2. Instance



This module will be moved to @threlte/extras at some point in the future. Please read the update notice.

Every <Instance> component nested in an <InstancedMesh> component resembles one instance. An <Instance> can therefore only be used as a child component to a <InstancedMesh> component. The <Instance> component can be transformed and colorized individually:

<InstancedMesh {geometry} {material}>
  <Instance position={{ x: 5 }} scale={1} />
  <Instance position={{ z: 2 }} scale={2} color="red" />



Github View Source Code


NPM View Package

Related Docs


The properties position, rotation and scale work just like with every other threlte component, color is passed on to the THREE.Color constructor.

Provide an id to use multiple <InstancedMesh> components:

<InstancedMesh id="tree" geometry={treeGeometry} material={treeMaterial}>
  <InstancedMesh id="leaf" geometry={leafGeometry} material={leafMaterial}>
    <Group position={{ x: 1 }}>
      <Instance id="tree" /> // Instance of InstancedMesh with id="tree"
      <Instance id="leaf" /> // Instance of InstancedMesh with id="leaf"

    <Group position={{ x: -2 }}>
      <Instance id="tree" />
      <Instance id="leaf" />


// optional
id: string = ''
color: THREE.ColorRepresentation | undefined = undefined
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined


click: CustomEvent<ThreltePointerEvent>
contextmenu: CustomEvent<ThreltePointerEvent>
pointerup: CustomEvent<ThreltePointerEvent>
pointerdown: CustomEvent<ThreltePointerEvent>
pointerenter: CustomEvent<ThreltePointerEvent>
pointerleave: CustomEvent<ThreltePointerEvent>
pointermove: CustomEvent<ThreltePointerEvent>