Image

<Image /> is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.

Usage

<script setup lang="ts">
import { NoToneMapping, SRGBColorSpace } from 'three'
import { TresCanvas } from '@tresjs/core'
import { Image, OrbitControls } from '@tresjs/cientos'

const gl = {
  clearColor: '#82DBC5',
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const URL_STUB = 'https://upload.wikimedia.org/wikipedia/commons/'

const URLS = [
  'f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG',
  '3/36/Cyanistes_caeruleus_Oulu_20130323.JPG',
  '2/2e/Cyanistes_caeruleus_Oulu_20170507_02.jpg',
].map(url => URL_STUB + url)
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 0, 2]" />
    <OrbitControls />
    <Image :url="URLS[0]" :radius="0.2" :transparent="true" :position="[-1.5, 0, -1]" />
    <Image :url="URLS[1]" :radius="0.2" :transparent="true" />
    <Image :url="URLS[2]" :radius="0.2" :transparent="true" :position="[1.5, 0, -1]" />
  </TresCanvas>
</template>

Props

INFO

<Image /> is a THREE.Mesh and most Mesh attributes can be used as props on the component.

Prop	Description	Default
segments	Number of divisions in the default geometry.	1
scale	Scale of the geometry. number | [number, number]	1
color	Color multiplied into the image texture.	'white'
zoom	Shrinks or enlarges the image texture.	1
radius	Border radius applied to the image texture. (Intended for rectangular geometries. Use with transparent.)	0
grayscale	Power of grayscale effect. 0 is off. 1 is full grayscale.	0
toneMapped	Whether this material is tone mapped according to the renderers toneMapping settings. See THREE.material.tonemapped	0
transparent	Whether the image material should be transparent. See THREE.material.transparent	false
transparent	Whether the image material should be transparent. See THREE.material.transparent	false
opacity	Opacity of the image material. See THREE.material.transparent	1
side	THREE.Side of the image material. See THREE.material.side	FrontSide
texture	Image texture to display on the geometry.
url	Image URL to load and display on the geometry.