README

A-Frame React Immersive Stereoscopic Video Component

Belivvr logo

Languages

Introduce

This library was created by referring to the aframe-stereo-component.
The library I referred to did not work in aframe@^1.2.0, so I made it work in three@^0.135.0, referring to the example of Three.js WebXR VR video.

MaryOculus Screenshot

It is a component created to provide the above stereoscopic video as VR Immersive.

Install

Require to install @belivvr/aframe-react.

# yarn
yarn add aframe @belivvr/aframe-react @belivvr/aframe-react-stereoscopic

# npm
npm i aframe @belivvr/aframe-react @belivvr/aframe-react-stereoscopic

Usage

React

import AFRAME from 'aframe';
import { Scene, Assets } from '@belivvr/aframe-react';
import {
  stereoscopic,
  StereoscopicCamera,
  StereoscopicVideo,
} from '@belivvr/aframe-react-stereoscopic';

stereoscopic(AFRAME); // Doing AFRAME.registerComponent in stereoscopic function.

ReactDOM.render(
  (
    <Scene>
      <Assets>
        <video
          id="video"
          src="./MaryOculus.mp4"
          controls
          autoPlay
          playsInline
          muted
          crossOrigin="crossorigin"
        />
      </Assets>

      <StereoscopicCamera
        wasdControlsEnabled={false}
        reverseMouseDrag
      />
      <StereoscopicVideo
        src="#video"
        mode="full" // full or half
      />
    </Scene>
  ),
  document.getElementById('root'),
);

Next.JS

Can't using import AFRAME from 'aframe'; in Next.JS.
Inevitably, we have no choice but to use require, and we have to check the completion of ssr through useEffect and then rendering.

Since aframe uses the window object, check the window object through typeof window !== 'undefined' and call aframe.

import type { NextPage } from 'next';

import React, { useEffect, useState } from 'react';
import { Scene, Assets } from '@belivvr/aframe-react';
import {
  stereoscopic,
  StereoscopicCamera,
  StereoscopicVideo,
} from '@belivvr/aframe-react-stereoscopic';

const Home: NextPage = () => {
  const [rendered, setRendered] = useState<boolean>(false);

  useEffect(() => {
    setRendered(true);

    if (typeof window !== 'undefined') {
      const AFRAME = require('aframe'); // eslint-disable-line global-require
      stereoscopic(AFRAME); // Doing AFRAME.registerComponent in stereoscopic function.
    }
  }, [stereoscopic, setRendered]);

  if (!rendered) {
    return <>loading</>;
  }

  return (
    <Scene>
      <Assets>
        <video
          id="video"
          src="./MaryOculus.mp4"
          controls
          autoPlay
          playsInline
          muted
          crossOrigin="crossorigin"
        />
      </Assets>

      <StereoscopicCamera
        wasdControlsEnabled={false}
        reverseMouseDrag
      />
      <StereoscopicVideo
        src="#video"
        mode="full" // full or half
      />
    </Scene>
  );
};

export default Home;

Options

StereoscopicVideo

|name|description|default|required| |:-|:-|:-|:-:| |src|target video tag's id||✅| |mode|full(360°), half(180°)|full||

StereoscopicCamera

a-camera reference
Entity reference

a-camera is a structure that inherits a-entity, so all components used in a-entity can be used.
Below is the reference of a-camera.

|name|description|default|required| |:-|:-|:-|:-:| |far|Camera frustum far clipping plane.|10000|| |fov|Field of view (in degrees).|80|| |lookControlsEnabled|Whether look controls are enabled.|true|| |near|Camera frustum near clipping plane.|0.5|| |reverseMouseDrag|Whether to reverse mouse drag.|false|| |wasdControlsEnabled|Whether the WASD controls are enabled.|true||

Usage no npm install needed!