Skip to main content

useVideoTexture()

允许您在 React Three Fiber 中使用与 Remotion 的 useCurrentFrame() 同步的视频。

要在 Three.JS 上下文中使用视频，您首先必须渲染它并分配一个引用。如果您只想在 React Three Fiber 场景中使用它，可以通过添加{position: "absolute", opacity: 0}样式使其不可见。

tsx
import { useRef } from "react";
import { Video } from "remotion";
import src from "./vid.mp4";
 
const MyVideo = () => {
  const videoRef = useRef<HTMLVideoElement | null>(null);
 
  return (
    <Video
      ref={videoRef}
      src={src}
      style={{ position: "absolute", opacity: 0 }}
    />
  );
};
tsx
import { useRef } from "react";
import { Video } from "remotion";
import src from "./vid.mp4";
 
const MyVideo = () => {
  const videoRef = useRef<HTMLVideoElement | null>(null);
 
  return (
    <Video
      ref={videoRef}
      src={src}
      style={{ position: "absolute", opacity: 0 }}
    />
  );
};

要将视频转换为视频纹理，请将useVideoTexture()钩子放在同一组件中。

tsx
import { useVideoTexture } from "@remotion/three";
 
// ...
 
const texture = useVideoTexture(videoRef);
tsx
import { useVideoTexture } from "@remotion/three";
 
// ...
 
const texture = useVideoTexture(videoRef);

它的返回类型是THREE.VideoTexture | null，您可以将其分配为例如meshBasicMaterial的map。我们建议仅在纹理不为null时才渲染材质，以防止错误。

tsx
{
  videoTexture ? <meshBasicMaterial map={videoTexture} /> : null;
}
tsx
{
  videoTexture ? <meshBasicMaterial map={videoTexture} /> : null;
}

另请参阅​