aframe-react
React library for A-frame
Languages
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 [email protected].
Install
# yarn
yarn add github:aframevr/aframe#480a303b3c1932170552a3e4f9287298c1039c27 @belivvr/aframe-react
# npm
npm install github:aframevr/aframe#480a303b3c1932170552a3e4f9287298c1039c27 @belivvr/aframe-reactWhy directly get commit?
A-Frame doesn't release minor patch. But, they constantly commit.
When just install [email protected] 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 |  |
 |