A-Frame React Immersive Stereoscopic Video Component

Belivvr logo

React
TypeScript

codecov

Languages

한국어 | English

Introduce

This library is for using mirror in [email protected].
Get from Three.js build-in Refractor, and reference from Reflector example.

Install

Require to install @belivvr/aframe-react.

# yarn
yarn add [email protected] @belivvr/aframe-react @belivvr/aframe-react-mirror

# npm
npm i [email protected] @belivvr/aframe-react @belivvr/aframe-react-mirror

Usage

React

import 'aframe';
import { Scene, Plain } from '@belivvr/aframe-react';
import {
  registerMirror,
  Mirror,
} from '@belivvr/aframe-react-mirror';

registerMirror(); // Doing AFRAME.registerComponent in mirror function.

ReactDOM.render(
  (
    <Scene>
      <Mirror
        width={5}
        height={10}
        position={{ x: 0, y: 0, z: 20 }}
      />
      // if you want to mirror what is has side of back
      // using below Mirror component
      <Mirror
        width={5}
        height={10}
        position={{ x: 0, y: 0, z: 19.999 }}
        rotation={{ x: 0, y: 180, z: 0 }}
      />
    </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, Plain } from '@belivvr/aframe-react';
import {
  registerMirror,
  Mirror,
} from '@belivvr/aframe-react-mirror';

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

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

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

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

  return (
    <Scene>
      <Mirror
        width={5}
        height={10}
        position={{ x: 0, y: 0, z: 20 }}
      />
      // if you want to mirror what is has side of back
      // using below Mirror component
      <Mirror
        width={5}
        height={10}
        position={{ x: 0, y: 0, z: 19.999 }}
        rotation={{ x: 0, y: 180, z: 0 }}
      />
    </Scene>
  );
};

export default Home;

Options

name description default
width mirror width 5
height mirror height 20
position mirror position { x: 0, y: 0, z: 20 }

GitHub

View Github