https://github.com/krsbx/mind-ar-react

Mind AR Wrapper for React, working examples can be found in https://krsbx.github.io/react-ar/
https://github.com/krsbx/mind-ar-react

aframe aframe-react augmented-reality mind-ar react threejs typescript

Last synced: 3 months ago
JSON representation

Mind AR Wrapper for React, working examples can be found in https://krsbx.github.io/react-ar/

• Host: GitHub
• URL: https://github.com/krsbx/mind-ar-react
• Owner: krsbx
• License: mit
• Created: 2022-02-22T07:49:43.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-01T01:09:05.000Z (over 1 year ago)
• Last Synced: 2024-08-08T23:16:24.356Z (6 months ago)
• Topics: aframe, aframe-react, augmented-reality, mind-ar, react, threejs, typescript
• Language: TypeScript
• Homepage: https://krsbx.github.io/react-ar/
• Size: 423 KB
• Stars: 9
• Watchers: 2
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mind AR React

## A Mind AR Wrapper for React

# How to start

- Install Mind AR React as Depedencies

```

npm i mind-ar-react

```

- Install Aframe, since it's depends on aframe

```

npm i aframe

```

- Install aframe-react-component, if npm not installing it for you

```

npm i aframe-react-component

```

- Import the components in your React projects

```js

import { Scene } from 'mind-ar-react';

import { Camera, Box } from 'aframe-react-component';

return (

  /// See the Example one for the structure

);

```

# Usage

:arrow_right: Please see how to use it by seeing the example one in [Examples (from src)](./src/examples) / [Examples (from dist)](./dist/examples)

# Keep in Mind

Use the `Scene` and `Entity` component that `mind-ar-react` provide instead the one that `aframe-react-component` provide.

# :warning: Gesture/Mouse Actions :warning:

For any gesture/mouse actions, the example how to use it can be found in [`src/examples/ImageTracking.tsx`](./src/examples/ImageTracking.tsx). In the example files, the only actions that works is the Scale with mouse wheel, this happen 'cause of the DOM things. Any PR to fix this examples are welcome.