VideoTexture 未使用 react-three-fiber

问题描述

我需要在 VR 中以 360° 播放视频。我对three.js之类的东西很陌生，所以这可能是一个菜鸟错误，但我似乎无法弄清楚。

这是我的代码： 我有 ImmersiveVideoCamvas，它包含视频的画布和 ImmersiveVideo 组件。

ImmersiveVideoCanvas

const ImmersiveVideoCanvas = () => {
  return (
    <div
      style={{
        height: "500px",width: "500px",margin: "2rem",border: "1px solid red",}}
    >
      <Canvas
        vr
        onCreated={(data) => {
          if (navigator.xr) {
            const gl = data.gl;
            document.body.appendChild(VRButton.createButton(gl));
          }
        }}
      >
        <ambientLight />
        <pointLight position={[10,10,10]} />
        <ImmersiveVideo />
      </Canvas>
    </div>
  );
};

ImmersiveVideo

import { useState } from "react";
import { useAspect } from "@react-three/drei";

const ImmersiveVideo = () => {
  const [x,y] = useAspect("cover",1800,1000);
  const [loading,setLoading] = useState(true);
  const [video] = useState(() => {
    const sUsrAg = navigator.userAgent;
    const vid = document.createElement("video");
    if (sUsrAg.indexOf("Firefox") > -1) {
      vid.src = document
        .getElementsByClassName("agora_video_player")[0]
        .mozCaptureStream();
    } else {
      vid.src = document
        .getElementsByClassName("agora_video_player")[0]
        .captureStream();
    }
    vid.crossOrigin = "Anonymous";
    vid.loop = true;
    setLoading(false);
    vid.play();
    return vid;
  });

  return (
    <mesh scale={[x,y,1]}>
      <planeBufferGeometry args={[1,1]} />
      <meshBasicMaterial>
        <videoTexture attach="map" args={{ video }} />
      </meshBasicMaterial>
    </mesh>
  );
};

export default ImmersiveVideo;

当我在 oculus 浏览器中进入 VR 时，出现黑屏。我读到如果缺少 video.play() 可能会发生这种情况，但在我的情况下它不会丢失......除非它写在错误的地方。我知道 captureStream() 不是问题，因为如果我只是捕获流并在另一个常规 <video /> 元素中播放它，它工作得很好。 （由于我对此非常陌生，因此我尝试将我的代码基于此讨论的回复 https://github.com/pmndrs/react-three-fiber/discussions/786）

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）