Merge pull request #91 from panter/with-projected-position

add hoc withProjectedPosition

Author: macrozone

ARKit.js

@@ -13,7 +13,7 @@ import {
   View,
   Text,
   NativeModules,
-  requireNativeComponent
+  requireNativeComponent,
 } from 'react-native';
 
 import generateId from './components/lib/generateId';
@@ -26,15 +26,15 @@ const TRACKING_REASONS = [
   'NONE',
   'INITIALIZING',
   'EXCESSIVE_MOTION',
-  'INSUFFICIENT_FEATURES'
+  'INSUFFICIENT_FEATURES',
 ];
 const TRACKING_STATES_COLOR = ['red', 'orange', 'green'];
 
 class ARKit extends Component {
   state = {
     state: 0,
     reason: 0,
-    floor: null
+    floor: null,
   };
   componentWillMount() {
     ARKitManager.clearScene();
@@ -55,7 +55,7 @@ class ARKit extends Component {
           <View
             style={[
               styles.stateIcon,
-              { backgroundColor: TRACKING_STATES_COLOR[this.state.state] }
+              { backgroundColor: TRACKING_STATES_COLOR[this.state.state] },
             ]}
           />
           <Text style={styles.stateText}>
@@ -84,21 +84,21 @@ class ARKit extends Component {
   _onTrackingState = ({
     state = this.state.state,
     reason = this.state.reason,
-    floor
+    floor,
   }) => {
     if (this.props.onTrackingState) {
       this.props.onTrackingState({
         state: TRACKING_STATES[state] || state,
         reason: TRACKING_REASONS[reason] || reason,
-        floor
+        floor,
       });
     }
 
     if (this.props.debug) {
       this.setState({
         state,
         reason,
-        floor: floor ? floor.toFixed(2) : this.state.floor
+        floor: floor ? floor.toFixed(2) : this.state.floor,
       });
     }
   };
@@ -138,19 +138,19 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 4,
     backgroundColor: 'black',
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   stateIcon: {
     width: 12,
     height: 12,
     borderRadius: 6,
-    marginRight: 4
+    marginRight: 4,
   },
   stateText: {
     color: 'white',
     fontSize: 10,
-    height: 12
-  }
+    height: 12,
+  },
 });
 
 // copy all ARKitManager properties to ARKit
@@ -160,7 +160,7 @@ Object.keys(ARKitManager).forEach(key => {
 
 const addDefaultsToSnapShotFunc = funcName => ({
   target = 'cameraRoll',
-  format = 'png'
+  format = 'png',
 }) => ARKitManager[funcName]({ target, format });
 
 ARKit.snapshot = addDefaultsToSnapShotFunc('snapshot');
@@ -182,7 +182,7 @@ ARKit.propTypes = {
   onTrackingState: PropTypes.func,
   onTapOnPlaneUsingExtent: PropTypes.func,
   onTapOnPlaneNoExtent: PropTypes.func,
-  onEvent: PropTypes.func
+  onEvent: PropTypes.func,
 };
 
 const RCTARKit = requireNativeComponent('RCTARKit', ARKit);

README.md

@@ -311,6 +311,96 @@ See https://github.com/HippoAR/react-native-arkit/pull/89 for details
 | `shape` | `{ pathSvg, extrusion, pathFlatness, chamferRadius, chamferProfilePathSvg, chamferProfilePathFlatness }` |
 
 
+### HOCs (higher order components)
+
+#### withProjectedPosition()
+
+this hoc allows you to create 3D components where the position is always relative to the same point on the screen/camera, but sticks to a plane or object.
+
+Think about a 3D cursor that can be moved across your table or a 3D cursor on a wall.
+
+You can use the hoc like this:
+
+```
+const Cursor3D = withProjectedPosition()(({positionProjected, projectionResult}) => {
+  if(!projectionResult) {
+    // nothing has been hit, don't render it
+    return null;
+  }
+  return (
+    <ARKit.Sphere
+      position={positionProjected}
+      shape={{
+        radius: 0.1
+        }}
+    />
+  )
+})
+
+```
+
+Now you can your 3D cursor like this:
+
+##### Attach to a given detected horizontal plane
+
+Given you have detected a plane with onPlaneDetected, you can make the cursor stick to that plane:
+
+```
+<Cursor3D projectPosition={{
+  x: windowWidth / 2,
+  y: windowHeight / 2,
+  plane: "my-planeId"
+  }}
+/>
+
+```
+
+If you don't have the id, but want to place the cursor on a certain plane (e.g. the first or last one), pass a function for plane. This function will get all hit-results and you can return the one you need:
+
+```
+<Cursor3D projectPosition={{
+  x: windowWidth / 2,
+  y: windowHeight / 2,
+  plane: (results) => results.length > 0 ? results[0] : null
+  }}
+/>
+
+```
+
+It uses https://developer.apple.com/documentation/arkit/arframe/2875718-hittest with some default options. Please file an issue or send a PR if you need more control over the options here!
+
+##### Attach to a given 3D object
+
+You can attach the cursor on a 3D object, e.g. a non-horizontal-plane or similar:
+
+Given there is some 3D object on your scene with `id="my-nodeId"`
+
+```
+<Cursor3D projectPosition={{
+  x: windowWidth / 2,
+  y: windowHeight / 2,
+  node: "my-nodeId"
+  }}
+/>
+```
+
+Like with planes, you can select the node with a function.
+
+E.gl you have several "walls" with ids "wall_1", "wall_2", etc.
+
+```
+<Cursor3D projectPosition={{
+  x: windowWidth / 2,
+  y: windowHeight / 2,
+  node: results => results.find(r => r.id.startsWith('wall_')),
+  }}
+/>
+```
+
+
+It uses https://developer.apple.com/documentation/scenekit/scnscenerenderer/1522929-hittest with some default options. Please file an issue or send a PR if you need more control over the options here!
+
+
 
 ## Contributing
 

components/ARSprite.js

@@ -13,7 +13,7 @@ const ARSprite = withAnimationFrame(
       super(props);
       this.state = {
         zIndex: new Animated.Value(),
-        pos2D: new Animated.ValueXY() // inits to zero
+        pos2D: new Animated.ValueXY(), // inits to zero
       };
     }
     onAnimationFrame() {
@@ -22,9 +22,9 @@ const ARSprite = withAnimationFrame(
           {
             x: this.state.pos2D.x,
             y: this.state.pos2D.y,
-            z: this.state.zIndex
-          }
-        ])
+            z: this.state.zIndex,
+          },
+        ]),
       );
     }
 
