Skip to main content

useOffthreadVideoTexture()v4.0.83

warning

已弃用 - 我们建议改为使用 @remotion/media。

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

🌐 Allows you to use a video in React Three Fiber that is synchronized with Remotion's useCurrentFrame(), similar to useVideoTexture(), but uses <OffthreadVideo> instead.

这个 hook 仅在渲染期间有效。在播放器和 Remotion Studio 中，请改用 useVideoTexture()。示例见下方。

🌐 This hook only works during rendering. In the Player and the Remotion Studio, use useVideoTexture() instead. See below for an example.

此钩子旨在应对用于 useVideoTexture() 钩子的默认 <Html5Video> 元素的限制。请参见：视频标签比较

🌐 This hook was designed to combat limitations of the default <Html5Video> element that is used with useVideoTexture() hook. See: Comparison of video tags

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

🌐 The return type of it is a THREE.Texture | null which you can assign as a map to for example meshBasicMaterial. We recommend to only render the material when the texture is not null to prevent bugs.

示例​

🌐 Example

Simple usage (only works during rendering)
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>
  );
};
Use useVideoTexture() only during rendering
import {ThreeCanvas, useOffthreadVideoTexture, useVideoTexture} from '@remotion/three';
import {useRef} from 'react';
import {staticFile, useRemotionEnvironment, useVideoConfig, Html5Video} from 'remotion';

const videoSrc = staticFile('/vid.mp4');

const useVideoOrOffthreadVideoTexture = (videoSrc: string, videoRef: React.RefObject<HTMLVideoElement | null>) => {
  const env = useRemotionEnvironment();
  if (env.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);
  const env = useRemotionEnvironment();

  return (
    <>
      {env.isRendering ? null : <Html5Video ref={videoRef} src={videoSrc} style={{position: 'absolute', opacity: 0}} />}
      <ThreeCanvas width={width} height={height}>
        <mesh>{videoTexture ? <meshBasicMaterial map={videoTexture} /> : null}</mesh>
      </ThreeCanvas>
    </>
  );
};

应用编程接口​

🌐 API

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

🌐 Takes an object with the following properties:

src​

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

🌐 The video source. Can be a URL or a staticFile().

playbackRate​

视频的播放速度。默认值为 1。

🌐 The playback rate of the video. Defaults to 1.

note

不支持倒放视频。

transparent?​

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

🌐 If set to true, frames will be extracted as PNG, enabling transparency but also slowing down your render.

如果设置为 false（默认），帧将以位图 (BMP) 的形式提取，这样速度更快。

🌐 If set to false (default), frames will be extracted as bitmap (BMP), which is faster.

toneMappedv4.0.117​

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

🌐 Since Remotion 4.0.117, Remotion will adjust the colors of videos in different color spaces (such as HDR) when converting to RGB, to counteract color shifts.
Since the browser is painting in sRGB, this is necessary to ensure that the colors are displayed correctly.
This behavior is by default true and can be disabled by setting toneMapped to false.
Disabling tone mapping will speed up rendering, but may result in less vibrant colors.

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

🌐 Prior to Remotion 4.0.117, tone mapping was always disabled, and the toneMapped prop was not available.

delayRenderTimeoutInMillisecondsv4.0.271​

自定义此钩子所调用的 delayRender() 调用的 timeout。

🌐 Customize the timeout of the delayRender() call that this hook makes.

delayRenderRetriesv4.0.271​

自定义此钩子调用 delayRender() 的 重试次数。

🌐 Customize the number of retries of the delayRender() call that this hook makes.

循环纹理​

🌐 Looping a texture

像 <OffthreadVideo> 一样，开箱即用不支持 循环播放视频，但可以通过 <Loop> 组件实现。

🌐 Like <OffthreadVideo>, looping a video is not supported out of the box but can be achieved with the <Loop> component.

另请参阅​

🌐 See also

Last updated on