Skip to main content

useOffthreadVideoTexture()

从 v4.0.83 版本开始可用

允许您在 React Three Fiber 中使用与 Remotion 的 useCurrentFrame() 同步的视频，类似于 useVideoTexture()，但使用 <OffthreadVideo>。

此钩子仅在渲染期间起作用。在播放器和 Remotion Studio 中，请改用 useVideoTexture()。请参见下面的示例。

此钩子旨在解决与 useVideoTexture() 钩子一起使用的默认 <Video> 元素的限制。 参见：<OffthreadVideo> vs <Video>

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

示例​

简单用法（仅在渲染期间起作用）
tsx
import { ThreeCanvas, useOffthreadVideoTexture } from "@remotion/three";
import { staticFile, useVideoConfig } from "remotion";
 
const videoSrc = staticFile("/vid.mp4");
 
const My3DVideo = () => {
  const { width, height } = useVideoConfig();
 
  const videoTexture = useOffthreadVideoTexture({ src: videoSrc });
 
  return (
    <ThreeCanvas width={width} height={height}>
      <mesh>
        {videoTexture ? <meshBasicMaterial map={videoTexture} /> : null}
      </mesh>
    </ThreeCanvas>
  );
};
简单用法（仅在渲染期间起作用）
tsx
import { ThreeCanvas, useOffthreadVideoTexture } from "@remotion/three";
import { staticFile, useVideoConfig } from "remotion";
 
const videoSrc = staticFile("/vid.mp4");
 
const My3DVideo = () => {
  const { width, height } = useVideoConfig();
 
  const videoTexture = useOffthreadVideoTexture({ src: videoSrc });
 
  return (
    <ThreeCanvas width={width} height={height}>
      <mesh>
        {videoTexture ? <meshBasicMaterial map={videoTexture} /> : null}
      </mesh>
    </ThreeCanvas>
  );
};
仅在渲染期间使用 useVideoTexture()
tsx
import {
  ThreeCanvas,
  useOffthreadVideoTexture,
  useVideoTexture,
} from "@remotion/three";
import { useRef } from "react";
import {
  getRemotionEnvironment,
  staticFile,
  useVideoConfig,
  Video,
} from "remotion";
 
const videoSrc = staticFile("/vid.mp4");
 
const useVideoOrOffthreadVideoTexture = (
  videoSrc: string,
  videoRef: React.RefObject<HTMLVideoElement>,
) => {
  if (getRemotionEnvironment().isRendering) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    return useOffthreadVideoTexture({ src: videoSrc });
  }
 
  // eslint-disable-next-line react-hooks/rules-of-hooks
  return useVideoTexture(videoRef);
};
 
const My3DVideo = () => {
  const { width, height } = useVideoConfig();
 
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const videoTexture = useVideoOrOffthreadVideoTexture(videoSrc, videoRef);
 
  return (
    <>
      {getRemotionEnvironment().isRendering ? null : (
        <Video
          ref={videoRef}
          src={videoSrc}
          style={{ position: "absolute", opacity: 0 }}
        />
      )}
      <ThreeCanvas width={width} height={height}>
        <mesh>
          {videoTexture ? <meshBasicMaterial map={videoTexture} /> : null}
        </mesh>
      </ThreeCanvas>
    </>
  );
};
仅在渲染期间使用 useVideoTexture()
tsx
import {
  ThreeCanvas,
  useOffthreadVideoTexture,
  useVideoTexture,
} from "@remotion/three";
import { useRef } from "react";
import {
  getRemotionEnvironment,
  staticFile,
  useVideoConfig,
  Video,
} from "remotion";
 
const videoSrc = staticFile("/vid.mp4");
 
const useVideoOrOffthreadVideoTexture = (
  videoSrc: string,
  videoRef: React.RefObject<HTMLVideoElement>,
) => {
  if (getRemotionEnvironment().isRendering) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    return useOffthreadVideoTexture({ src: videoSrc });
  }
 
  // eslint-disable-next-line react-hooks/rules-of-hooks
  return useVideoTexture(videoRef);
};
 
const My3DVideo = () => {
  const { width, height } = useVideoConfig();
 
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const videoTexture = useVideoOrOffthreadVideoTexture(videoSrc, videoRef);
 
  return (
    <>
      {getRemotionEnvironment().isRendering ? null : (
        <Video
          ref={videoRef}
          src={videoSrc}
          style={{ position: "absolute", opacity: 0 }}
        />
      )}
      <ThreeCanvas width={width} height={height}>
        <mesh>
          {videoTexture ? <meshBasicMaterial map={videoTexture} /> : null}
        </mesh>
      </ThreeCanvas>
    </>
  );
};

API​

接受具有以下属性的对象：

src​

视频源。可以是 URL 或 staticFile()。

playbackRate​

视频的播放速率。默认为 1。

transparent​

可选，布尔值

如果设置为 true，帧将被提取为 PNG，从而启用透明度，但也会减慢渲染速度。

如果设置为 false（默认），帧将被提取为位图（BMP），这更快。

toneMappedv4.0.117​

自 Remotion 4.0.117 版本开始，当将视频转换为 RGB 时，Remotion 将调整不同颜色空间（如 HDR）中的视频颜色，以抵消颜色偏移。 由于浏览器在 sRGB 中绘制，这是必要的，以确保颜色正确显示。 此行为默认为 true，可以通过将 toneMapped 设置为 false 来禁用。 禁用色调映射将加快渲染速度，但可能导致颜色不太鲜艳。

在 Remotion 4.0.117 之前，色调映射始终被禁用，并且 toneMapped 属性不可用。

循环纹理​

与 <OffthreadVideo> 类似，循环视频不受支持 ，但可以通过 <Loop> 组件实现。

另请参阅​