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
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

Package Sidebar

Install

npm i @belivvr/aframe-react

Weekly Downloads

285

Version

0.4.2

License

MIT

Unpacked Size

2.35 MB

Total Files

310

Last publish

Collaborators

  • juunini