0

我需要在 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）

谢谢！

4

0 回答 0