feat: mind-ar-ts gestures props

Author: krsbx

README.md

@@ -1,3 +1,36 @@
 # Mind AR React
 
-## A Mind AR Modules for 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
+```
+
+- Import the components in your React projects
+
+```js
+import { Scene, Camera, Box } from 'mind-ar-react';
+
+
+return (
+  /// See the Example one for the structure
+);
+```
+
+# Usage
+
+:arrow_right: Please see how to use it by seeing the example one in [Examples](./src/Examples)
+
+# :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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-ar-react",
-  "version": "0.1.0-beta1",
+  "version": "0.1.0-beta2",
   "main": "dist/index.js",
   "scripts": {
     "dev": "vite",
@@ -15,7 +15,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "aframe-react-component": "^0.1.0-beta1a",
+    "aframe-react-component": "^0.1.0-beta2a",
     "lodash": "^4.17.21",
     "mind-ar-ts": "^0.5.2-beta2a"
   },

src/Examples/ImageTracking.tsx

@@ -1,11 +1,22 @@
 import React, { useState } from 'react';
 import { Camera, GLTFModel, Plane, Assets, Item } from 'aframe-react-component';
 import ImageTracking from '../components/AR/ImageTracking';
-import { Marker, Scene } from '../components';
+import { Entity, Marker, Scene } from '../components';
 
 const ExampleImageTracking = () => {
   const [started, setStarted] = useState(false);
 
+  const rotationSettings = {
+    enabled: true,
+    rotationFactor: 5,
+  };
+
+  const scaleSettings = {
+    enabled: true,
+    minScale: 0.3,
+    maxScale: 8,
+  };
+
   return (
     <ImageTracking>
       <button onClick={() => setStarted(!started)}>{started ? 'Stop' : 'Start'}</button>
@@ -17,6 +28,8 @@ const ExampleImageTracking = () => {
             autoStart: true,
           }}
           color-space="sRGB"
+          mouse-detector
+          gesture-detector
           embedded
           renderer="colorManagement: true, physicallyCorrectLights"
           orientationUI
@@ -35,21 +48,34 @@ const ExampleImageTracking = () => {
           </Assets>
           <Camera position={{ x: 0, y: 0, z: 0 }} look-controls={false} />
           <Marker targetIndex={0}>
-            <Plane src="#card" position={[0, 0, 0]} height={0.552} width={1} rotation={[0, 0, 0]} />
-            <GLTFModel
-              rotation={[0, 0, 0]}
-              position={[0, 0, 0.1]}
-              scale={[0.005, 0.005, 0.005]}
-              animation={{
-                property: 'position',
-                to: '0 0.1 0.1',
-                dur: 1000,
-                easing: 'easeInOutQuad',
-                loop: true,
-                dir: 'alternate',
-              }}
-              src="#avatarModel"
-            />
+            <Entity
+              mouse-rotation={rotationSettings}
+              mouse-scale={scaleSettings}
+              gesture-rotation={rotationSettings}
+              gesture-scale={scaleSettings}
+            >
+              <Plane
+                src="#card"
+                position={[0, 0, 0]}
+                height={0.552}
+                width={1}
+                rotation={[0, 0, 0]}
+              />
+              <GLTFModel
+                rotation={[0, 0, 0]}
+                position={[0, 0, 0.1]}
+                scale={[0.005, 0.005, 0.005]}
+                animation={{
+                  property: 'position',
+                  to: '0 0.1 0.1',
+                  dur: 1000,
+                  easing: 'easeInOutQuad',
+                  loop: true,
+                  dir: 'alternate',
+                }}
+                src="#avatarModel"
+              />
+            </Entity>
           </Marker>
         </Scene>
       )}

src/components/AR/ImageTracking.tsx

@@ -1,6 +1,7 @@
 import 'aframe';
 import 'mind-ar-ts/dist/mindar-image.prod.js';
 import 'mind-ar-ts/dist/mindar-image-aframe.prod.js';
+import 'mind-ar-ts/dist/mindar-gesture.prod.js';
 import React from 'react';
 
 const ImageTracking = ({ children }: { children: React.ReactNode }) => (

src/components/Entity.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Entity as AEntity } from 'aframe';
+import { Entity as EntityComponent } from 'aframe-react-component';
+import { getAframeProps } from 'aframe-react-component/dist/utils/common';
+import { Entity as _Entity } from '../utils/interfaces';
+
+const Entity = React.forwardRef<AEntity, _Entity>((props, ref) => {
+  const {
+    'gesture-rotation': gestureRotation,
+    'gesture-scale': gestureScale,
+    'mouse-rotation': mouseRotation,
+    'mouse-scale': mouseScale,
+    ...rest
+  } = props;
+
+  return (
+    <EntityComponent
+      {...rest}
+      {...(gestureRotation && {
+        'gesture-rotation': getAframeProps(gestureRotation),
+      })}
+      {...(gestureScale && {
+        'gesture-scale': getAframeProps(gestureScale),
+      })}
+      {...(mouseRotation && {
+        'mouse-rotation': getAframeProps(mouseRotation),
+      })}
+      {...(mouseScale && {
+        'mouse-scale': getAframeProps(mouseScale),
+      })}
+      ref={ref}
+    />
+  );
+});
+
+export default Entity;

src/components/Scene.tsx

@@ -8,11 +8,19 @@ import { Scene as _Scene } from '../utils/interfaces';
 
 const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) => {
   const sceneRef = useRef<AScene>(null);
-  const { mindARImage, mindARFace, ...rest } = props;
+  const {
+    mindARImage,
+    mindARFace,
+    'gesture-detector': gestureDetector,
+    'mouse-detector': mouseDetector,
+    ...rest
+  } = props;
 
   return (
     <SceneComponent
       {...rest}
+      gesture-detector={gestureDetector}
+      mouse-detector={mouseDetector}
       {...(mindARImage && {
         'mindar-image': getAframeProps(generateImageProps(mindARImage)),
       })}

src/components/index.ts

@@ -1,5 +1,6 @@
+import Entity from './Entity';
 import Faces from './Faces';
 import Marker from './Marker';
 import Scene from './Scene';
 
-export { Faces, Marker, Scene };
+export { Entity, Faces, Marker, Scene };

src/index.ts

@@ -1,8 +1,9 @@
-import { Scene, Faces, Marker } from './components';
+import { Entity, Faces, Marker, Scene } from './components';
 import FaceTracking from './components/AR/FaceTracking';
 import ImageTracking from './components/AR/ImageTracking';
 
 const Components = {
+  Entity,
   Faces,
   Marker,
   Scene,

src/utils/interfaces.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Entity, Scene as _Scene } from 'aframe-react-component/dist/utils/interface';
+import { Entity as _Entity, Scene as _Scene } from 'aframe-react-component/dist/utils/interface';
 import { COMPILER_STATE } from './constant';
 
 export type DefaultARProps = {
@@ -26,17 +26,37 @@ export type MindARFace = DefaultARProps & {
 };
 
 export type Scene = _Scene & {
+  'gesture-detector'?: boolean;
+  'mouse-detector'?: boolean;
   mindARImage?: MindARImage;
   mindARFace?: MindARFace;
   children?: React.ReactNode;
   arEvents?: IAREvents[] | IAREvents;
 };
 
-export type Marker = Entity & {
+export type GestureRotation = {
+  enabled: boolean;
+  rotationFactor: number;
+};
+
+export type GestureScale = {
+  enabled: boolean;
+  minScale: number;
+  maxScale: number;
+};
+
+export type Marker = _Entity & {
   targetIndex: number;
 };
 
-export type Faces = Entity & {
+export type Entity = _Entity & {
+  'gesture-rotation'?: GestureRotation;
+  'mouse-rotation'?: GestureRotation;
+  'gesture-scale'?: GestureScale;
+  'mouse-scale'?: GestureScale;
+};
+
+export type Faces = _Entity & {
   anchorIndex?: number;
 };
 

tsconfig.build.json

@@ -8,7 +8,7 @@
     "declaration": true
   },
   "include": [
-    "src/main.ts"
+    "src/index.ts"
   ],
   "exclude": [
     "node_modules",