Core Components
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>
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>