Skip to content

useVideoTexture ^3.2.0

A composable to easily use videos as textures in your meshes.

This composable is based on the Drei useVideoTexture


<script setup lang="ts">
import { ref } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Sphere, useVideoTexture } from '@tresjs/cientos'

const exampleVideo = ''
  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
const texture = ref()
texture.value = await useVideoTexture(exampleVideo, { loop: false })

  <TresCanvas clear-color="#333">
      :position="[0, 5, 9]"
      :look-at="[0, 1, 0]"
    <OrbitControls />
    <Sphere :position="[0, 2, 0]">
      <TresMeshBasicMaterial :map="texture" />
    <TresGridHelper />
    <TresAmbientLight />


srcPath to the video.undefined
unsuspendPath to the model file.loadedmetadata
crossOriginWhether to use CORS to fetch the related video.Anonymous
mutedWhether to set the audio silenced.true
loopAutomatically seek back to the start upon reaching the end of the video.true
startTo play to the video once loaded or not.true
playsInlineTo be play the video inline or not.true
  • Any other attribute for a <video> tag is accepted and will automatically set