This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@belivvr/aframe-react-stereoscopic

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

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