Image
Display image textures with shader-based effects.
<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 { TresCanvas } from '@tresjs/core'
import { Image } from '@tresjs/cientos'
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[0, 0, 5]" />
<Image
url="https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG"
:scale="[2, 2]"
/>
</TresCanvas>
</template>
Props
<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. |
Caveats
By default, images loaded via the url prop use the renderer’s output color space. For advanced control, pass a THREE.Texture via the texture prop and set its colorSpace (e.g., THREE.SRGBColorSpace or THREE.LinearSRGBColorSpace).
<script setup>
import { useTexture } from '@tresjs/cientos'
import { SRGBColorSpace } from 'three'
const { state } = useTexture(URL)
watch(state, (texture) => {
texture.colorSpace = SRGBColorSpace // assign a custom color space
})
</script>
<template>
<Image :texture="texture" />
</template>