@belivvr/aframe-react-stereoscopic v0.1.2

A-Frame React Immersive Stereoscopic Video Component

Languages

한국어 | English

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.

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

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.