@threlte/extras
<InstancedMesh>
The component <InstancedMesh> is wrapping the Three.js object InstancedMesh and provides instanced rendering support. Use <InstancedMesh> if you have to render a large number of objects with the same geometry and material but with different world transformations and colors. The usage of <InstancedMesh> will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
<script lang="ts">
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
</script>
<Canvas>
<Scene />
</Canvas>Usage
An <InstancedMesh> is used in conjunction with the <Instance> component:
<InstancedMesh>
<T.BoxGeometry />
<T.MeshStandardMaterial />
<Instance />
<Instance />
</InstancedMesh>It’s also possible to nest other objects in an <InstancedMesh> component:
<InstancedMesh>
<T.BoxGeometry />
<T.MeshStandardMaterial />
<Instance />
<Instance />
<GLTF />
</InstancedMesh>Provide an id to use multiple <InstancedMesh> components:
<InstancedMesh id="tree">
<T is={treeGeometry} />
<T.MeshStandardMaterial map={treeTexture} />
<InstancedMesh id="leaf">
<T is={leafGeometry} />
<T.MeshStandardMaterial map={leafTexture} />
<T.Group position.x={1}>
<Instance id="tree" /> // Instance of InstancedMesh with id="tree"
<Instance id="leaf" /> // Instance of InstancedMesh with id="leaf"
</T.Group>
<T.Group position.x={-2}>
<Instance id="tree" />
<Instance id="leaf" />
</T.Group>
</InstancedMesh>
</InstancedMesh>Instance count
Use the property limit to set the maximum amount of <Instance> components (defaults to 1000). The property limit will be used to initialize the internally used Float32Array. Use the property range to optionally limit the amount of drawn instances.
<InstancedMesh
limit={10000}
range={100}
>
<T.BoxGeometry />
<T.MeshStandardMaterial />
<Instance />
<Instance />
</InstancedMesh>Events
<script lang="ts">
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
</script>
<Canvas>
<Scene />
</Canvas>Instances also support interactivity events.
<InstancedMesh>
<T.BoxGeometry />
<T.MeshStandardMaterial />
<Instance on:click={onClick} />
</InstancedMesh>Nesting
Instances can be nested in other objects and all parent transformations apply as usual:
<InstancedMesh>
<T.BoxGeometry />
<T.MeshStandardMaterial />
<T.Group rotation.z={DEG2RAD * 180}>
<Instance />
<T.Group position.y={2}>
<Instance />
</T.Group>
</T.Group>
</InstancedMesh>Component Signature
<InstancedMesh> extends
<T.InstancedMesh>
and supports all its props, slot props, bindings and events.