@threlte/extras

<UvMaterial>

A material that visualizes the uvs of a geometry. Uvs are typically used for texture sampling in the shader. UvMaterial is meant to give you a sense of how textures will be mapped onto a mesh.

<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 mesh’s geometry must have a “uv” attribute in order for UvMaterial to work properly. If you’re creating your own geometry, be sure to assign the “uv” attribute.

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

<T.Mesh>
  <T is={geometry} />
  <UvMaterial />
</T.Mesh>

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. Three.js geometry primitives such as BoxGeometry and SphereGeometry are also outfitted with uv data.

Component Signature

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

Previous Page <Sparkles>

Next Page <Wireframe>