@threlte/extras

<GLTF>

<GLTF /> loads a single model from a url. The url property is reactive and will load new 3D content if changed. The new content will be swapped as soon as loading is finished.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Environment, GLTF, OrbitControls } from '@threlte/extras'
</script>

<Environment
  path="/hdr/"
  files="shanghai_riverside_1k.hdr"
/>

<T.PerspectiveCamera
  makeDefault
  position={[5, 2, 5]}
  fov={25}
>
  <OrbitControls
    autoRotate
    enableDamping
  />
</T.PerspectiveCamera>

<T.AmbientLight />

<GLTF url="/models/helmet/DamagedHelmet.gltf" />

Interaction

The <GLTF> component supports interaction events with the use of interactivity plugin.

<script>
  import { interactivity } from '@threlte/extras'
  interactivity()
</script>

<GLTF
  position={{ y: 1 }}
  scale={3}
  url="/models/helmet/DamagedHelmet.gltf"
  onclick={() => {
    console.log('User clicked!')
  }}
/>

Compression

The <GLTF> component supports compressed glTF files.

DRACO

To use DRACO compression, import the useDraco hook or provide an instance of a DRACOLoader.

<script>
  import { GLTF, useDraco } from '@threlte/extras'

  const dracoLoader = useDraco() // Creates a cached instance of DracoLoader
</script>

<GLTF
  url="/models/helmet/DamagedHelmet.gltf"
  {dracoLoader}
/>

The useDraco hook will load a default DRACO decoder from Google servers, specifically https://www.gstatic.com/draco/v1/decoders/.

KTX 2

To use KTX2 compressed textures, import the useKtx2 hook or provide an instance of a KTX2Loader.

<script>
  import { useKtx2 } from '@threlte/extras'

  const ktx2Loader = useKtx2('path/to/transcoder') // Creates a cached instance of KTX2Loader
</script>

<GLTF
  url="/models/helmet/DamagedHelmet.gltf"
  {ktx2Loader}
/>

Meshopt

To use meshopt compression, import the useMeshopt hook or provide an instance of a MeshoptDecoder.

The useMeshopt hook will load a default meshopt decoder from Three, specifically https://github.com/mrdoob/three.js/blob/dev/examples/jsm/libs/meshopt_decoder.module.js.

<script>
  import { GLTF, useMeshopt } from '@threlte/extras'

  const meshoptDecoder = useMeshopt() // Creates a cached instance of MeshoptDecoder
</script>

<GLTF
  url="/models/helmet/DamagedHelmet.gltf"
  {meshoptDecoder}
/>