1. @threlte/core
  2. Instance

@threlte/core

Instance

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" />
</InstancedMesh>

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Examples

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>

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

Properties

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

Events

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