Skip to content

Commit 1b29ba1

Browse files
committed
feat: mind-ar-ts gestures props
1 parent 0636d1d commit 1b29ba1

10 files changed

Lines changed: 152 additions & 26 deletions

File tree

README.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,36 @@
11
# Mind AR React
22

3-
## A Mind AR Modules for React
3+
## A Mind AR Wrapper for React
4+
5+
# How to start
6+
7+
- Install Mind AR React as Depedencies
8+
9+
```
10+
npm i mind-ar-react
11+
```
12+
13+
- Install Aframe, since it's depends on aframe
14+
15+
```
16+
npm i aframe
17+
```
18+
19+
- Import the components in your React projects
20+
21+
```js
22+
import { Scene, Camera, Box } from 'mind-ar-react';
23+
24+
25+
return (
26+
/// See the Example one for the structure
27+
);
28+
```
29+
30+
# Usage
31+
32+
:arrow_right: Please see how to use it by seeing the example one in [Examples](./src/Examples)
33+
34+
# :warning: Gesture/Mouse Actions :warning:
35+
36+
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.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mind-ar-react",
3-
"version": "0.1.0-beta1",
3+
"version": "0.1.0-beta2",
44
"main": "dist/index.js",
55
"scripts": {
66
"dev": "vite",
@@ -15,7 +15,7 @@
1515
"react-dom": "^18.0.0"
1616
},
1717
"dependencies": {
18-
"aframe-react-component": "^0.1.0-beta1a",
18+
"aframe-react-component": "^0.1.0-beta2a",
1919
"lodash": "^4.17.21",
2020
"mind-ar-ts": "^0.5.2-beta2a"
2121
},

src/Examples/ImageTracking.tsx

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
import React, { useState } from 'react';
22
import { Camera, GLTFModel, Plane, Assets, Item } from 'aframe-react-component';
33
import ImageTracking from '../components/AR/ImageTracking';
4-
import { Marker, Scene } from '../components';
4+
import { Entity, Marker, Scene } from '../components';
55

66
const ExampleImageTracking = () => {
77
const [started, setStarted] = useState(false);
88

9+
const rotationSettings = {
10+
enabled: true,
11+
rotationFactor: 5,
12+
};
13+
14+
const scaleSettings = {
15+
enabled: true,
16+
minScale: 0.3,
17+
maxScale: 8,
18+
};
19+
920
return (
1021
<ImageTracking>
1122
<button onClick={() => setStarted(!started)}>{started ? 'Stop' : 'Start'}</button>
@@ -17,6 +28,8 @@ const ExampleImageTracking = () => {
1728
autoStart: true,
1829
}}
1930
color-space="sRGB"
31+
mouse-detector
32+
gesture-detector
2033
embedded
2134
renderer="colorManagement: true, physicallyCorrectLights"
2235
orientationUI
@@ -35,21 +48,34 @@ const ExampleImageTracking = () => {
3548
</Assets>
3649
<Camera position={{ x: 0, y: 0, z: 0 }} look-controls={false} />
3750
<Marker targetIndex={0}>
38-
<Plane src="#card" position={[0, 0, 0]} height={0.552} width={1} rotation={[0, 0, 0]} />
39-
<GLTFModel
40-
rotation={[0, 0, 0]}
41-
position={[0, 0, 0.1]}
42-
scale={[0.005, 0.005, 0.005]}
43-
animation={{
44-
property: 'position',
45-
to: '0 0.1 0.1',
46-
dur: 1000,
47-
easing: 'easeInOutQuad',
48-
loop: true,
49-
dir: 'alternate',
50-
}}
51-
src="#avatarModel"
52-
/>
51+
<Entity
52+
mouse-rotation={rotationSettings}
53+
mouse-scale={scaleSettings}
54+
gesture-rotation={rotationSettings}
55+
gesture-scale={scaleSettings}
56+
>
57+
<Plane
58+
src="#card"
59+
position={[0, 0, 0]}
60+
height={0.552}
61+
width={1}
62+
rotation={[0, 0, 0]}
63+
/>
64+
<GLTFModel
65+
rotation={[0, 0, 0]}
66+
position={[0, 0, 0.1]}
67+
scale={[0.005, 0.005, 0.005]}
68+
animation={{
69+
property: 'position',
70+
to: '0 0.1 0.1',
71+
dur: 1000,
72+
easing: 'easeInOutQuad',
73+
loop: true,
74+
dir: 'alternate',
75+
}}
76+
src="#avatarModel"
77+
/>
78+
</Entity>
5379
</Marker>
5480
</Scene>
5581
)}

