useVideoTexture ^3.2.0

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

This composable is based on the Drei useVideoTexture

Usage

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

const exampleVideo = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
const texture = ref()
texture.value = await useVideoTexture(exampleVideo, { loop: false })
</script>

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

Props

Prop	Description	Default
src	Path to the video.	undefined
unsuspend	Path to the model file.	loadedmetadata
crossOrigin	Whether to use CORS to fetch the related video.	Anonymous
muted	Whether to set the audio silenced.	true
loop	Automatically seek back to the start upon reaching the end of the video.	true
start	To play to the video once loaded or not.	true
playsInline	To be play the video inline or not.	true

• Any other attribute for a <video> tag is accepted and will automatically set