@threlte/extras

<UvMaterial>

A material that visualizes the uvs of a geometry. Uvs are typically used for texture indexing.

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

<Canvas>
  <Scene />
</Canvas>

<script
  lang="ts"
  module
>
  const cameraAxis = new Vector3(0.75, 0.5, 1).normalize()

  const geometries = [
    BoxGeometry,
    CapsuleGeometry,
    CircleGeometry,
    ConeGeometry,
    CylinderGeometry,
    DodecahedronGeometry,
    ExtrudeGeometry,
    IcosahedronGeometry,
    LatheGeometry,
    OctahedronGeometry,
    RingGeometry,
    ShapeGeometry,
    SphereGeometry,
    TetrahedronGeometry,
    TorusGeometry,
    TorusKnotGeometry
  ].map((constructor) => new constructor())

  const width = 4
  const gap = 4
  const cameraTranslationAmount = 5 * width

  const gridColor = '#ffffff'
</script>

<script lang="ts">
  import { Align, Grid, OrbitControls, UvMaterial } from '@threlte/extras'
  import { T } from '@threlte/core'
  import {
    BoxGeometry,
    CapsuleGeometry,
    CircleGeometry,
    ConeGeometry,
    CylinderGeometry,
    DodecahedronGeometry,
    ExtrudeGeometry,
    IcosahedronGeometry,
    LatheGeometry,
    OctahedronGeometry,
    PerspectiveCamera,
    RingGeometry,
    ShapeGeometry,
    SphereGeometry,
    TetrahedronGeometry,
    TorusGeometry,
    TorusKnotGeometry,
    Vector3
  } from 'three'

  const camera = new PerspectiveCamera()
  camera.translateOnAxis(cameraAxis, cameraTranslationAmount)
</script>

<T
  is={camera}
  makeDefault
>
  <OrbitControls />
</T>

<Align
  position.y={2}
  oncreate={(ref) => {
    camera.lookAt(ref.position)
  }}
>
  {#each geometries as geometry, i}
    <T.Mesh
      position.x={gap * (i % width)}
      position.z={gap * Math.floor(i / width)}
    >
      <T is={geometry} />
      <UvMaterial />
    </T.Mesh>
  {/each}
</Align>

<Grid
  infiniteGrid
  cellColor={gridColor}
  sectionColor={gridColor}
/>

Usage

Simply import the component and add it as a child to a mesh

Scene.svelte

<script>
  import { T } from '@threlte/core'
  import { UvMaterial } from '@threlte/extras'
</script>

<T.Mesh>
  <T.BoxGeometry />
  <UvMaterial />
</T.Mesh>

Caveats

The geometry must have a “uv” attribute in order for this material to work. If you’re creating your own geometry, be sure to assign the “uv” attribute.

const geometry = new BufferGeometry()
const uvAttribute = new BufferAttribute(/* uv array here */)
geometry.setAttribute('uv', uvAttribute)

Most models that you import into your program should come with uv data and three.js will automatically assign uv attributes when loading the model.

Component Signature

<UvMaterial> extends < T . ShaderMaterial > and supports all its props, snippets, bindings and events.

Previous Page <ShadowMaterial>

Next Page <Wireframe>