Welcome to the AFrame Components Repository! This collection of custom components is designed to enhance your AFrame-based virtual reality (VR) projects by providing additional functionality, effects, and integrations that are easy to use and integrate.
npm install a-frame-componentshtml
`
2. Add Component Scripts: Include the desired component scripts in your HTML file after including AFrame. You can link directly to the files in this repository (though we recommend downloading or bundling them for production use):
`console
npm install a-frame-components
`
Usage
After installing the components, you can use them in your AFrame scenes by adding them to your entities. Here are some examples:
`react
import { useEffect, useState } from "react";
import { load } from 'a-frame-components';
export default function SpaceShipScene() {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
load().then(() => {
setLoaded(true);
});
}, [])
if (!loaded) {
return <>
}
const margin = '.1 .1 .1 .1'
return (
forward-step="0.05"
text-value="Menu 1 a"
menu-direction={'up'}
flex-direction="column"
justify-content="flexStart"
align-items="flexStart"
component-padding="0.01"
menu-item-height={ .2}
menu-item-width={1.0}>
value={'word1'}
title={'Title 1'}
interactive-type={'button'}
width={1}
height={"0.2"}
margin="0 0 0.05 0"
/>
...
`
API Documentation
For each component, you'll find detailed API documentation below:
#### Example:
To use the frame-container component for creating a layout with vertically centered items, distributed evenly along the main axis, and with a specific margin around the container, you might define it like this:
`javascript
'frame-container': {
alignment: 'center', // Center items vertically (in a horizontal layout)
direction: 'vertical', // Lay out children vertically
'justify-content': 'center', // Evenly distribute children along the vertical axis
margin: '10px 20px 10px 20px', // Top and bottom margins of 10px, left and right margins of 20px
};
`
This setup ensures that the children of the frame-container are vertically arranged, centered both along the main and cross axis, and the container itself has a specified margin from its surroundings.
Events
Manage event listeners with the 'userEventListenerOn' hook. Pass the event , a handler, and a css selector for the component.
- useEventListenerOn
- useBindEventOn
`
import { useEventListenerOn } from 'a-frame-components';
export default function SpaceShipScene() {
useEventListenerOn('click', () => console.log('Element clicked'), '#menu');
let guiProps = useBindEventOn('change', 'title', (evt)=>event.detail.value)
return (
<>
value={'word1'}
title={'Title 1'}
interactive-type={'button'}
width={1}
height={"0.2"}
margin="0 0 0.05 0"
/>
)
}
`
How to Include Type Definitions from a-frame-components in Your TypeScript Project
$3
`json
{
"compilerOptions": {
//....
},
"include": [
"src/*/",
"types/*/",
"node_modules/a-frame-components/types/*/"
]
}
``