@@ -34,18 +34,18 @@ const ARSprite = withAnimationFrame(
           style={{
             position: 'absolute',
             transform: this.state.pos2D.getTranslateTransform(),
-            ...this.props.style
+            ...this.props.style,
           }}
         >
           {this.props.children}
         </Animated.View>
       );
     }
-  }
+  },
 );
 
 ARSprite.propTypes = {
-  position
+  position,
 };
 
 module.exports = ARSprite;

components/lib/createArComponent.js

@@ -15,7 +15,7 @@ import {
   orientation,
   position,
   rotation,
-  transition
+  transition,
 } from './propTypes';
 import { processColorInMaterial } from './parseColor';
 import generateId from './generateId';
@@ -27,25 +27,25 @@ const NODE_PROPS = [
   'rotation',
   'scale',
   'orientation',
-  'transition'
+  'transition',
 ];
 const KEYS_THAT_NEED_REMOUNT = ['material', 'shape', 'model'];
 
 const nodeProps = (id, props) => ({
   id,
-  ...pick(props, NODE_PROPS)
+  ...pick(props, NODE_PROPS),
 });
 
 export default (mountConfig, propTypes = {}) => {
   const getShapeAndMaterialProps = props =>
     typeof mountConfig === 'string'
       ? {
           shape: props.shape,
-          material: processColorInMaterial(props.material)
+          material: processColorInMaterial(props.material),
         }
       : {
           ...pick(props, mountConfig.pick),
-          material: processColorInMaterial(props.material)
+          material: processColorInMaterial(props.material),
         };
 
   const mountFunc =
@@ -57,22 +57,22 @@ export default (mountConfig, propTypes = {}) => {
     mountFunc(
       getShapeAndMaterialProps(props),
       nodeProps(id, props),
-      props.frame
+      props.frame,
     );
   };
 
   const ARComponent = class extends Component {
     identifier = null;
-
     componentDidMount() {
       this.identifier = this.props.id || generateId();
+
       mount(this.identifier, this.props);
     }
 
     componentWillUpdate(props) {
       const changedKeys = filter(
         keys(this.props),
-        key => !isDeepEqual(props[key], this.props[key])
+        key => !isDeepEqual(props[key], this.props[key]),
       );
 
       if (isEmpty(changedKeys)) {
@@ -88,7 +88,7 @@ export default (mountConfig, propTypes = {}) => {
         // always include transition
         ARGeosManager.update(
           this.identifier,
-          pick(props, ['transition', ...changedKeys])
+          pick(props, ['transition', ...changedKeys]),
         );
       }
     }
@@ -101,6 +101,7 @@ export default (mountConfig, propTypes = {}) => {
       return null;
     }
   };
+
   ARComponent.propTypes = {
     frame: PropTypes.string,
     position,
@@ -109,7 +110,7 @@ export default (mountConfig, propTypes = {}) => {
     rotation,
     orientation,
     material,
-    ...propTypes
+    ...propTypes,
   };
 
   return ARComponent;

components/lib/generateId.js

@@ -3,6 +3,7 @@
 const digits = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
 function toSex(num, base) {
+  /* eslint no-param-reassign:0 */
   if (base) {
     num = parseInt(num, base);
   }

components/lib/parseColor.js

@@ -1,5 +1,6 @@
 import { processColor } from 'react-native';
 
+/* eslint import/prefer-default-export: 0 */
 export function processColorInMaterial(material) {
   if (!material) {
     return material;