diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 7564c40e..c7a1b8d4 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -59,6 +59,7 @@ export default defineConfig({ { text: 'GLTFModel', link: '/guide/loaders/gltf-model' }, { text: 'useFBX', link: '/guide/loaders/use-fbx' }, { text: 'FBXModel', link: '/guide/loaders/fbx-model' }, + { text: 'useVideoTexture', link: '/guide/loaders/use-video-texture' }, ], }, { diff --git a/docs/guide/loaders/use-video-texture.md b/docs/guide/loaders/use-video-texture.md new file mode 100644 index 00000000..1a92c9c9 --- /dev/null +++ b/docs/guide/loaders/use-video-texture.md @@ -0,0 +1,39 @@ +# useVideoProgress + +A composable to easily use videos as textures in your meshes. + +This composable is based on the Drei [useVideoTexture](https://github.com/pmndrs/drei/tree/master#usevideotexture) + +## Usage + +```ts +import { useVideoTexture } from '@tresjs/cientos' +import exampleVideo from '/myVideoPath' + +const texture = ref() +texture.value = await useVideoTexture(exampleVideo, { loop: false }) +``` + +Then you can use the texture in your material, for example: + +```vue{3} +... + + + +... +``` + +## 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 `