how to make VideoTexture?

[siz0001]

Hi!
There are no VideoTexture props in Trois.
Can you add it? 😀

[oneWaveAdrian]

Do it the same way as in ThreeJS:

HTML

<video
          ref="aboutvideo"
          controls
          src="/assets/videos/about.mp4?url"
          muted
          autoplay
          loop
        />

[...]

<Plane>
              <LambertMaterial ref="aboutscreen" color="#fff" />
</Plane>

JS

import {VideoTexture} from 'three' 

[...]

const vidtex = new VideoTexture(this.$refs.aboutvideo)
this.$refs.aboutscreen.setTexture(vidtex)

[siz0001]

thank you for your prompt reply, and is it right? 😂😂

<template>
  <div>
    <video
      ref="aboutvideo"
      controls
      :src="require('../assets/BTS.mp4')"
      loop
      style="width: 100%"
    />
    <v-btn @click="play"> play </v-btn>
    <Renderer
      ref="renderer"
      antialias
      resize
      :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"
    >
      <Camera :position="{ x: -0, y: -100, z: 30 }" />
      <Scene background="#000000">
        <Plane>
          <LambertMaterial ref="aboutscreen" color="#fff" />
        </Plane>
      </Scene>
    </Renderer>
  </div>
</template>

<script>
import { VideoTexture } from "three";

import { Plane, LambertMaterial } from "troisjs";

export default {
  components: {
    Plane,
    LambertMaterial,
  },
  methods: {
    play() {
      this.$refs.aboutvideo.play();
    },
  },
  mounted() {
    
    const renderer = this.$refs.renderer;

    //  const mesh = this.$refs.mesh.mesh;
    renderer.onBeforeRender(() => {
const vidtex = new VideoTexture(this.$refs.aboutvideo);
    this.$refs.aboutscreen.setTexture(vidtex);
    });
  },
};
</script>

[xcchcaptain]

thank you for your prompt reply, and is it right? 😂😂

<template>
  <div>
    <video
      ref="aboutvideo"
      controls
      :src="require('../assets/BTS.mp4')"
      loop
      style="width: 100%"
    />
    <v-btn @click="play"> play </v-btn>
    <Renderer
      ref="renderer"
      antialias
      resize
      :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"
    >
      <Camera :position="{ x: -0, y: -100, z: 30 }" />
      <Scene background="#000000">
        <Plane>
          <LambertMaterial ref="aboutscreen" color="#fff" />
        </Plane>
      </Scene>
    </Renderer>
  </div>
</template>

<script>
import { VideoTexture } from "three";

import { Plane, LambertMaterial } from "troisjs";

export default {
  components: {
    Plane,
    LambertMaterial,
  },
  methods: {
    play() {
      this.$refs.aboutvideo.play();
    },
  },
  mounted() {
    
    const renderer = this.$refs.renderer;

    //  const mesh = this.$refs.mesh.mesh;
    renderer.onBeforeRender(() => {
const vidtex = new VideoTexture(this.$refs.aboutvideo);
    this.$refs.aboutscreen.setTexture(vidtex);
    });
  },
};
</script>

don't need to set VideoTexture in onBeforeRender,just move them into the method play,will make that work