src/components/AR/ImageTracking.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'aframe';
22
import 'mind-ar-ts/dist/mindar-image.prod.js';
33
import 'mind-ar-ts/dist/mindar-image-aframe.prod.js';
4+
import 'mind-ar-ts/dist/mindar-gesture.prod.js';
45
import React from 'react';
56

67
const ImageTracking = ({ children }: { children: React.ReactNode }) => (

src/components/Entity.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import { Entity as AEntity } from 'aframe';
3+
import { Entity as EntityComponent } from 'aframe-react-component';
4+
import { getAframeProps } from 'aframe-react-component/dist/utils/common';
5+
import { Entity as _Entity } from '../utils/interfaces';
6+
7+
const Entity = React.forwardRef<AEntity, _Entity>((props, ref) => {
8+
const {
9+
'gesture-rotation': gestureRotation,
10+
'gesture-scale': gestureScale,
11+
'mouse-rotation': mouseRotation,
12+
'mouse-scale': mouseScale,
13+
...rest
14+
} = props;
15+
16+
return (
17+
<EntityComponent
18+
{...rest}
19+
{...(gestureRotation && {
20+
'gesture-rotation': getAframeProps(gestureRotation),
21+
})}
22+
{...(gestureScale && {
23+
'gesture-scale': getAframeProps(gestureScale),
24+
})}
25+
{...(mouseRotation && {
26+
'mouse-rotation': getAframeProps(mouseRotation),
27+
})}
28+
{...(mouseScale && {
29+
'mouse-scale': getAframeProps(mouseScale),
30+
})}
31+
ref={ref}
32+
/>
33+
);
34+
});
35+
36+
export default Entity;

src/components/Scene.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,19 @@ import { Scene as _Scene } from '../utils/interfaces';
88

99
const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) => {
1010
const sceneRef = useRef<AScene>(null);
11-
const { mindARImage, mindARFace, ...rest } = props;
11+
const {
12+
mindARImage,
13+
mindARFace,
14+
'gesture-detector': gestureDetector,
15+
'mouse-detector': mouseDetector,
16+
...rest
17+
} = props;
1218

1319
return (
1420
<SceneComponent
1521
{...rest}
22+
gesture-detector={gestureDetector}
23+
mouse-detector={mouseDetector}
1624
{...(mindARImage && {
1725
'mindar-image': getAframeProps(generateImageProps(mindARImage)),
1826
})}

src/components/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import Entity from './Entity';
12
import Faces from './Faces';
23
import Marker from './Marker';
34
import Scene from './Scene';
45

5-
export { Faces, Marker, Scene };
6+
export { Entity, Faces, Marker, Scene };

src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Scene, Faces, Marker } from './components';
1+
import { Entity, Faces, Marker, Scene } from './components';
22
import FaceTracking from './components/AR/FaceTracking';
33
import ImageTracking from './components/AR/ImageTracking';
44

55
const Components = {
6+
Entity,
67
Faces,
78
Marker,
89
Scene,

src/utils/interfaces.ts

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Entity, Scene as _Scene } from 'aframe-react-component/dist/utils/interface';
2+
import { Entity as _Entity, Scene as _Scene } from 'aframe-react-component/dist/utils/interface';
33
import { COMPILER_STATE } from './constant';
44

55
export type DefaultARProps = {
@@ -26,17 +26,37 @@ export type MindARFace = DefaultARProps & {
2626
};
2727

2828
export type Scene = _Scene & {
29+
'gesture-detector'?: boolean;
30+
'mouse-detector'?: boolean;
2931
mindARImage?: MindARImage;
3032
mindARFace?: MindARFace;
3133
children?: React.ReactNode;
3234
arEvents?: IAREvents[] | IAREvents;
3335
};
3436

35-
export type Marker = Entity & {
37+
export type GestureRotation = {
38+
enabled: boolean;
39+
rotationFactor: number;
40+
};
41+
42+
export type GestureScale = {
43+
enabled: boolean;
44+
minScale: number;
45+
maxScale: number;
46+
};
47+
48+
export type Marker = _Entity & {
3649
targetIndex: number;
3750
};
3851

39-
export type Faces = Entity & {
52+
export type Entity = _Entity & {
53+
'gesture-rotation'?: GestureRotation;
54+
'mouse-rotation'?: GestureRotation;
55+
'gesture-scale'?: GestureScale;
56+
'mouse-scale'?: GestureScale;
57+
};
58+
59+
export type Faces = _Entity & {
4060
anchorIndex?: number;
4161
};
4262

tsconfig.build.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"declaration": true
99
},
1010
"include": [
11-
"src/main.ts"
11+
"src/index.ts"
1212
],
1313
"exclude": [
1414
"node_modules",

0 commit comments

Comments
 (0)