使用视频纹理()

🌐 ~~useVideoTexture()~~

warning

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

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

🌐 Allows you to use a video in React Three Fiber that is synchronized with Remotion's useCurrentFrame().

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

🌐 To use a video in a Three.JS context, you first have to render it and assign it a ref. If you only want to use it in a React Three Fiber Scene, you can make it invisible by adding a {position: "absolute", opacity: 0} style.

import {useRef} from 'react';
import {Html5Video} from 'remotion';
import src from './vid.mp4';

const MyVideo = () => {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  return <Html5Video ref={videoRef} src={src} style={{position: 'absolute', opacity: 0}} />;
};

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

🌐 To convert the video to a video texture, place the useVideoTexture() hook in the same component.

import {useVideoTexture} from '@remotion/three';

// ...

const texture = useVideoTexture(videoRef);

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

🌐 The return type of it is a THREE.VideoTexture | 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.

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

另请参阅

🌐 See also

另请参阅​

另请参阅