Ninja Pokémon Master

    @belivvr/aframe-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.2 • Public • Published

    aframe-react

    React library for A-frame

    Belivvr Logo

    React TypeScript

    codecov

    Languages

    한국어 | English


    Introduce

    It was regrettable that the aframe-react library only supported a-scene and a-entity.
    A-Frame has many tags such as a-camera, a-box, etc...
    but it was not available in aframe-react, so we made it ourselves.

    Support aframe@1.3.0.

    Install

    # yarn
    yarn add github:aframevr/aframe#480a303b3c1932170552a3e4f9287298c1039c27 @belivvr/aframe-react
    
    # npm
    npm install github:aframevr/aframe#480a303b3c1932170552a3e4f9287298c1039c27 @belivvr/aframe-react

    Why directly get commit?

    A-Frame doesn't release minor patch. But, they constantly commit.
    When just install aframe@1.3.0 install, causes hand tracking mesh broken issue.
    But, install latest commit, this issue is solved.

    Usage

    React

    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'aframe';
    
    import {
      Scene,
      Box,
      Sphere,
      Cylinder,
      Plane,
      Sky,
    } from '@belivvr/aframe-react';
    
    ReactDOM.render(
      (
        <Scene>
          <Box
            position={{ x: -1, y: 0.5, z: -3 }}
            rotation={{ x: 0, y: 45, z: 0 }}
            color="#4CC3D9"
          />
          <Sphere
            position={{ x: 0, y: 1.25, z: -5 }}
            radius={1.25}
            color="#EF2D5E"
          />
          <Cylinder
            position={{ x: 1, y: 0.75, z: -3 }}
            radius={0.5}
            height={1.5}
            color="#FFC65D"
          />
          <Plane
            position={{ x: 0, y: 0, z: -4 }}
            rotation={{ x: -90, y: 0, z: 0 }}
            width={4}
            height={4}
            color="#7BC8A4"
          />
          <Sky color="#ECECEC" />
        </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,
      Box,
      Sphere,
      Cylinder,
      Plane,
      Sky,
    } from '@belivvr/aframe-react';
    
    const Home: NextPage = () => {
      const [rendered, setRendered] = useState<boolean>(false);
    
      useEffect(() => {
        setRendered(true);
    
        if (typeof window !== 'undefined') {
          require('aframe'); // eslint-disable-line global-require
        }
      }, [setRendered]);
    
      if (!rendered) {
        return <>loading</>;
      }
    
      return (
        <Scene>
          <Box
            position={{ x: -1, y: 0.5, z: -3 }}
            rotation={{ x: 0, y: 45, z: 0 }}
            color="#4CC3D9"
          />
          <Sphere
            position={{ x: 0, y: 1.25, z: -5 }}
            radius={1.25}
            color="#EF2D5E"
          />
          <Cylinder
            position={{ x: 1, y: 0.75, z: -3 }}
            radius={0.5}
            height={1.5}
            color="#FFC65D"
          />
          <Plane
            position={{ x: 0, y: 0, z: -4 }}
            rotation={{ x: -90, y: 0, z: 0 }}
            width={4}
            height={4}
            color="#7BC8A4"
          />
          <Sky color="#ECECEC" />
        </Scene>
      );
    };
    
    export default Home;

    Using custom component

    • 0.4.0 Updated: When using AFRAME.registerComponent, supports type.

    example

    AFRAME.registerComponent('spinner', {
      schema: {
        dur: { type: 'number' },
        startEvent: { type: 'array' },
        position: { type: 'vec3' },
        spin: { type: 'boolean' },
      },
    
      init() {
        // ...
      },
    });
    
    // <a-box spinner="dur: 2000; startEvent: click, mouseenter; position: 0 0 -1; spin: true;>
    <Box
      spinner={{
        dur: 2000,
        startEvent: ['click', 'mouseenter'],
        position: { x: 0, y: 0, z: -1 },
        spin: true,
      }}
    >

    Difference from aframe-react

    aframe-react @belivvr/aframe-react
    Support Tags Entity, Scene The entire A-Frame tag
    Custom Property
    Support TypeScript
    Type Check
    (Properties of all components provided by A-Frame by default.)
    jsdoc image image

    Install

    npm i @belivvr/aframe-react

    DownloadsWeekly Downloads

    225

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    2.35 MB

    Total Files

    310

    Last publish

    Collaborators

    • juunini