a-frame-components
Advanced tools
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.
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.
This repository offers a variety of AFrame components that you can use to create immersive and interactive 3D scenes in the browser. Whether you're building simple VR experiences or complex interactive applications, our components are designed to be flexible, modular, and customizable.
To use the components from this repository in your AFrame project, follow these steps:
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
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):
npm install a-frame-components
After installing the components, you can use them in your AFrame scenes by adding them to your entities. Here are some examples:
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 (
<a-scene>
<a-entity position="0 2.5 -2">
<a-container direction="vertical" alignment="flexStart" margin={margin}>
<a-container direction="horizontal" alignment="flexStart" margin={margin}>
<a-menu-container
id="menu"
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`}>
<a-base-interactive
font-size=".07"
value={'word1'}
title={'Title 1'}
interactive-type={'button'}
width={1}
height={"0.2"}
margin="0 0 0.05 0"
/>
</a-menu-container>
...
For each component, you'll find detailed API documentation below:
a-radioProperty: Description and Usage
options: This property is used to specify the options available for selection within the radio component. The data should be passed as a string, and it can potentially be a JSON-encoded string if multiple options are provided. This allows for dynamic generation of radio buttons based on the data provided.value: The value property represents the currently selected option of the radio buttons. It is also a string that corresponds to one of the values specified in the options property. This can be used to pre-select an option when rendering the component or to retrieve the current selection.Example: How to Use This Property
let options = JSON.stringify([{ text: 'Apple', value: 'A', id: 'A', width: 1 }, { text: 'C',value: 'C',id: 'C',width: 1}]);
<a-radio id="radio" options={options} value={"A"}></a-radio>
In this example, options is bound to an array of strings directly in the template, specifying the available options for the radio buttons. The v-model directive is used to create a two-way binding on the value property, effectively linking it to selectedOption in the component's data. As the user selects different options, selectedOption will be updated to reflect the current selection. This approach simplifies handling user input and can be easily extended with additional properties as needed.
Based on the provided description, the a-container component seems to be a layout component designed to control the alignment, direction, and spacing of its child elements. Here's a detailed explanation and usage example:
a-containeralignment: Controls the alignment of child components along the cross axis. Accepts flexStart, flexEnd, or center.
direction: Sets the main axis direction of the container. Accepts horizontal or vertical.
justify-content: Controls the distribution of child components along the main axis. Accepts flexStart, flexEnd, or center.
alignment but applies along the main axis, allowing control over the spacing and distribution of children.margin: Specifies the margin around the container using a shorthand format (top right bottom left).
To use the a-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:
'a-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 a-container are vertically arranged, centered both along the main and cross axis, and the container itself has a specified margin from its surroundings.
Manage event listeners with the 'userEventListenerOn' hook. Pass the event , a handler, and a css selector for the component.
import { useEventListenerOn } from 'a-frame-components';
export default function SpaceShipScene() {
useEventListenerOn('click', () => console.log('Element clicked'), '#menu');
return (
<>
<a-scene>
<a-menu-container id="menu">
<a-base-interactive
font-size=".07"
value={'word1'}
title={'Title 1'}
interactive-type={'button'}
width={1}
height={"0.2"}
margin="0 0 0.05 0"
/>
</a-menu-container>
</a-scene>
</>
)
}
{
"compilerOptions": {
//....
},
"include": [
"src/**/*",
"types/**/*",
"node_modules/a-frame-components/types/**/*"
]
}
This project is licensed under the MIT License.
FAQs
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.
The npm package a-frame-components receives a total of 6 weekly downloads. As such, a-frame-components popularity was classified as not popular.
We found that a-frame-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.