https://github.com/rhdeck/react-reality-components
Higher-level components and helpers for react-reality
https://github.com/rhdeck/react-reality-components
Last synced: about 1 year ago
JSON representation
Higher-level components and helpers for react-reality
- Host: GitHub
- URL: https://github.com/rhdeck/react-reality-components
- Owner: rhdeck
- License: mit
- Created: 2018-06-13T12:13:26.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-23T18:51:21.000Z (almost 8 years ago)
- Last Synced: 2025-03-15T09:41:38.755Z (over 1 year ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-reality-components
Helper components to allow terser implementation of AR using [react-reality](https://github.com/rhdeck/react-reality)
# 2-D Enhancements
## ARButton
Quickly create a 2-d tappable button floating in space. It is a node, but is best mounted on a node with a bit of distance to the user. Requires viewing through `` - otherwise how would you tap it?
### Props
Inherits props from `` and adds:
- `title`: Title text for the button
- `pressDepth`: How much to change z-position when pressed. (negative for "press-in") (Default -0.2 meters)
- `highlightColor`: Color to change to when pressed. (default: purple)
## ARSign
Quickly create a 2-d sign with text floating in space. Acts as a geometry. (E.g. you mount it on a node)
### Props
Inherits props from `` and adds
`text`: The text to display
### Example
```jsx
```
**Note** An even higher-level implementation that smushes the node props in is available as ``
## ARPlaneScene
A more generalized implementation that mounts an `` on a `` to speed up generation of 2-D content floating in space. Acts as a geometry.
### Props
Inherits from `` and `` and adds
`ppm`: The pixels-per-meter (roughly DPI x 38) to define detail level of your sign.
**Note** An even higher-level implementation that smushes the node props in is available as ``
## ARCenteredSKLabel
Creates a text label with horizontal and vertical centering.
### Props
Other props inherited from ``
### Example
```jsx
```
# Enhanced Geometries
## Colored Geometries
These components apply a `color` prop to the diffuse property of all sides of the geometry.
- ARColoredBox
- ARColoredCapsule
- ARColoredCone
- ARColoredCapsule
- ARColoredPlane
- ARColoredPyramid
- ARColoredShape
- ARColoredSphere
- ARColoredText
- ARColoredTorus
- ARColoredTube
## Textured Geometries
These components apply a `path` prop containing a path to a locally saved texture to all sides of the geometry.
- ARTexturedBox
- ARTexturedCapsule
- ARTexturedCone
- ARTexturedCapsule
- ARTexturedPlane
- ARTexturedPyramid
- ARTexturedShape
- ARTexturedSphere
- ARTexturedText
- ARTexturedTorus
- ARTexturedTube
# Enhanced Nodes
## Basic Geometry-Node Combinations
The following components smush the properties of the node with the properties of the geometry. Materials can be applied as children.
- ARBoxNode
- ARCapsuleNode
- ARConeNode
- ARCapsuleNode
- ARPlaneNode
- ARPyramidNode
- ARShapeNode
- ARSphereNode
- ARTextNode
- ARTorusNode
- ARTubeNode
- ARSignNode
- ARPlaneSceneNode
## Colored Geometry-Node Combinations
The following smush the properties of the node together with the properties of the geometry and add a prop `color` to trigger the diffuse color of the geometry across all surfaces. No material components need to be added.
- ARColoredBoxNode
- ARColoredCapsuleNode
- ARColoredConeNode
- ARColoredCapsuleNode
- ARColoredPlaneNode
- ARColoredPyramidNode
- ARColoredShapeNode
- ARColoredSphereNode
- ARColoredTextNode
- ARColoredTorusNode
- ARColoredTubeNode
## Textured Geometry-Node Combinations
The following components smush the props of the node and the geometry but allo add a prop `path` to a path texture to be used as the diffuse material. No material components need to be added
- ARTexturedBoxNode
- ARTexturedCapsuleNode
- ARTexturedConeNode
- ARTexturedCapsuleNode
- ARTexturedPlaneNode
- ARTexturedPyramidNode
- ARTexturedShapeNode
- ARTexturedSphereNode
- ARTexturedTextNode
- ARTexturedTorusNode
- ARTexturedTubeNode
## ARMeNode
Component that represents current user position. Implements the details of a `` so you don't have to.
# Enhanced Materials
## ARColor
Higher-order component to apply a `color` prop as the material to the geometry you are attaching to.
```jsx
```
If prop `index` is specified, the color is applied only to that face of the geometry.
```jsx
```
## ARTexture
Higher-order component to apply a `path` prop as the path to the texture image for the geometry you are attaching to.
```jsx
```
If prop `index` is specified, the texture is applied only to that face of the geometry.
```jsx
```
# Enhanced Context Providers
## ARNoSession
Component whose children are displayed when the AR session is not spun up yet. Use for placeholder views.
## ARIsSession
Component whose chidren are displayed when the AR sesison is loaded
## ARNoTracking
Component that shows children when you have no planes or images are detected. Requires `` ancestor in tree
## ARIsTracking
Component that shows only when at least one plane or image detecrted. Requires `` ancestor in tree