0.1.2 • Published 2 years ago

@belivvr/aframe-react-stereoscopic v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

A-Frame React Immersive Stereoscopic Video Component

Belivvr logo

React TypeScript

codecov

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.

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

namedescriptiondefaultrequired
srctarget video tag's id
modefull(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.

namedescriptiondefaultrequired
farCamera frustum far clipping plane.10000
fovField of view (in degrees).80
lookControlsEnabledWhether look controls are enabled.true
nearCamera frustum near clipping plane.0.5
reverseMouseDragWhether to reverse mouse drag.false
wasdControlsEnabledWhether the WASD controls are enabled.true