https://github.com/wildy13/three-ui-ar

UI for AR Web
https://github.com/wildy13/three-ui-ar

augmented-reality threejs ui webxr

Last synced: 8 days ago
JSON representation

UI for AR Web

• Host: GitHub
• URL: https://github.com/wildy13/three-ui-ar
• Owner: wildy13
• Created: 2024-08-13T03:24:17.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-08-15T04:46:36.000Z (5 months ago)
• Last Synced: 2024-12-29T11:37:18.062Z (8 days ago)
• Topics: augmented-reality, threejs, ui, webxr
• Language: CSS
• Homepage:
• Size: 39.1 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# THREE UI AR

`three-ui-ar` is a versatile JavaScript package designed to simplify the creation of user interfaces (UI) within augmented reality (AR) environments. By providing an easy-to-use API for managing sliding panels, menus, and interactive components, `ThreeUI` enables developers to integrate dynamic and responsive UI elements seamlessly into their AR experiences.

## IMPORTANT

```JS

    const options = {

        requiredFeatures: ['hit-test'],

        optionalFeatures: ['dom-overlay', 'dom-overlay-for-handheld-ar'],

        domOverlay: { root: document.body }

    };

    document.body.appendChild(ARButton.createButton(renderer, options));

```

## Components

### 1. [SlideOver](https://github.com/wildy13/three-ui-ar/blob/master/src/slideOver/)

The core component of the package that manages the sliding panel functionality.

## Features

- **Open and Close Buttons**: Easily configure buttons to open and close the sliding panel.

- **Customizable Panels**: Set up panels with different backgrounds and styles.

- **Dynamic Menus and Submenus**: Add menus and submenus with customizable buttons.

- **Callback Functions**: Execute custom code when menu or submenu items are clicked.

- **Responsive Design**: Built to adapt to different screen sizes and layouts.

- **Integration with Three.js**: Easily integrate with Three.js for 3D experiences.

### 2. [Carousel](https://github.com/wildy13/three-ui-ar/tree/master/src/carousel/)

The `Carousel` component provides a sleek and interactive way to display a collection of images or items that users can navigate through by scrolling.

## Features

- **Manual Navigation**: Allows users to manually scroll through items using touch or mouse input.

- **Customizable Item Width**: Set the width of each item to fit your design needs.

- **Gap Control**: Easily adjust the gap between items to create a more compact or spacious layout.

- **Responsive Design**: Automatically adjusts the layout to fit various screen sizes and orientations.

- **Smooth Scrolling**: Enables smooth and responsive scrolling for a seamless user experience.

- **Snap Scrolling**: Items automatically snap into place as the user scrolls, enhancing usability.

- **Image and Text Support**: Easily integrate images and text into each carousel item.

- **Callback Functions**: Execute custom code when an item is clicked, providing flexibility for interactive experiences.